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 + 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. ❤️

---