DEV Community

loading...

9 ways to level up your browser devtool skills

sendilkumarn profile image Sendil Kumar N Originally published at sendilkumarn.com Updated on ・2 min read

This is a list of amazing things that browsers can help you with while developing web applications.

1. Colors

Wondering 🤔, What is the hex code for that rgb value? Chrome provides an easy way to get it. Open DevTools and shift + click on the color(swatch) to see their corresponding hex | rgb | hsl value.

Alt Text


2. Animation

Wondering how to tweak the animation? Use the animation editor in the devtools.

You can choose animation timing from a set of pre-defined functions.

Alt Text

You can slow down the animation and play with it to understand/debug how it works.

Alt Text


3. Shadow Editor

Shadows are tricky. Master box/text-shadow using the inline editor.

Alt Text


4. Command tool

Chrome provides Command tool to access files / actions. Use Cmd + Shift + P inside the Dev tools to open the Command tool.

Alt Text


5. Coverage

Check your CSS coverage.

Alt Text

Open Command tool and search for coverage.


6. Rendering

Wondering about the FPS, Layout / Paint in the page.

Alt Text

Open Command tool and search for rendering.


7. Emulate dark mode

Use the emulator to switch between dark and light mode.

Alt Text


8. Sensors

If you are creating an application that requires location based user experience, then you can use the sensors to change the location.

Alt Text

To open sensors, press cmd + shift + p and then type sensors to open the show sensors.


9. Short cut keys :)

Go straight to Address/Search bar using cmd + L.

Navigate through the tabs using ctrl + tab

Navigate tabs with the tab numbers ctrl + num-key.

Go to the last tab using ctrl + 1.
Go to the last tab using ctrl + 9.


Discussions 🐦 Twitter // 💻 GitHub // ✍️ Blog

If you like this article, please leave a like or a comment. ❤️


Discussion (7)

pic
Editor guide
Collapse
nitin profile image
Nitin Bisht

Well that covers almost every essential tool 👍, had one more in my mind we can drag html elements in the elements tab just in case if someone wants to reorder some elements without making changes to the code.

Collapse
lirantal profile image
Liran Tal

Great stuff!
Are you going to explore other areas of the DevTools too? :)

Collapse
sendilkumarn profile image
Sendil Kumar N Author • Edited

Thanks!
Yeah :) Why do you ask, do you have some preference?

Collapse
lirantal profile image
Liran Tal • Edited

Just curious. Would make for a good series :)

Thread Thread
sendilkumarn profile image
Sendil Kumar N Author

Yeah! that is the plan :)

Collapse
obannon profile image
OBannon

Very useful, thanks.

Collapse
s0xzwasd profile image
Daniil Maslov

CSS coverage awesome tool, thanks!