You know this one. But here is what you might not know:

• •Cmd/Ctrl + Shift + J -- opens directly to the Console
• •Cmd/Ctrl + Shift + C -- opens DevTools AND activates the element inspector. This is the fastest way to inspect a specific element.

Switches to mobile/responsive view. Stop dragging the browser window to test responsive designs.

After inspecting an element, $0 in the console refers to that element. So instead of writing document.querySelector('.some-complex-selector'), just click the element in the Elements panel and type $0 in the console.

$1 is the previously selected element, $2 the one before that, and so on up to $4.

• •$('selector') is equivalent to document.querySelector()
• •$$('selector') is equivalent to document.querySelectorAll() but returns an actual array instead of a NodeList

These save a surprising amount of typing over a day of debugging.

copy($0) copies the selected element's outer HTML. copy(someObject) copies a JavaScript object as JSON. This is incredibly useful for grabbing data from the page.

You probably know console.log(). But console.table() displays arrays and objects as sortable tables. When debugging an array of objects, this is vastly more readable than the default tree view.

Prints a stack trace at the point where it is called. When you are trying to figure out which function called which, this is faster than setting breakpoints.

Wrap code in console.time('label') and console.timeEnd('label') to measure execution time. More precise and less messy than Date.now() subtraction.

Select any element in the Elements panel and press F2 to edit its HTML directly. No need to right-click and find the edit option.

Select an element and press H to toggle its visibility. This adds visibility: hidden without deleting the element, so the layout does not shift. Perfect for checking what is behind overlapping elements.

You can drag elements in the Elements panel to reorder them in the DOM. Useful for quickly testing layout changes.

Right-click an element and choose "Force state" to simulate :hover, :active, :focus, or :visited states. No more trying to hover over an element while also looking at the Styles panel.

The Computed tab shows the final calculated values for every CSS property. When you cannot figure out why a style is not applying, this tells you exactly what the browser is actually using and where it came from.

Click the filter buttons (XHR, JS, CSS, Img, etc.) to show only specific request types. When debugging API issues, click "Fetch/XHR" to see only API calls without the noise.

Opens a search bar that searches across all request URLs, headers, and response bodies. When you need to find which API call returned a specific piece of data, this is invaluable.

Right-click any request and choose "Copy as cURL." You get a complete curl command with all headers, cookies, and body data. Paste it into your terminal to replay the exact request. This is the fastest way to debug API issues outside the browser.

Right-click a request and choose "Block request URL" to see how your app behaves when that resource fails to load. Great for testing error handling and fallbacks.

Use the throttle dropdown (next to "No throttling") to simulate slow connections. Test how your app loads on 3G or offline. Most developers only test on fast connections, which hides real performance problems.

Click any line number in the Sources panel to set a breakpoint. The code will pause execution at that line so you can inspect variables.

Right-click a line number and choose "Add conditional breakpoint." The breakpoint only triggers when your condition is true. For example, user.id === 42 -- so you do not have to step through thousands of iterations in a loop.

Like a breakpoint, but instead of pausing, it logs a message to the console. You get the power of console.log without modifying your code. This is game-changing for debugging production issues.

• •F10 -- Step over (execute current line, move to next)
• •F11 -- Step into (enter the function being called)
• •Shift + F11 -- Step out (finish current function, return to caller)
• •F8 -- Resume (continue to next breakpoint)

In the Sources panel sidebar, add watch expressions to monitor variable values as you step through code. Better than constantly hovering over variables.

Go to the Lighthouse tab and run an audit. It gives you actionable performance, accessibility, and SEO recommendations. Most developers forget this exists and use the website version instead, but the DevTools version is faster and more reliable.

Shows real-time CPU usage, JS heap size, DOM node count, and more. When your app is sluggish, this tells you what resource is being exhausted.

Shows how much of your CSS and JavaScript is actually being used on the current page. Red lines are unused code. This is how you identify dead code and reduce bundle size.

This is the equivalent of VS Code's command palette, but for DevTools. You can:

• •Switch between panels
• •Take screenshots (type "screenshot" -- it can capture the full page, a specific node, or just the viewport)
• •Toggle features like dark mode, paint flashing, and layout shift regions
• •Access features that have no visible button in the UI

Full page screenshot is particularly useful -- type "Capture full size screenshot" to get a screenshot of the entire scrollable page, not just the visible viewport.

In the Network and Console tabs, check "Preserve log" to keep entries across page navigations. Without this, everything disappears when you navigate, which makes debugging multi-page flows impossible.

In the Network tab, check "Disable cache" while DevTools is open. This ensures you always see fresh resources during development instead of stale cached versions.

In Settings > Sources, make sure source maps are enabled. This lets you debug your original TypeScript/SCSS code instead of the minified/compiled output.