This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mustapha Aouas
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!
What to read next?
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mustapha Aouas
Mustapha Aouas | Sciencx (2022-10-17T17:26:46+00:00) 5 devtools tips you may want to know 🚀. Retrieved from https://www.scien.cx/2022/10/17/5-devtools-tips-you-may-want-to-know-%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.