A lot of developers use Chrome DevTools daily, but most of them only scratch the surface of its capabilities. Over the years, I've picked up some ridiculously cool (and underused) tricks in Chrome DevTools. So, I thought, why not share these tips with a wider audience?
1. Layouts & Styling
1.1 Copy Styles Directly
Ever perfected the styles on an element directly in DevTools, only to manually transcribe each property back to your CSS file?No more! You can now copy styles directly from DevTools.
Right-click on any element in the Elements tab → Copy → Copy styles. Paste wherever you need.
1.2 Visualize Flex/Grid
Flexbox and Grid can sometimes be tricky to debug, especially with complex layouts.To visualize how your flex or grid layout is structured, you can use the Flexbox Inspector or Grid Inspector. To enable it, just:
Click that little “flex” or “grid” badge next to the element in the Elements panel. Chrome will highlight the layout visually—showing rows, columns, gaps, alignment zones, etc.
Also, scroll down to the
display: flex or display: grid property in the Styles panel.
You'll find icons next to alignment properties — clicking those lets you simulate different flex/grid variations to preview alignment/mode changes live - no CSS edits needed.
2. DOM Debugging
2.1 Watch Element Changes (“Break On”)
Picture this: some rogue JavaScript is messing with your DOM. An element is disappearing, or an attribute is changing mysteriously.You can catch it in the act using the “Break on” feature in the Elements panel.
Right-click on an element in the Elements Panel →
Break on → and pick one:
- Subtree modifications (when a child is added/removed)
- Attribute changes (like
classorstyle) - Node removal
2.2 Quick Element Reference ($0-$4)
Have you ever usedjQuery? If yes, then I bet you must miss the super-comfy $ syntax. If not, you can still follow the next tip and be one step closer to being a pro developer.
Select an element in the Elements panel. Then go to the Console and type
$0.
That's your currently selected element.
This is incredibly useful for testing JavaScript interactions. It even remembers your history!
$1 will give you the previously selected element, all the way up to $4, so you basically have a stack of the last 5 elements you clicked.
3. Console Power Features
3.1 monitorEvents() for Element Events
Want to see real-time events (click, keydown, etc.) targeting the selected DOM node?
Just run this in the console:
monitorEvents(document.getElementById('myElement'), 'click');$0 too or just pass the actual DOM node.)
3.2 Format Console Logs
I used to think that there is nothing fancy in the console logs, until I saw the Facebook's console messages.
%c directive to apply CSS styles to your console messages.
console.log('%c🚀 Styling Logs!', 'color: green; font-size: 16px');You can also use
console.table() to display arrays of objects in a clean, tabular format.
4. AI Features in DevTools
Chrome now ships with “Ask AI” in multiple panels — Elements, Console, Network. It can help explain errors, suggest fixes, and clarify complex code. It's still evolving, but it gets the job done most of the times.
5. Network Panel Tricks
5.1 Simulate Slow Connections
Click the “No throttling” dropdown in the Network tab and simulate real-world speed testing:- 4G/3G speed
- Slow CPU
- Offline
5.2 Mock API Responses
Right-click on any API call in the Network panel →Override content.
Now edit the response JSON and hit “Enter”.
Your frontend will react as if it got this new fake response from the server.
This. Is. My. FAVOURITE.
5.3 Initiators Tab — Trace Request Source
Ever wondered what piece of code triggered a specific network request?Click on any network request → look for the Initiator tab
It shows exactly which line of code initiated that request.
5.4 Advanced Filters in Network Panel
You can definitely filter network requests based on Fetch/XHR, CSS, JS, Font, Img etc. and even type something in the filter bar to filter requests accordingly but the filter box in the Network tab is more than just a simple search.Want to filter only POST requests with 200 status?
Use:
text method:POST status-code:200 Or domain:*.google.com will show requests made to any Google domain.
6. Location, Storage & System
6.1 Spoof Your Location
Need to test a feature that depends on the user's location?In the Sensors tab (hidden under the 3-dot menu > More tools > Sensors), set a fake latitude/longitude.
Great for testing geo-based experiences like "Show nearest stores."
6.2 Find Unused Code with Coverage
If you want to find CSS and JavaScript that your page never even uses and slows down your site, this is the tip that can help.Open the Command Menu (
Ctrl+Shift+P or Cmd+Shift+P) and type 'Coverage' to open the coverage panel.
Coverage panel → Click record → Browse your site.
It will show you what CSS and JS are unused.
6.3 Paint Flashing
In the Rendering tab (you might need to enable it from the three-dot menu -> More tools -> Rendering), check the "Paint Flashing" option. Now, as you interact with your page, the browser will highlight in green any area that gets repainted. This is brilliant for identifying performance bottlenecks. If a tiny hover effect is causing the entire page to repaint, you know you have an optimization opportunity.Helps identify:
- Expensive DOM changes
- Animations triggering layout thrashing
- Rage-inducing jank
7. Sources Panel & Workspaces
7.1 Code Snippets
Do you have handy JavaScript functions that you often use for debugging, like clearing all cookies or displaying hidden form fields? Go to the Sources panel, and on the left pane, find the Snippets tab (you may need to click the>> icon). Here, you can create, save, and run multi-line JavaScript files within DevTools.
You can save reusable JS snippets (like
monitorEvents, $0 inspectors, etc.) inside Sources > Snippets.
Run them anytime in any tab.
I keep a bunch of utility snippets here.
7.2 Workspaces
Constantly making changes in DevTools and then re-applying them in your code editor? With Workspaces, you can connect a local folder on your machine directly to the Sources panel. Any changes you make to CSS or JS in DevTools will be saved directly to the source file. It's a seamless two-way street.8. Bonus: Recorder Panel & 3D View
8.1 Recorder Panel
The Recorder panel is a powerful tool for automating and replaying user journeys. You can record a sequence of actions (like a login flow or adding an item to a cart), and then replay it, measure its performance, or even export it as a Puppeteer script for end-to-end testing.Great for test automation and profiling real UX journeys.
8.2 See your page in 3D
Google Chrome and Microsoft Edge have implemented this feature a little differently, and I like Edge's implementation more. Check yourself and find what suits you the best.
Final Thoughts
Phew! That's a lot, but it's just scratching the surface. I hope you found these tips useful. DevTools is much more than an inspector and logger. Use these features to debug faster, test smarter, and strengthen your frontend workflow.If you know other underrated tricks, share them!
