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.
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.
You can slow down the animation and play with it to understand/debug how it works.
3. Shadow Editor
Shadows are tricky. Master box/text-shadow using the inline editor.
4. Command tool
Chrome provides Command tool to access files / actions. Use Cmd + Shift + P inside the Dev tools to open the Command tool.
5. Coverage
Check your CSS coverage.
Open Command tool and search for
coverage.
6. Rendering
Wondering about the FPS, Layout / Paint in the page.
Open Command tool and search for
rendering.
7. Emulate dark mode
Use the emulator to switch between dark and light mode.
8. Sensors
If you are creating an application that requires location based user experience, then you can use the sensors to change the location.
To open sensors, press
cmd+shift+pand then type sensors to open theshow 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. ❤️
Top comments (7)
Well that covers almost every essential tool 👍, had one more in my mind we can drag html elements in the
elementstab just in case if someone wants to reorder some elements without making changes to the code.Great stuff!
Are you going to explore other areas of the DevTools too? :)
Thanks!
Yeah :) Why do you ask, do you have some preference?
Just curious. Would make for a good series :)
Yeah! that is the plan :)
Very useful, thanks.
CSS coverage awesome tool, thanks!