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 tickShow user agent shadow dom
within theElements
section. This will allow you, for instance, to break down HTML 5video
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 thestep 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.
- Just set one
- 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.
- The
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
Top comments (0)