Chrome Dev Tools Tips and Tricks
Tags: beginners, webdev, programming
Published: 2022-09-03 16:04:12

I recently took the [Chrome Dev Tools course on Frontend Masters](https://frontendmasters.com/courses/dev-tools/), by [Jon Kuperman](https://twitter.com/jkup). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07szssn5uc3gtatj3pp8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tya85df2h76w1lrms0ak.png)

- Scroll into view

![scroll into view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no3eaguo9rc217riogjn.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ln6o7ktl9t90s98dr5v.png)

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


![CSS specificityn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63xtu8b8zda0wxvg4dnt.png)

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

![Event Listeners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6gzgtr37re2kv2u2vfy.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l5lmn125f64ecb5wun5.png)

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

![color format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfzmwdy0xbwam3bmu3n.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2jbxunm3br8ju4c7i2d.png)
- And if that item was called by something, it will turn green:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1duzny7agbiqho2bp7f.png)

- Hover over `waterfall` column element shows more details (docs [here](https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation)):

![waterfall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dekevzayo77phbl0mj6w.png)

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

![more options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eue5yu7qvceueohyl5d8.png)

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

![priority](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dchog1n8unnfo6osn7sn.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgrzojfgu6x6z0m12yjt.png)

![memory checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64kh4uodjr3xbhgqluyd.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut0r8ydl4ul2oll13lg9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1xwv7ovqw54lyzqp89f.png)



## 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](https://developer.mozilla.org/en-US/docs/Web/API/Performance).
![performance measurement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22c9b3yw5oazb5pjkeim.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8y2zjn1dd09jnrtxmls.png)
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4smiox3uv9w65rh5gfc0.png)

- `Step over` vs `step into` next function call:

![step into next function call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu3jyix8z6xf9a9rrb9i.png)

## Memory tab

- Memory consumption
- [Link to Garbage Collection article in MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#garbage_collection)
- More information on garbage collection can be found in [its MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
- Chrome `Task manager` - not part of dev tools, but Chrome:

![task manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytacwqpzk6s8h3f4wh2w.png)

![task manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om0wjvo0lozii6fk9pjl.png)

![javascript memory leak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cdkug4hby6hs0xrmbfs.png)

- 3 options for viewing memory:

![memory tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08kn8ht54285taxvd63p.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au5nhxkkpgqe9wrcci0y.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d856mvtryzk23q0c2gd.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3jv5ufl1hvxlssx63w0.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcwl8oemn0gu982maqii.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cur44scsgs9xucfs5fu.png)