Chrome DevTools: The Complete Guide

Chrome DevTools is the most powerful tool in a web developer’s arsenal. Here’s how to use every major panel.

Opening DevTools

Elements Panel

Inspect and edit HTML and CSS in real time.

/* Click an element → Styles tab shows computed styles */
/* Check/uncheck properties to test changes before committing */

/* Force state on an element */
:hover, :focus, :active, :visited

/* Change pixel values by clicking and dragging up/down */
/* Hold Shift to change by 10, Ctrl to change by 100 */

Pro tip: Right-click an element → Copy → JS Path to get a unique selector for testing.

Console Panel

// Logging
console.log('Debug message');
console.warn('Warning message');
console.error('Error message');

// Formatting
console.log('Name: %s, Age: %d', 'Alice', 30);
console.table([{name: 'Alice'}, {name: 'Bob'}]);
console.time('operation');
// ... code ...
console.timeEnd('operation');

// DOM inspection
console.log($('.selector'));       // first match (jQuery-like)
console.log($$('a'));              // all matches
console.dir(element);              // show as JS object

Network Panel

Debug requests, responses, and performance.

• Filter by type — XHR, JS, CSS, Img, Font, Doc
• Block requests — Right-click → Block request URL (test without a dependency)
• Throttling — Simulate Slow 3G, Fast 3G, or offline
• Preserve log — Keep requests across page reloads
• Disable cache — Force fresh requests while DevTools is open

Pro tip: The Initiator column shows what triggered each request — great for finding unexpected API calls.

Sources Panel

Debug JavaScript with breakpoints.

• Breakpoint types:
  • Line breakpoint — pause on a specific line
  • Conditional breakpoint — pause only when a condition is true
  • DOM breakpoint — pause when an element is modified
  • Event listener breakpoint — pause on click, scroll, etc.
• Step through code: Step over, step into, step out
• Watch expressions: Track variable values in real time
• Scope panel: View local, closure, and global variables

Performance Panel

Record and analyze runtime performance.

1. Click Record (circle button)
2. Perform the action you want to measure
3. Stop recording

Look for:

• Long yellow bars (script execution)
• Red triangles (forced reflows/layout thrashing)
• FPS counter (frames per second below 30 indicates jank)

Application Panel

Inspect storage and application data:

• Local Storage and Session Storage — View and edit key-value pairs
• Cookies — Inspect and delete cookies
• Cache Storage — Service worker caches
• IndexedDB — Browser database
• Service Workers — Register, unregister, and debug

Pro tip: Clear site data in one click: Application → Storage → Clear site data.

Lighthouse Panel

Audit your site for performance, accessibility, SEO, and best practices:

Categories to test:
☑ Performance
☑ Accessibility
☑ Best Practices
☑ SEO
☑ Progressive Web App

Generate a report with actionable recommendations.

Rendering Panel

Enable via: Ctrl+Shift+P → type “Rendering”

• Paint flashing — Shows areas that are repainted
• Layout shift regions — Shows CLS (Cumulative Layout Shift) areas
• Frame rendering stats — FPS, GPU memory usage
• Emulate CSS media type — Test print or screen styles
• Emulate CSS prefers-color-scheme — Test dark/light mode

Related: Check our VS Code shortcuts guide and responsive design guide.