Let me guess. You mostly use your browser DevTools to inspect elements, tweak a bit of CSS and maybe log a few things in the console. Same here. At least until I realized DevTools is hiding some ridiculously powerful tools in plain sight.
These features are not new but they’re easy to miss. And once I started using them, my debugging workflow got way smoother and faster. If you spend a lot of time in your browser while building or testing stuff, these might save you hours too.
Let’s talk about a few of my favorites.
1. Toggle Element State
The toggle element state lets you simulate CSS states like hover, focus or active directly in the DevTools panel. It’s perfect for fine-tuning interactive elements that only show styles after a user does something. Say goodbye to chasing hover styles before they disappear.
Example Use Case: You’re styling a dropdown menu that only appears on hover. Toggle hover, inspect the dropdown and apply your styles.
To use it:
Dev Tools → Inspect Element → Toggle Element State → Select Desired State
2. CSS Overview
Right click an element → Toggle Element State → Select desired state
CSS Overview scans your page and gives you a breakdown of your CSS including color usage, font stacks, unused declarations and even contrast issues. It’s a great way to audit the style without additional plugins. You get a report of how consistent your design system is.
Example Use case: You inherited a codebase and want to see which fonts and color scheme are being used.
To use it:
DevTools → Control + Shift + P → Search “Show CSS Overview”
3. Network Throttling
Network Throttling simulates slow internet speeds like “Fast 3G” or “Offline” to test how your site performs under bad network conditions. If you regularly build with users in mind, this one is a real game-changer.
Example Use case: You’re working on a landing page with lots of images and media. Switch to “Slow 3G” and see what takes too long to load.
To use it:
DevTools → Network Tab→ Throttle dropdown→ Pick connection profile.
4. Sensors Panel
The sensors panel is one of my favorites and a must-use for building anything with geolocation or device motion. The Sensors tool lets you simulate your device’s location, orientation and touch inputs.
Example Use case: You’re building a food delivery app that shows nearby restaurants. Use Sensors to change your location and check how the UI responds in different cities.
To use it:
DevTools → More Tools→ Sensors Tab
5. Live Expressions
Live Expressions display the value of any JavaScript expression in real time right there in the console. No more spamming console.log just to see if a variable is changing.
Example Use Case: You want to watch the value of user.isLoggedIn change as users navigate around. Add it as a Live Expression.
To use it:
DevTools → Console Tab→ Click Eye Icon or ‘+’ → Type any JS expression
The best developers are not just great at code. They know their tools like the back of their hand and that’s probably the gap between you and them. DevTools has so much more to offer than most of us use.
If you already use any of these or have other favorites I missed, I’d love to hear about them.
Top comments (1)
what about security tools?