As a software developer building applications with web technology, I naturally spend lots of time in my browser. For many years web developers struggled to build cross-browser applications because many browsers (notably older versions of Internet Explorer) failed to offer even minimal debugging tools — but thankfully today every browser ships with helpful developer tools and supports modern standards.
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 cadance, it becomes difficult to stay on top of new features or UI changes.
When I spoke about this topic at SenchaCon a few weeks 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 applied to those elements, the fact remains that the browser displays a 2D plane. However, Chrome DevTools has a hidden feature that allows us to view the DOM layering in 3D.
To access this feature, we need to complete a few steps:
- Go to chrome://flags and enable “Enable Developer Tools experiments.”
- Restart Chrome
- Open Chrome DevTools
- Click “Settings” (the gear icon in the upper right corner)
- Click on “Experiments” in the left menu
- Check the “Layers panel” option
- Close, then re-open Chrome DevTools
- 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 — as I did in my blog post Creating Custom Layouts in Ext JS.
Thankfully, Chrome DevTools offers a hidden feature to open the Console on any tab — 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 “Emulation” and “Rendering” tabs 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. Although we can pause on the caught exception and see which line of code throws the error, the call stack does not give us a lot of helpful information. In this case, we might be able to deduce that this function call exists in the callback for a store’s load operation, but we have no way of telling what caused the store to load in the first place.
To remedy that problem, check the “Async” checkbox on the “Call Stack” divider. The next time you hit a breakpoint you’ll be given a more comprehensive call stack — one that even 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)