Chrome Dev Tools Notes
Tags: chrome, devtools, debugging, javascript
Published: 2021-01-19 11:17:07

I took some notes while watching the excellent "Mastering Chrome Developer Tools v2" course from the FrontendMasters team. Hope you find them useful. Please leave your favorite tips and trick with comments below. 🤓

# Debugging

Did you know that you could BlackBox some third party scripts while debugging through your code. That will hide those scripts from the call stack when you stop running with breakpoints. 

![BlackBox settings](https://dev-to-uploads.s3.amazonaws.com/i/o8k5eay2n5dbwjbl1ez3.png)

# Networking

![Holding the Shift key](https://dev-to-uploads.s3.amazonaws.com/i/ay5bf6lu6ty8l48ke2jk.png)

Holding the `Shift` key and moving the mouse around you can see `who` (in red) loaded a file under the cursor and `which` files (in green) were loaded because of this file.

## Waterfall

### Queueing

- The request was postponed by the rendering engine because it is considered a lower priority than critical resources (like styles)
- The request was put on hold because the browser allows only 6 TCP connections per origin on HTTP 1

### Stalled / Blocked

Time the request spent waiting before it could be sent. It could be because of Queueing. Additionally, this time could include time spent on proxy negotiation.

### DNS Lookup

Every new domain on a page requires a full roundtrip to do the DNS lookup.

### Waiting (TTFB)

Time To First Byte - request time to the server plus the time spent waiting for the server to deliver the response.

### Content download

Time spent receiving the response data.

## Capture Screenshots

![Capture Screenshots](https://dev-to-uploads.s3.amazonaws.com/i/83stdfmgu2o12x2cuckl.png)    

This option will allow us to see how the page will render while it loads.


## Filter 

![Filter](https://developers.google.com/web/tools/chrome-devtools/network/imgs/filter-text-box.svg?dcb_=0.4892571964761012)

You can use multiple properties simultaneously by separating each property with a space. For example, `mime-type:image/gif larger-than:1K` displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations are currently not supported.

Read more on the [docs](https://developers.google.com/web/tools/chrome-devtools/network/reference#filter).

# Audit

## webpagetest.org

![webpagetest](https://dev-to-uploads.s3.amazonaws.com/i/agu1rtmwdiq1cawix25d.png)

## Lighthouse

![Lighthouse](https://dev-to-uploads.s3.amazonaws.com/i/u1at7cm6dwo69ee41uwj.png)

## webhint.io

![webhint](https://dev-to-uploads.s3.amazonaws.com/i/cbp1fjzgrvkisodo681v.png)

# Node.js Debugging

Use `--inspect` flag to run your server: `node --inspect server/index.js`

![Open Node Dev Tools](https://dev-to-uploads.s3.amazonaws.com/i/1460yezivjrei7c7777r.png)

# Performance

![Performance tab](https://dev-to-uploads.s3.amazonaws.com/i/unavm0knkjt46hv7p0rg.png)

We will have the `User Timing` data section for all our [Performance API](https://developer.mozilla.org/ru/docs/Web/API/Performance) calls.

# Rendering

Go to the `Rendering` menu item of the Console menu.

![Rendering menu](https://dev-to-uploads.s3.amazonaws.com/i/vj64kwrk81d8k5y3g5ty.png)

Then turn on the `Paint flashing` option.

![Paint flashing option](https://dev-to-uploads.s3.amazonaws.com/i/6rz8crjmfwyxm7e76hu3.png)

Then the browser will start highlight areas of the page that need to be repainted (in green).

# Task Manager

Go to Chome menu -> More Tools -> Task Manager. There you can see all your tabs. Turn on the `Javascript Memory` column (with right-click on the columns). If you see that Javascript Memory constantly grows over time that could be a sign of a memory leak.

# Credits

[Mastering Chrome Developer Tools v2](https://frontendmasters.com/courses/chrome-dev-tools-v2/)

<span>Photo by <a href="https://unsplash.com/@carlevarino?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Cesar Carlevarino Aragon</a> on <a href="https://unsplash.com/s/photos/tools?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>