Chrome Dev Tools

Opening the DevTools

There are a handful of ways to get into the DevTools, but the primary way we use them is with the following keyboard shortcuts.

Key	Function
Cmd+Opt+i	Open the Dev Tools (to the last used tab)
Cmd+Opt+j	Open the Dev Tools to the console tab
Cmd-Opt-c	Enter "Inspect Element Mode" (click to inspect node)

Check out the Accessing the DevTools section of the docs for the full run down.

Accessing the Console

The JavaScript Console has its own dedicated tab in the DevTools, but often we'll want to work in the console while still retaining the document context. Thankfully we can do this by hitting <esc> while on the Elements tab, and the console will slide up from the bottom, sharing the tab with the elements and inspector display.

DOM manipulations

While we're on the Elements tab we can poke around and interact with our document with surprising flexibility. Check out the DOM and Styles page in the Chrome DevTools docs for the full overview, but to highlight some of our favorite operations:

• Cmd+shift+c - Enable "Inspect Element Mode" to select nodes by clicking on them (same as above, just super useful and worth repeating)
• Live editing - Double click anywhere inside a node to edit its contents.
• Dragging nodes - Drag and drop to reorder nodes in the document outline
• contenteditable on html tag - Enable editing of all content on the page (while respecting the style of each element). Great for quick manipulation / mockups.
• Scroll into view - Can't find that element on the page? Right click, then "Scroll into View" to bring it to you.
• $0 ($1..$4) - $0 is a magic variable in the console that points at the currently selected element in the inspector. $1-$4 are the next most recent. $($0) is a cryptic, but useful incantation that gives us the current node, wrapped as a jQuery object.

CSS manipulations

We can play around with an element's styles just like we can fiddle with its content. Check out the Styles Pane page of the DevTools docs for additional detail. A few handy abilities:

• Add style rules
• See computed styles
• See computed margins/border/padding
• Adjust colors live and with dropper
• Force state like :visited

As with the other sections of the DevTools, the Styles Pane gives us the ability to shorten our feedback loop and make live edits to quickly try out variations on our design and layout. This sort of workflow can fundamentally change how we think about our work, as Inventing on Principle by Bret Victor so famously highlighted.

Console tab

The Console tab provides a live REPL for executing JavaScript in the context of the current page. Check out the Console page of the DevTools docs for the full run down, but to highlight some of our favorite and most used features:

• Preserve log - Prevent the log from clearing on navigation (the default behavior). Super useful if some JS on the page is causing an unexpected redirect.
• Filtering - Filter the displayed log entries to only those of a certain level, e.g. "debug", or filter based on the content of the log message.
• Logging API - console.log is not alone. We have console.table, console.dir, console.time and console.timeEnd for simple timing, and a whole slew of other functions we can use to better understand our client side code.

Sources tab

The Sources tab lists out each of the external files currently loaded along with our page, broken down by domain. The one tip for this page is that while most assets (CSS & JS) will be served minified, making it hard to read them, we can use the Pretty Print button to get Chrome to inflate and expand that content back to a more readable view.

Network Tab

The Network Tab is a critical tab to review regularly to understand the overall performance of our pages. The timeline displayed on the network tab gives us an overview of all of the requests made as part of loading our page, as well as info about each request including cache hit/miss, content size, compression used, etc. Check out the Network page in the DevTools docs for more detail on the functionality on the Network tab.

Network Throttling Simulation

Rather than needing to guess at how our page will perform on a flaky mobile connection, we can use the Emulating network connectivity functionality to directly experience it from the comfort of our browser. This feature allows us to select a speed and latency to simulate, and then re-load our page under those conditions.

Device Emulation

In addition to the network throttling, the Chrome DevTools includes the ability to simulate a specific viewport to simulate a mobile device. Along with setting the viewport, this device mode also enables touch emulation to give us a very good approximation of how our site will look in a mobile context. Check out the Device Mode page for more info.

We used this device mode almost exclusively while building out our Flashcards functionality. Check out the The Story of a Feature: Flashcards Weekly Iteration episode for more detail on that adventure.

Audits Tab

One final tab we do use from time to time is the Audits tab. This tab can review the requests made in loading our page and make recommendations about caching, compression, content size, etc.