Chrome DevTools has lots of hidden features that can save you time while debugging. You can force hover states, capture full-page screenshots, throttle your network, edit a page live, run commands quickly, and much more.
In this article, I'll share 19 Chrome DevTools tricks that can help you debug faster and work more efficiently.
Just like VS Code, Chrome DevTools also has a Command Palette. Press Ctrl + Shift + P (Cmd + Shift + P on Mac) while DevTools is open, and you can quickly search for almost any feature, like screenshots, themes, panels, sensors, and more.
It's much faster than clicking through different menus, and many developers don't even know it exists. Take a Full-Page Screenshot
Open the command palette (Ctrl+Shift+P), type screenshot, and select Capture full size screenshot. DevTools will automatically capture the entire page and save it as a PNG.
You can also capture just a specific element by choosing Capture node screenshot. Force Element States
In the Elements panel, select an element, open the Styles tab, and click :hov. From there, you can force states like :hover, :focus, :active, :visited, and :focus-visible.
It's a quick way to debug hover effects, dropdown menus, focus rings, and other interactive states. Edit Any Text on the Page
It's a handy trick for testing different text, mocking up UI changes, or replacing placeholder content before taking screenshots. Reference the Selected Element in Console
Every time you select an element in the Elements panel, DevTools automatically saves it as $0 in the Console.
Type $0 and press Enter to inspect the element, access its properties, or run methods on it.
You can also use $1, $2, $3, and $4 to access the previously selected elements. This makes switching between elements much faster while debugging. Pretty Print Minified Code
Open the file in the Sources panel and click the {} button at the bottom. DevTools will instantly format the code and make it much easier to read. You don't need to copy and paste it into an external formatter. Throttle the Network
Open the Network panel and click the No throttling dropdown. From there, you can simulate Slow 3G, Fast 3G, or even create a custom network profile.
It's a simple way to see how your website performs on slower connections and catch performance issues before your users do. Block Specific Requests
In the Network panel, right-click any request and select Block request URL. DevTools will block that resource every time you reload the page.
This is a great way to test how your site behaves when an API fails, a font doesn't load, or a third-party script is unavailable, all without changing your code.
{% embed https://shefali.dev/wp-content/uploads/2026/07/Block-Specific-Requests.mp4 %} Colour Format Switcher