In this article I want to look at the Chrome developer tools and some of the ways they can be used for development and for troubleshooting. These tools have been expanded slowly over time and many people may not be familiar with them. The developer tools can be a big help when it comes to creating web sites and when trying to track down difficult problems.
I’m going to start out by looking at some of the more standard features and then look at some of the cool things that you might not be aware of. Here is a “table of contents” in case you want to jump to a particular feature or tip:
- How to Open the Developer Tools
- How to Dock the Developer Tools Window
- Select an Element for Styling
- How to Use the Color Picker
- How to Use the Device Emulator
- Turn on the Built-in Ruler
- How to Take a Screenshot
- Reformat Minified Files for Easier Reading
- Viewing Errors
- Looking for Unsecure Content Using the Security Panel
- Browser Refresh Options
I made a quick video for those who prefer. The article has a few more details.
I’m using a demo site with the Astra theme installed.
There are four different ways that you can access the developer tools.
1. Using the “hot dog” menu on the right side of the Chrome navigation bar.
2. Pressing F12 on the keyboard.
3. Pressing Ctrl + Shift + I on the keyboard.
4. Or the way I usually do it, is to right click on the page and select “Inspect” from the context menu.
Once opened, you can choose where you want to dock the developer tools window by going to the hot dog menu on the right side of the developer tools window:
You can dock to the left, bottom or right side of the screen. The first icon is to un-dock the window and is useful if you have 2 monitors and want to use the developer tools on the second screen.
The menu items across the top of the developer tools window are links to the various panels. On the far left is the “Elements” panel. There we see the source code for page with its HTML elements. You can right click on something on the page and click inspect and it will highlight that section of the code, or you can select an element in the code and it will highlight that section on the page. This two way sync between code and page helps to find the elements you want to work with. If you are trying to style a particular element on the page then this is how you can find the CSS ID tag or class name. In the screenshot, I’ve select the search form on the sidebar.
If you want to see the CSS that is being applied, you can see it in the “Style” panel on the right.
For this demo, I’ll select the author name in the post meta and style the text to be red. To do this, right click on the author name and in the Elements panel then double click on the class name. Chrome selects that and you can copy the class name to the clip board (Cntl-C).
Now that you have the class name, open the theme Customizer and add the CSS and to see the text change color.
Chrome has a built-in color picker. To access it, click on one of the color swatches in the Styles panel. This opens the color picker. The eye dropper icon will let you pick a color from the page. Note that it is also a toggle. When it is blue it is active. If you click on it then it turns black and the color picker is off. You can get the hex code here, or click the arrows next to the hex code to see the value using alternative color syntax. Also cool, note the color swatches at the bottom. This is the color palette from the page.
Chrome has built-in device emulation that lets you see an approximation of how the page will look on different screens. To open the device emulator, click the screen size icon on the top left of the developer tools window.
Once the device emulator is open, you can see how the page will look on the selected device. You can adjust the options using the controls at the top. From left to right, there is a menu to select the device, the size of the screen in pixels, the zoom percentage, a drop down to emulate different connection speeds, and an orientation toggle to switch between portrait and landscape mode.
I find the “Responsive” device option very useful for testing CSS breakpoints. You can select that from the device drop down and when you do that, you can resize the page display by dragging the right edge. So, for example, I look to see at what point the menu changes into the mobile hamburger menu by dragging the screen and looking at the pixel size at the top.
Note that there is also a special options menu for the emulator panel that you access by clicking the hot dog menu on the far right. This adds options to show the media queries, rulers, or take screenshots.
You get out of the emulator the same way you turned it on, by clicking the device icon on the left top of the developer tools window.
Chrome has a built-in ruler. To turn it on, click on the hot dog menu on the top right of the developer tools window, and then click the settings menu option. Select the “Show rulers” option. To close out of this window, click the “x” on the top right.
With the ruler enabled, when you select an HTML element in the Elements panel, you see a light ruler at the top and along the left of the page.
Chrome also has the built-in ability to take a screenshot. To take a screen shot, select the developer tools window by clicking in it, press Cntl-Shift-P to bring up the Command Menu, and type in screenshot. The screenshot is taken and downloaded to your downloads directory.
Clicking on the brackets at the bottom of the widow will reformat the file to show it in a human readable format.
If you are moving a site to SSL, the Security panel may be useful for finding unsecure content.
Finally, another very useful feature is the extra browser refresh options you have with the developer tools open. Right click on the Refresh icon in the navigation bar and you see three options. You can do a normal refresh, a hard refresh, or clear the cache and do a hard refresh. Hat tip to Dave Cocking in the WPBuilds Facebook group.
If you’ve been following along, checking out these features in your Chrome browser, then you’ve probably noticed that there are many more features and options available. These are some of my favorites or some that are helpful is special circumstances.
I hope you’ve found a couple of things that you didn’t already know about that will be helpful for you. If you have a favorite that I’ve missed, please share it in the comments below.