DEV Community

Pere Sola
Pere Sola

Posted on • Updated on

Chrome Dev Tools Tips and Tricks

I recently took the Chrome Dev Tools course on Frontend Masters, by Jon Kuperman. The course was excellent: very well taught, good pace and loaded with stuff I didn't know about. Here is a recap of the stuff I didn't know about, for my future self and for you all:

Elements tab

  • You can change the property in the css column, not only the attributes or values. screenshot
  • You can change the html tag *and the class, ids, etc) in the left column: screenshot
  • + signs allows to add a new element:
  • html tags are droppable
  • Click on Edit as HTML to edit it in the elements tab:

Image description

Image description

  • Scroll into view

scroll into view

  • Clicking h on an element hides it from the screen and you can delete it from the DOM.

  • Simulate state, by clicking on :hov on the css column:

simulate state

  • CSS computed style, which tells you which selector was more specific:

CSS specificityn

  • Selecting an html element, the Event Listeners tab will tell you which events are attached to it:

Event Listeners

  • Click on a color value in a css property, and it gives you a bunch of color options: selector, color palette, colors in the page, eye dropper, etc.

color options elements tab

  • Shift click on a color, and changes the format of the color:

color format

Network tab

  • Cog shows more options, like capture screenshots.
  • Holding shift on an item will turn all the things this item called red:

network calls

  • And if that item was called by something, it will turn green:

Image description

  • Hover over waterfall column element shows more details (docs here):


  • Right click in any column header, will give more options:

more options

  • Priority column shows which priority was given to the network call by the browser:


Performance tab

  • Record and stop. Advise: keep record as small as possible.
  • 3 sections:

i. Graph: frames per second, CPU and Network.
ii. Middle one: many sections
iii. Summary

  • Memory, clicking on memory checkbox:

memory performance

memory checkbox

  • What can slow down a website?

i. Backend: database, server, network, compression
ii. Frontend: large bundles, too many files, images or JS not async, images too large, images uncompressed (lossless image compression), unused JS or CSS, CSS in document body, not using browser

  • You can throttle the loading speed in Network tab and Performance tab:

Image description

Image description

Console tab

  • Click on html element in Element tab, and type $0 in the console to see the element. 0 is shortcut for the last element clicked. And you can manipulate that element, like so:
  • Console history: $0, $1, etc
  • performance.mark('something'), .measure, etc. will time the time between them in the performance tab (timings section). No need for console.time() and console.timeEnd() anymore. There is a bunch of stuff that can be done with the Performance API. performance measurement

Security tab

  • Overview on security, pretty straightforward.

Sources tab

  • Workspaces, so changes persist in disk.
  • XHR/fetch breakpoint, only when the url contains certain text:

XHR breakpoint

  • You can blackbox a script in the call stack, so you don't see it anymore. Helpful for react or whatever stack calls that are irrelevant for the debugging:

blackbox script

  • Step over vs step into next function call:

step into next function call

Memory tab

task manager

task manager

javascript memory leak

  • 3 options for viewing memory:

memory tab

i. Heap snapshot - grabs what's in memory at the time. You can see type of item, distance (distance from the window object, the global), shallow size (how big is the thing) and retained size (size of the object plus the graph it retains)

Image description

ii. Allocation overtime - you can see when memory is allocated overtime

Image description

iii. Allocation sampling, kinda answers the question (ok, I have a memory leak, but what do I do with it?). It will tell you what function or code is causing this.

Image description
Image description

So, tldr on memory management: 1) task manager 2) performance tab, to get visual reference 3) memory tab.

Application tab

  • Storage, service worker, clear site data.

Lighthouse tab

  • Runs also in local.
  • Tests a bunch of stuff: performance, accessibility, SEO, etc. Check it out!

Misc. Some other cool stuff:

  • Rendering tab in Elements tab. It has options like Paint flashing and maaaany more:

Image description

Top comments (0)