🛠️Developer

Browser DevTools Features You're Probably Not Using

Beyond Inspect Element. The DevTools capabilities that save hours of debugging — network throttling, performance profiling, console API tricks, and CSS debugging.

7 min readFebruary 18, 2026By FreeToolKit TeamFree to read

Most developers use about 20% of browser DevTools. The other 80% includes features that would save significant debugging time. Here's what's worth learning.

Network Tab: More Than Just Watching Requests

Right-click any request → 'Copy as cURL': paste directly in terminal to replay the request, including all headers and auth. The fastest way to reproduce API calls outside the browser.
Filter bar: filter by type (XHR/Fetch for API calls), domain, or request content. Click 'XHR' to hide all the noise from images and scripts.
Waterfall view: visualizes when each resource starts loading and how long it takes. Long bars before a request starts = DNS lookup or queuing. Long bars in initial connection = TTFB issue.
Preserve log: keeps request history across page navigations. Essential for debugging redirects.
Disable cache checkbox: ensures you always load fresh resources during development.

Console API Tricks

console.group() / console.groupCollapsed(): organize logs into collapsible groups. Invaluable for debugging complex state in loops.
console.time() / console.timeEnd('label'): measure execution time with a named label. console.time('fetch'); await fetch(...); console.timeEnd('fetch');
console.count('label'): counts how many times a code path is hit.
$0 in the console: refers to the element currently selected in the Elements panel. $1 is the previous selection. Select an element, then manipulate it in the console.
$$ is document.querySelectorAll in the console context. $$('.btn') returns all buttons.

Performance Tab: Find What's Making Your Page Slow

Hit Record, interact with your page, stop recording. The flame chart shows every function call over time — width = time spent. Long tasks (shown in red) are candidates for optimization. The Main thread flame chart shows JavaScript execution; look for functions that take >16ms (one frame at 60fps). The Rendering section shows paint and layout events — frequent layout reflows are a common performance problem.

Application Tab: Debug Storage

Storage: view and modify localStorage, sessionStorage, cookies, and IndexedDB. Edit values directly in the UI.
Service Workers: view registered service workers, see cached resources, force update.
Manifest: check PWA manifest parsing and installability.
Clear site data: wipe all storage, cache, and service workers in one click — useful before testing fresh-install experiences.

CSS Debugging Without Guessing

Elements tab → select element → in Styles, click any property value to edit it live. Changes appear immediately. Toggle checkboxes to disable specific properties. Add new properties by clicking at the end of any rule block. The Force State dropdown (:hover, :focus, :active) applies pseudo-states without needing to physically hover — essential for debugging hover styles.

Frequently Asked Questions

What's the fastest way to find which CSS rule is overriding another?+

In DevTools Styles panel, computed properties show crossed-out styles that are being overridden. Click a computed property to jump to the winning rule. The Styles panel shows all rules that apply to a selected element in specificity order — lower rules win over higher ones. The Filter input at the top of Styles searches across all rules. For complex specificity battles, the Computed tab shows the final resolved values with a link to the source rule.

How do I test what my site looks like on a slow connection?+

Network tab → Throttling dropdown → select 'Slow 3G', 'Fast 3G', or create a custom profile. This throttles all network requests to simulate the selected connection speed. Useful for seeing LCP and TTFB on real-world connections, not just your fast broadband. Go one step further: Performance tab → CPU throttling (6x slowdown) simulates a mid-range Android device's processing power.

What does console.table() do and when is it useful?+

console.table() renders an array of objects as a table in the console — column headers are property names, rows are array items. console.table(users) where users is [{id:1, name:'Alice'}, {id:2, name:'Bob'}] renders a clean table view instead of collapsed array objects. Dramatically faster to scan than expanding each object individually. console.table(data, ['name', 'email']) shows only specified columns.

How do I debug JavaScript that runs too fast to step through?+

Three approaches: (1) Add debugger; statement in your code — execution pauses when DevTools is open. (2) Sources tab → click the line number to set a breakpoint. (3) Right-click a DOM element → 'Break on' → attribute modifications, node removal, or subtree modifications — pauses execution when that specific DOM change happens. The DOM breakpoints are especially useful for debugging state changes in frameworks where you're not sure which event triggered a particular DOM update.

🔧 Free Tools Used in This Guide

Regex Tester Css Minifier Json Formatter

FreeToolKit Team

We build free browser-based tools and write practical guides without the fluff.

Tags:

devtoolsdeveloperchromedebugging

Continue Reading

🔢

HTTP Status Codes: The Ones That Actually Matter

7 min read

⚡

Why Website Speed Matters More Than You Think (For SEO)

8 min read