Chrome Developer Tools: Features For Developers

Chrome Developer Tools: Features For Developers

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:

  1. How to Open the Developer Tools
  2. How to Dock the Developer Tools Window
  3. Select an Element for Styling
  4. How to Use the Color Picker
  5. How to Use the Device Emulator
  6. Turn on the Built-in Ruler
  7. How to Take a Screenshot
  8. Reformat Minified Files for Easier Reading
  9. Viewing Errors
  10. Looking for Unsecure Content Using the Security Panel
  11. 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.

How to Open the Developer Tools

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.

open dev tools via hot dog menu

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.

How to Dock the Developer Tools Window

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:

dock dev 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.

Select An Element for Styling

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.
dev tools selecting elements

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).

using dev tools for styling post meta

Now that you have the class name, open the theme Customizer and add the CSS and to see the text change color.

style class in customizer

 

How to Use the Color Picker

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 color picker

Using the Device Emulator

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.

open device emulator

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.

device emulator example

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.

responsive emulation

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.

chrome emulator hot dog menu

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.

Turn on the Built In Ruler

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.

activate the chrome ruler

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 ruler example

Taking a Screenshot

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.

chrome command menu

Reformat Minified Files for Easier Reading

Sometimes you might want to view the JavaScript or CSS files, but they have been compressed for faster loading.  You can find the files that have been downloaded for the page by viewing the “Sources” panel.

pretty format compressed files

Clicking on the brackets at the bottom of the widow will reformat the file to show it in a human readable format.

display compressed javascript file in human readable format

 

Viewing Errors

Perhaps one of the most useful features for developers is the Console panel.  Here you can see the errors that occurred on the page. If you are having an issue, sometimes  you can track down the plugin causing it by seeing which file the error was associated with.  Here is a screenshot of a news website that has some JavaScript errors.

finding errors in the chrome console

Note that some scripts were blocked by my ad blocker plugin.  At the bottom there is a JavaScript error and on the right you can see which file it was in.

Looking for Unsecure Content Using the Security Panel

If you are moving a site to SSL, the Security panel may be useful for finding unsecure content.

chrome security panel

Browser Refresh Options

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.

chrome refresh options

Conclusion

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.

 

 

Close Menu
>

Newsletter Sign Up

Receive occasional emails from WebTNG with reviews, how-tos, editorials and news about themes and plugins with a lifetime license. 


Your email address will not be shared.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

Pin It on Pinterest

Share This