Chrome Devtools

If you're a web developer, you're probably used to using the Chrome DevTools. I'm certainly one of the many developers who uses Chrome, but despite using it for years, I've always had a nagging feeling at the back of my mind that I wasn't using it efficiently. I therefore decided to do a bit of a deep dive into the Chrome DevTools, to try to figure out what the tabs beyond Elements, Console and Network are for, and what other hidden gems lay beneath.

Here are my notes. I've written it as more of a cheat sheet, rather than a well-formed reference document, to remind myself of what tab does what in the future.

Elements tab

  • Inspect your HTML and amend the CSS directly in-browser.
  • Add and remove HTML elements, along with editing element attributes like classes.
  • Design directly in browser by activating design mode. Do this in your console by entering document.designMode = "on". This allows you to add elements directly in your browser.
  • To ensure you're really able to access all elements in your view, switch on the shadow DOM option. Do this in settings, and tick Show user agent shadow dom within the Elements section. This will allow you, for instance, to break down HTML 5 video into its sub-elements.
  • Tip: set * { border: 1px solid red; } to set a red border around all page elements, allowing you to identify off page elements.

Network tab

  • Get an understanding of how long your page takes to load, how many requests are being made, and in what order they're happening.
  • Filter by different requests e.g. CSS requests vs. image requests.
  • Disable cache to check how the website is experienced by first time visitors. Check which assets are being cached, and where that cache is stored.
  • Throttle network speed to check the experience on slow networks.
  • Capture screenshot recordings and visually see how the site loads.
  • Sort by file size to surface the largest files. You can use this to for example, check if your images are optimised.
  • XHR tab identifies failed API requests (in red). You can also drill into TTFB (Time To First Byte) and debug whether responses take the expected form.

Lighthouse tab

  • Get site scores on how accessible, SEO-optimised and quick your site loads, amongst other things.

Layers tab

  • See the various layers of the elements on your page. Great for debugging z-index issues.
  • Rotation feature allows you to visualise your page and elements in 3D.

Animations tab

  • Check the various animations on your site in action, the time each one takes and the animation effect.
  • You can play around with timings the effect to see what is looks like before translating it back to CSS.

Applications tab

  • If you have a PWA, check that manifest.json is loading properly.
  • Clear out your application's cache here - globally or individually.
  • Within the frames section, check that fonts and assets are loading properly. You can even get the web links from which the assets are being downloaded.

Sensors tab

  • Used to simulate device sensors, e.g. change the geolocation by latitude and longitude, device orientation (can rotate the device around to whatever angle you want) or touch pressure.

Rendering tab

  • Allows you to render your site based on emulating certain user screen settings amongst other things e.g.
    • Check what the print media query looks like if you've set it.
    • Check your various layers of elements by adding borders around them.
    • Highlight advertising frames.
    • Display paint refreshes.
    • Test what dark mode looks like.

Debugger mode in the Sources tab

  • Add debugger; in your javascript file. Upon running this the Sources tab will automatically open.
  • Look in the call stack to see the order of function calls being made.
    • You can also see the different JS scopes - local, global and closure (e.g. React's App.js)
  • Adding debugger basically sets breakpoints in our code. Either:
    • Just set one debugger then use the step over functions button to go through your code line by line; or
    • Litter your code with breakpoints and press the play button. This will just pause on exceptions and debugger break points.
  • Check your scoped variables at each point to understand how data is flowing through your app.

Performance tab and Memory tab

  • Use the Performance tab to debug any slow Javascript scripts you might be experiencing. To use this, you need to click record, then do whatever actions you want to test on your site and hit stop recording.
  • Click on show memory timeline and filter for just the JS memory heap.
  • Couple this with the Memory tab to identify memory leaks.
    • The heap snapshot option shows a snapshot over the time period it takes your site to load.
    • The allocation instrumentation on timeline option gives you a visual graph as time progresses.

Other

  • DevTools has a Command Palette which can be used for setting options quickly. To access it, press CMD + Shift + P. I use it to switch on/off dark mode for instance.
  • You can connect your mobile devices and use the browser developer tools to help with debugging. Android devices can connect to Chrome DevTools. iOS devices will however require Safari developer tools.

Any more tips? Talk to me on Twitter or Instagram @bionicjulia

23

Tags:

Devtools