Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. DevTools for Beginners.
![]()
How can the answer be improved?
CSS. Guides. JavaScript. Guides. Deprecated. UI References and Overviews.
Accessibility. Guides. Simulate Mobile Devices. Guides.
Deprecated. Remote Debug Android Devices. Console. Performance. Network. Memory.
HTML. Storage and Resources. Extend DevTools. With DevTools you can view and change any page.
Even the Google homepage, as the video demonstrates. Open DevTools There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.
When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+ Option+ C (Mac) or Control+ Shift+ C (Windows, Linux, Chrome OS). When you want to see logged messages or run JavaScript, press Command+ Option+ J (Mac) or Control+ Shift+ J (Windows, Linux, Chrome OS) to jump straight into the Console panel. See for more details and workflows. DevTools for Beginners DevTools for Beginners teaches you the fundamentals of web development as well as the basics of DevTools.
Check out below if you'd prefer tutorials that focus on DevTools. Get started If you're a more experienced web developer, here are the recommended starting points for learning how DevTools can improve your productivity:. Discover DevTools The DevTools UI can be a little overwhelming.
There's so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity. Note: In the DevTools docs, the top-level tabs are called panels.
Device Mode Simulate mobile devices. Join the DevTools community The best place to file feature requests for Chrome DevTools is the mailing list. The team needs to understand use cases, gauge community interest, and discuss feasibility before implementing any new features. File bug reports in Crbug, which is the engineering team's bug tracker. If you want to alert us to a bug or feature request but don't have much time, you're welcome to send a tweet to @ChromeDevTools. We reply and send announcements from the account regularly. For help with using DevTools, Stack Overflow is the best channel.
To file bugs or feature requests on the DevTools docs, open a GitHub issue on the Web Fundamentals repository. DevTools also has a Slack channel, but the team doesn't monitor it consistently.
Feedback Was this page helpful?
The developer console is a tool which logs the information associated with a web page, such as JavaScript, network requests, and security errors. (It does other things, too, but this is all that really matters for this article.) The information displayed in the developer console can be extremely helpful for the Airtable support team when we're trying to figure out how to solve an issue.
In the course of troubleshooting your issue, the Airtable support team. The following are instructions for how to open the developer console on various different browsers. Chrome To open the developer console window on Chrome, use the keyboard shortcut Shift J (on Windows) or Option J (on Mac).
Alternatively, you can use the Chrome menu in the browser window, select the option 'More Tools,' and then select 'Developer Tools.' Edge To open the console on Edge, hit F12 to access the F12 Developer Tools. Once in the F12 Developer Tools, navigate to the Console tab. Firefox To open the console on Firefox, use the keyboard shortcut Shift K (on Windows) or Option K (on Mac). The toolbox will appear at the bottom of the browser window, with the Web Console activated. Alternatively, under the header Tools in the Mac menu bar, navigate to the sub-menu Web Developer and select Web Console. Safari To open the console on Safari, you will first need to turn on the Develop menu.
To do this, open the Safari menu in the Mac menu bar, then select Preferences. Once in the Preferences dialog, navigate to the Advanced tab, then check the 'Show Develop menu in the menu bar' box. Once the Develop menu has been enabled, you can go to the Develop menu in the menu bar and then select the 'Show JavaScript Console' option. The JavaScript Console will show up on the bottom half of the active browser window. Alternatively, you can use the keyboard shortcut Option C, though note that you will need to enable the Develop menu in your Safari Preferences for this shortcut to work.
Comments are closed.
|
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |