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 👌
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:
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!
Leave a comment to let me know which tip (if any) you found useful ⤵
Until next time, have a nice week!
Top comments (4)
How did you record those gifs? 🤔 They look great! Loom? QuickTime player?
On Linux peek is good too
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
Thank you, I will try it!