I use Google Chrome as my primary browser simply because its set of developer tools offers more features than the competition. I often joke that Chrome Developer Tools has so many features that they ran out of space to show them, so I wanted to share a few hidden gems I’ve found.
Table of Contents
A Quick History Lesson
Google Chrome was first released in 2008. At that time, web developers didn’t have many options when it came to choosing even the most basic debugging tools — Internet Explorer did not offer any developer tools (in spite of holding the majority of the worldwide browser market share), and Safari and Firefox only offered limited tooling. Firebug (an extension for Firefox) was by far the most advanced tool available, and many of us relied on it.
But after Chrome was released, this picture quickly began to change. Chrome (at that time) extended WebKit and the built-in “WebKit Inspector” to include a variety of additional tools (like Profiles) — and soon thereafter surpassed the feature set of Firebug.
Today, Google pushes a new version of Chrome every six weeks, and these updates often include changes to the Chrome Developer Tools. At that cadence, it becomes difficult to stay on top of new features or UI changes.
When I spoke about this topic at SenchaCon some time ago, I skipped what I considered to be the “basic” features of Chrome Developer Tools in order to spend more time talking about the advanced and hidden features. Chrome DevTools has what seems like 10,000 individual features, and we could literally spend days talking about them — so let’s jump right into three features I have found incredibly helpful.
Although most web developers conceptually understand how nesting DOM elements affects the way the browser layers CSS is applied to those elements, the fact remains that the browser displays a 2D plane. However, Chrome DevTools has a feature that allows us to view the DOM layering in 3D.
To access this feature, click on the three dots menu on the right/top side, then More tools then enable Layers option:
Now you should see the Layers tab:
The Layers panel can be incredibly helpful in understanding how your DOM elements are structured on the page, and therefore how CSS rules may apply to them. It’s also very helpful in building anything involving CSS 3D Transforms.
Thankfully, Chrome DevTools offers a hidden feature to open the Console on any tab.
To show it, simply hit the ESC key and the ESC drawer magically opens from the bottom:
The ESC Drawer allows you simultaneous access to the Console, which is certainly convenient — but it also does a whole lot more! The “Performance monitor” and “Rendering” and many other tabs accessible by left three dots menu, are full of amazing features that you should explore:
Asynchronous Call Stacks
In the example above, we hit a runtime error complaining that foo() is not defined. We can pause on the caught exception and see which line of code throws the error and you’ll be given a comprehensive call stack that tells you from where an asynchronous callback was executed.
Google continues to innovate and create exceptional tools for building amazing web applications. With a little bit of exploration, you’ll find a treasure trove of additional debugging functionality in Chrome Developer Tools that you may not have realized existed!
Do you have a favorite feature? Share yours in the comments below.
Damon Salvatore says
This article was really useful
Ivan Jouikov says
Great stuff, Art!
I’d throw into the list Firefox 3D view (you have to enable it in Settings first).
Sebastien Tardif says
Your blog makes me remember I should continuously review the features available from the tools I’m using.
More features here -> https://developer.chrome.com/devtools/docs/tips-and-tricks
One thing I recently started using:
“$0” – which refers to the current element that highlighted on the elements tab.
I use this to (when the top level div of a component is selected) to:
Finding the layers and async stack very useful. Thanks for writing about this!
Kayce Basques says
Hey all, some of this article is out-of-date. In general, be wary of any non-official DevTools docs that are older than 6 months.
Follow this workflow to access Layers info: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layers
The “Esc Drawer” info is still good.
Starting in Chrome 60, the “Async” checkbox is removed and async stacks are on by default: https://developers.google.com/web/updates/2017/05/devtools-release-notes#async-stacks
Kayce (DevTools tech writer)