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. 🤓
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.
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.
- 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
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.
Every new domain on a page requires a full roundtrip to do the DNS lookup.
Time To First Byte - request time to the server plus the time spent waiting for the server to deliver the response.
Time spent receiving the response data.
This option will allow us to see how the page will render while it loads.
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.
--inspect flag to run your server:
node --inspect server/index.js
We will have the
User Timing data section for all our Performance API calls.
Go to the
Rendering menu item of the Console menu.
Then turn on the
Paint flashing option.
Then the browser will start highlight areas of the page that need to be repainted (in green).
Go to Chome menu -> More Tools -> Task Manager. There you can see all your tabs. Turn on the