DEV Community

Cover image for 5 devtools tips you may want to know 🚀
Mustapha Aouas
Mustapha Aouas

Posted on

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?

Image 1


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:

Image 2


3. Previous inspected element

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

Image 5

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


Hi there! I'm Mustapha, a technical writer, speaker and a passionate JS / TS developer. Follow me on Twitter for daily tech tips 🚀


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:

Image 4

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:

Image 5


That's all for now. I hope you found this useful!
Leave a comment to let me know which tip (if any) you found useful ⤵

Until next time, have a nice week!


What to read next?

Top comments (4)

jpomykala profile image
Jakub Pomykała

How did you record those gifs? 🤔 They look great! Loom? QuickTime player?

jream profile image
Jesse • Edited

On Linux peek is good too

mustapha profile image
Mustapha Aouas

Hi Jakub,
I use the screenshot app of macOS to record portions of the screen and to display the keystrokes on screen I use key castr

jpomykala profile image
Jakub Pomykała

Thank you, I will try it!