This video is only a short sample, but you can access the full version and all our other great content by subscribing.Subscribe Now
There are a handful of ways to get into the DevTools, but the primary way we use them is with the following keyboard shortcuts.
||Open the Dev Tools (to the last used tab)|
||Open the Dev Tools to the console tab|
||Enter "Inspect Element Mode" (click to inspect node)|
Check out the Accessing the DevTools section of the docs for the full run down.
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.
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)
$0is a magic variable in the console that points at the currently selected element in the inspector.
$4are the next most recent.
$($0)is a cryptic, but useful incantation that gives us the current node, wrapped as a jQuery object.
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:
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.logis not alone. We have
console.timeEndfor simple timing, and a whole slew of other functions we can use to better understand our client side code.
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.
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.
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.
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.
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.