Google Chrome Developer Tools (CDT) Features – A web dev’s best tool.

Chrome Developer Tools continue to impress

Quick Tutorial

For those that are new to web development or aren’t avid Chrome users (for some strange reason), Chrome’ developer tools set the browser apart from others. To begin using CDT, simply right click on an element of a page in Chrome, and click on ‘Inspect Element’ from the context menu. You will see the dev tools pop up with the HTML that has been rendered to the page, as well as several other tabs for a variety tools.

I encourage you to look through every tab and explore them heavily, as each developer can find great use in any of these. Here I will focus on pointing out a few of my favorites. There are way too many to cover in this one post, surely I will add more since this is by far my favorite tool in my line of work.

Render Functionality – “Paint Flashing”, “FPS”, “Scrolling Perf”

This is only in Chrome Canary (50.x.x) at the moment, hence it will be added to the stable version shortly. As a developer, it is best that you get Canary to stay ahead of the curve.

These features can be found the same way master search is, but clicking the vertical three dots on the top right corner of CDT and choosing “More Tools” -> “Rendering settings”. This will bring up a console tabbed menu from below, and have several checkboxes. I will briefly go over a few of them here in the order of awesome-ness:

CDT Render paint, FPS meter

CDT Render paint, FPS meter

1) Enable Flash Painting: This was a long time coming and my new favorite tool. So many people only focus on their load times and javascript execution time, but with the advancement of CSS and browsers making use of the GPU, executing a ‘paint operation’ can make or break the feeling of your site’s animations (including scrolling and navigating).

This feature allows you to hover elements in the DOM (not only in CDT elements tab, but on the actual page), and it will highlight the element with respect to the box model. Further more, when any scrolling takes place, the areas that require a repaint are highlighted with boxes as well to let you know there is computation happening here; a great place to nab easy performance issues.

2) FPS (Frames per second) Meter: Although this isn’t all that new, they have made it prettier, and since 60FPS is the goal for any and every animation on a site, it is helpful to have that reminder up there that your site is probably not as good as it should be. They also added a nice glance at a GPU monitor which is helpful to understand your CSS vs JS animations.

3) Show Layer Borders: I don’t have this selected in the image above, but it is important to understand how webpages are broken up into panels and then processed. This feature allows you to view those panels with grid lines to help show the independent parts of the page being processed.

Master Search – “Search All Files”

(Note: See my other post a while back where I said that the master search was missing… I am now thinking it was just buried/hidden: Chrome Dev Tools, Master Search All Feature Missing?(???)

Perhaps the best efficiency tool, this will search all of the javascript and CSS files on the page for certain text. For instance, maybe you have an error for an object that is undefined and don’t have any idea what that object is. Well, this could be the case of a third party injecting new variables. The master search will hunt that down for you and help you to resole the issue.

To use, simply click on the three vertical dots on the left-most side of your developer tools window (additional options menu) and you will need to click “Search all files”. This will bring up a console view and an area to type the text you are looking for. If it is a CSS class, type “:hover” to see any hover styles, or a specific function you can look up “function foo” (Pro Tip: To shorten the search just look for “n foo”, which should return the same instances).

Search for all files loaded on a webpage

Search for all files loaded on a webpage

Notice you get a list of results from the files loaded on the page, and you can double click any of them to view them in the source tab.

Forcing element state (pseudo selectors)

Sometimes you need to know what styles are being applied when you hover and hold a click down on an element, which is difficult to do when you need your mouse to be in 2 places at once. This feature has been around for a long time, but is still extremely helpful.

To use, right click on the element in the DOM that you wish to add a pseudo effect to and click ‘inspect element’. In your Elements tab of CDT you will see that element is selected. To see the styles applied when the element is hovered, you can either right click on the element and you will see entries for :active, :hover, :focus and :visited. Simply click the effect that you want, and you will immediately be able to see the style in the right Styles pane.

Setting pseudo selector through CDT

Right click to see the options available for pseudo selections

Setting element to hover

Setting element to hover

Now you can see the yellow dot next to the element in CDT indicating it has a forced modifier applied. Notice also that the heading text is red (the color it should be when hovered) and that the styles in the Styles pane in the bottom right are adjusted accordingly.

The alternative way to apply this modifier-style is by selecting the element that you wish to add the :hover (etc) state to and in the Styles pane you can click the push pin icon in the filter section up top, and it will show you checkboxes for the 4 pseudo selectors. Pretty cool huh? makes debugging pseudo styles a breeze!

Furthermore, the other awesome tools in CDT

These have been around for quite a while, so I will just brush over my favorites:
1) Timeline: This tool is constantly updated with so many goodies, the most recent that stands out is the flame charts, showing you your stack traces throughout the life cycle of your site. It is the best way to debug site performance. For the best help understanding this tool, check out Paul Irish’s many talks on the subject; My favorite (old, yet still great) set of podcasts was “The breakpoint (1-5)”, but to get up to date, please check out all of the newer Chrome Dev Summits.

CDT Timeline

CDT Timeline

As you can see above, timeline is action packed!!! You can now see a quick thumbnail of the page at the different stages of load time; hence what is being painted at that spot in time. You also see the javascript stack trace (which you can move all around, expand and contract with your mouse wheel). This is one of the tools that you are obliged to master if you want to become a great developer!

2) Audit: Do a quick audit of your site to get some easy wins, such as putting css links in the head, and JS links at the bottom of your body. Simple things like this will come up in the CDT audit, among several things you may not have known that help optimize web experience within chrome.

3) Layers: This is relatively new, and probably adapted from Mozilla Firefox’s 3d view of the site and it’s stacked elements. It can be useful, but really just fun to look at.

I could go on for days about my love for Chrome Dev Tools, but this is good enough for a post. I hope you learned something. Feel free to comment or send me any questions or concerns you have, I am always happy to help!

Leave a Reply