Browser DevTools Tips and Tricks

Every web developer has DevTools open constantly. But most of us use the same few features: console.log(), the Elements panel, maybe Network. There's so much more in there.

These are the DevTools features we use regularly that aren't obvious to newcomers. All examples are Chrome DevTools, but Firefox and Safari have similar capabilities.

Console Power Moves

console.table()

Logging arrays of objects? Use console.table() instead of console.log(). It formats data in a sortable table that's actually readable.

Also useful: console.group() and console.groupEnd() to organize related logs, and console.time() / console.timeEnd() for quick performance measurements.

$0 Reference

Select an element in the Elements panel, then switch to Console. Type $0 and you have a reference to that element. You can call methods on it, inspect properties, whatever you need. $1 is the previously selected element, and so on.

Live Expressions

Click the eye icon in the Console to add a live expression. It evaluates continuously, so you can watch a value change in real-time without repeated logging.

copy()

Need to copy something from the console to your clipboard? copy(someVariable) puts it there. Works great for grabbing API responses or computed values.

Elements Panel Secrets

Force Element State

Right-click an element and select "Force state" to toggle :hover, :active, :focus, and :visited states. Essential for debugging interactive styles without trying to keep your mouse in the right place.

Edit as HTML

Right-click any element and select "Edit as HTML" to modify the markup directly. Great for testing layout changes before writing code.

Computed Styles with Trace

In the Computed tab, you can see what CSS rules contribute to each property. Click the arrow next to any computed value to jump to the source. This is how you figure out where that random margin is coming from.

CSS Changes Panel

Open the Changes tab (in the drawer, or More tools menu) to see all the CSS you've modified in the current session. You can copy these changes to your actual code.

Network Panel Deep Cuts

Preserve Log

Check "Preserve log" to keep network requests across page navigations. Essential when debugging redirect issues or form submissions.

Throttling

Dropdown at the top lets you simulate slow connections. Test your app on "Slow 3G" to see what users with bad internet experience. Eye-opening.

Block Requests

Right-click any request and select "Block request URL" to test what happens when a resource fails to load. Good for testing error states and fallbacks.

Copy as Fetch/cURL

Right-click any request and copy it as fetch() code or a cURL command. Useful for reproducing API calls in other contexts or sharing with teammates.

Replay XHR

Right-click an XHR request and select "Replay XHR" to send it again. Saves re-triggering the action in your UI when debugging API issues.

Performance Without the Complexity

The Performance panel looks intimidating, but you don't need to understand everything.

Quick Audit

The Lighthouse tab gives you a simple audit. Run it and focus on the specific recommendations. Don't stress about hitting 100 on everything.

Performance Monitor

More tools → Performance monitor shows a real-time view of CPU, memory, and layout operations. Watch it while using your app to spot problems. Big spikes mean something's wrong.

Coverage Panel

More tools → Coverage shows how much of your CSS and JS is actually used. Unused code is wasted bytes. This helps you find what to trim.

Responsive Design Testing

Device Toolbar

Click the device icon (or Cmd+Shift+M) to toggle device simulation. But don't just use the presets. Click "Responsive" and drag the viewport to any size. Real users have weird screen sizes.

Device Pixel Ratio

In device mode, the three-dot menu lets you set device pixel ratio. Test at 2x and 3x to make sure images aren't blurry on high-DPI screens.

Capture Screenshots

In device mode, the three-dot menu has "Capture full size screenshot". Gets the entire scrollable page in one image.

Debugging JavaScript

Conditional Breakpoints

Right-click a line number and add a conditional breakpoint. It only pauses when your condition is true. Game-changer for loops where you only care about specific iterations.

Logpoints

Same right-click menu, but choose "Add logpoint". It logs a message when that line executes without pausing. Like console.log() without modifying your code.

Break on Subtree Modifications

In the Elements panel, right-click an element and select "Break on" → "subtree modifications". Debugger pauses whenever something changes that element. Perfect for finding what's modifying the DOM unexpectedly.

Blackbox Scripts

In Sources settings, you can blackbox scripts you don't want to debug (like library code). Step-through debugging will skip them, letting you focus on your code.

Quick Wins

Some features that don't need explanation, just awareness:

• Cmd+Shift+P - Command palette, search for any DevTools feature
• Cmd+P - Quick file open in Sources
• Cmd+F in Network - Search request contents, not just URLs
• Hold Reload - Long-press the reload button for "Empty cache and hard reload"
• Dark mode - Settings → Preferences → Theme. Save your eyes.

Local Overrides

This feature is incredibly useful and few people know about it. In Sources, you can set up a local folder for overrides. Any file you edit in DevTools gets saved there and persists across page loads.

Use cases:

• Testing CSS changes without a build step
• Debugging production sites where you can't modify the code
• Trying out fixes before committing them

The Meta-Tip

DevTools has way more than what's covered here. When you hit a problem, before Googling, spend 30 seconds exploring the relevant DevTools panel. There might be a button or context menu option that does exactly what you need.

Google keeps adding features, and the official docs are actually good. Worth a periodic re-read to see what's new.