Knowing how to use the Developers Tools inside your browser is an important skill for any web developer. The Developer Tools are useful for running JavaScript code, editing HTML and CSS styles without having to refresh the page, or viewing performance data. They also save you lots of time. Getting started couldn't be any easier.
There are three ways to open the Developer Tools menu:
- From the Browser Menu:
-
Chrome: Select the
Chrome Menu>More Tools>Developer Tools -
Firefox: Select the Firefox
Menu>Web Developer>Toggle Tools
- Right click anywhere on a webpage and select
Inspect - Use the keyboard shortcut
CTRL + Shift + I(option + command + Ion Mac)
1. Head to the [Chrome DevTools Documentation](https://developers.google.com/web/tools/chrome-devtools/) by Google. Read these subsections, since this is what you'll be using the Developer Tools for 95% of the time.
* Open DevTools
* Device Mode
1. Device Mode
2. Test Responsive and Device-specific Viewports
* Elements panel
1. Get Started With Viewing and Changing CSS
2. Inspect and Tweak Your Pages
3. Edit Styles
4. Edit the DOM
* Using the Console
* Sources panel
1. Get Started With Debugging JavaScript
2. Pause Your Code With Breakpoints
2. Finally, watch [this video](https://www.youtube.com/watch?v=JzZFccCEgGA) by The Net Ninja for more detail on using the JavaScript Console.
These resoures should give you a pretty good starting point for understanding how to use DevTools. The more you use and understand the abilities of Dev Tools the easier your life as a developer becomes.
- Learn 14 tips and tricks in this JavaScript 30 Video by Wes Bos
- Learn to inspect HTML page elements by reading through this article by Google, then continue on to Edit the DOM
- Practice your DevTool skills with this interactive DevTools CSS overview.