5 devtools tips you may want to know

1. Find unused JavaScript and CSS

To know how many unused JS and CSS you’re shipping open the network tab ➡ Open the command menu (⌘ Cmd + ↑ Shift + P) ➡ type "Coverage" then press enter.

What are the result of your portfolio?

2. Inspect CSS grid and flex container

By clicking on the badge (like in the gif below) you toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks:

3. Previous inspected element

You can access an element that has been inspected in the console by typing $0:

Also, you can use $0, $1, $2, $3 and $4. These commands work as a historical reference to the last inspected elements 👌

4. Scroll into view

Did you know that while inspecting an element in the devtools, you can right click it and select "scroll into view" to scroll to its position in the web page:

This can be useful when working with lists for example.

5. Select elements with pointer-events:none

Usually, if an element does not react to pointer events because the pointer-events:none CSS declaration is set and you can't select it, then the only way to get access it is through the inspector panel.

Actually, you can hold the ↑ Shift key on your keyboard while hovering the element:

That's all for now. I hope you found this useful! Until next time, happy coding! 🚀