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?
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:
You can access an element that has been inspected in the console by typing
Also, you can use
$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 🚀
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.
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!