Chrome DevTools Skill

Expert guidance for Chrome DevTools - the comprehensive suite of web development and debugging tools built into Chrome.

When to Use This Skill

This skill should be triggered when:

• Debugging JavaScript code with breakpoints and stepping

• Inspecting and modifying CSS styles and layouts

• Analyzing network requests and responses

• Profiling performance and identifying bottlenecks

• Working with browser storage (cookies, localStorage, sessionStorage)

• Inspecting DOM elements and their properties

• Using the Console API for logging and debugging

• Testing responsive designs and mobile viewports

• Debugging animations and transitions

• Working with Progressive Web Apps (PWAs)

• Using Chrome DevTools Protocol or automation

• Emulating device sensors (geolocation, orientation)

• Analyzing JavaScript heap and memory usage

Quick Reference

JavaScript Debugging

Setting Breakpoints and Inspecting Variables

// Set breakpoints in DevTools Sources panel // Inspect variable values in the Scope pane function updateLabel() { var addend1 = getNumber1(); var addend2 = getNumber2(); var sum = addend1 + addend2; // Set breakpoint here (line 32) label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; }

Console API

Basic Logging and Assertions

// Log messages at different levels console.log('Informational message'); console.warn('Warning message'); console.error('Error message'); console.debug('Debug message');

// Assertions const x = 5, y = 3; console.assert(x < y, {x, y, reason: 'x should be less than y'});

Grouping and Tables

// Group related logs console.group('User Details'); console.info('Name: John'); console.info('Age: 30'); console.groupEnd();

// Display data as table const users = [ { first: 'John', last: 'Doe', age: 30 }, { first: 'Jane', last: 'Smith', age: 25 } ]; console.table(users);

Timing and Tracing

// Measure execution time console.time('loop'); for (let i = 0; i < 100000; i++) { let square = i ** 2; } console.timeEnd('loop');

// Print stack trace console.trace();

Console Utilities

Selecting and Inspecting Elements

// Select elements (like jQuery) $('img'); // First img element $$('img'); // All img elements

// Select with starting node let images = $$('img', document.querySelector('.header')); for (let img of images) { console.log(img.src); }

// XPath selection $x('//p'); // All <p> elements $x('//p[contains(., "text")]'); // <p> elements containing "text"

Inspecting Recently Selected Elements

// $0 = most recently selected element in Elements panel // $1 = second most recent, etc. $0.textContent; $1.className;

Monitoring Events

// Get all event listeners on an element getEventListeners(document);

// Monitor events monitorEvents(window, 'resize'); unmonitorEvents(window, 'resize');

// Debug function calls debug(myFunction); // Breaks when myFunction is called undebug(myFunction);

CSS Inspection and Debugging

Grid Layout Debugging

/* Define a grid layout */ .container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 80px 80px; grid-template-areas: "left right" "middle1 middle2"; }

/* DevTools shows:

• • Grid badge in Elements panel
• • Grid overlay with line numbers
• • Track sizes (1fr - 96.66px, 2fr - 193.32px)
• • Area names visualization */

Animation Debugging

/* Inspect animations with Animations panel */ .element { animation: slideIn 2s ease-in-out infinite; }

@keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

/* DevTools lets you:

• • Replay animations
• • Adjust speed (25%, 50%, 100%)
• • Edit timing and delays
• • Modify @keyframes live */

Network Analysis

Inspecting Request Headers

// In Network panel, click request > Headers tab // Or programmatically: fetch('https://api.example.com/data', { headers: { 'Authorization': 'Bearer token', 'Content-Type': 'application/json' } }) .then(response => { // Inspect timing in Network panel // Check response headers console.log(response.headers.get('content-type')); });

Performance Profiling

Node.js CPU Profiling

Start Node with inspector

node --inspect file-name.js

Or Deno

deno --inspect file-name.js

Profile with console API

console.profile('myProfile'); doSomething(); console.profileEnd();

Device Emulation

Responsive Testing

// Open Device Toolbar (Cmd+Shift+M / Ctrl+Shift+M) // Dimensions: Set to specific device or custom // Device Pixel Ratio: Simulate HiDPI displays // User Agent: Test as mobile/desktop

// Emulate sensors programmatically // In Sensors panel: // - Geolocation: Set custom lat/long // - Orientation: alpha, beta, gamma // - Touch: Force touch events

Storage Management

Working with localStorage

// View in Application > Local Storage localStorage.setItem('user', JSON.stringify({name: 'John', id: 123})); localStorage.getItem('user'); localStorage.removeItem('user'); localStorage.clear();

// Edit values directly in DevTools UI // Filter by key/value // See storage quota usage

Cookie Management

// View/edit in Application > Cookies document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// DevTools shows: // - Name, Value, Domain, Path // - Expiration, Size, HttpOnly, Secure // - SameSite attribute // - Third-party cookie warnings

Live Expressions

Monitor Values in Real-Time

// Create live expression in Console // Updates every 250ms

// Track focused element document.activeElement

// Monitor scroll position window.scrollY

// Watch variable type typeof myVariable

Progressive Web Apps

Service Worker Debugging

// Register service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered', reg)) .catch(err => console.log('SW error', err)); }

// Debug in Application > Service Workers // - View lifecycle (install, wait, activate) // - Update on reload // - Bypass for network // - Unregister service workers

Key Concepts

Breakpoints

Pause code execution to inspect state. Types include:

• Line-of-code: Pause at specific line

• Conditional: Pause only when condition is true

• Event listener: Pause when event fires (click, keydown, etc.)

• XHR/Fetch: Pause on network requests

• Exception: Pause on caught/uncaught errors

• DOM: Pause on element modifications

Stepping Through Code

• Step into (F11): Enter function calls

• Step over (F10): Execute current line, skip function internals

• Step out (Shift+F11): Exit current function

• Continue (F8): Resume until next breakpoint

Scope and Closures

The Scope pane shows:

• Local: Variables in current function

• Closure: Variables from outer scopes

• Global: Window/global variables

• Script: Module-level variables

Device Pixel Ratio (DPR)

Ratio between physical pixels and CSS pixels. Important for HiDPI displays:

• Standard: 1x

• Retina: 2x or 3x

• Affects image quality and CSS rendering

Color Spaces

DevTools supports both standard and HD color spaces:

• Standard: RGB, HSL, HWB, Hex

• HD: Display P3, Rec2020, Lab, LCH, OKLab, OKLCH

• Use Color Picker to convert between spaces

Cache Storage

Service worker cache for offline functionality:

• Uses Cache API

• Read-only in DevTools

• Opaque responses consume ~7MB minimum (quota padding)

• Clear via Application > Clear Storage

Reference Files

This skill includes comprehensive documentation in references/ :

• ai.md - AI assistance panel, Gemini integration, prompt handling

• application.md - Storage inspection (cookies, localStorage), PWA debugging, service workers

• console.md - Console API reference, utilities, debugging JavaScript

• device.md - Device emulation, sensors (geolocation, orientation), responsive design

• elements.md - DOM inspection, CSS debugging, animations, grid/flexbox layouts, color picker

• getting_started.md - Basic debugging workflow, breakpoints, stepping through code

• network.md - Network analysis, request inspection, timing, headers

• other.md - Additional DevTools features and utilities

• performance.md - CPU profiling, performance analysis, Node.js debugging

• recorder.md - User flow recording and replay

• rendering.md - Rendering performance, paint flashing, layer inspection

• security.md - Security issues, HTTPS, mixed content, certificates

• sources.md - Sources panel, code editor, workspace, snippets

Working with This Skill

For Beginners

Start with:

• getting_started.md - Learn basic debugging workflow

• console.md - Master console logging and utilities

• elements.md - Understand DOM and CSS inspection

For Intermediate Users

Focus on:

• network.md - Analyze network performance

• performance.md - Profile CPU and memory

• application.md - Debug storage and PWAs

• device.md - Test responsive designs

For Advanced Users

Explore:

• sources.md - Advanced debugging techniques

• rendering.md - Optimize rendering performance

• ai.md - Use AI assistance for debugging

• security.md - Identify security vulnerabilities

Navigation Tips

• Use Cmd+P (Mac) / Ctrl+P (Windows) to quickly open files in Sources

• Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows) opens Command Menu

• Cmd+Shift+C (Mac) / Ctrl+Shift+C (Windows) activates element inspector

• F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows) toggles DevTools

Common Workflows

Debug a JavaScript Error

• Open Console to see error message and stack trace

• Click file link to jump to Sources panel

• Set breakpoint near error location

• Reload page to trigger breakpoint

• Use Scope pane to inspect variable values

• Step through code to find root cause

Fix CSS Layout Issues

• Right-click element > Inspect

• Check Computed tab for final styles

• Use Grid/Flexbox badges to visualize layout

• Edit styles live in Styles pane

• Use Color Picker for color adjustments

• Check Animations panel for animation issues

Optimize Network Performance

• Open Network panel and reload page

• Filter by resource type (JS, CSS, Images)

• Check Waterfall for timing issues

• Inspect large resources

• Enable throttling to test slow connections

• Use Coverage tab to find unused code

Test Mobile Experience

• Open Device Toolbar (Cmd+Shift+M)

• Select device or set custom dimensions

• Test touch events

• Emulate geolocation in Sensors panel

• Test orientation changes

• Capture screenshots for documentation

Resources

Official Documentation

• Chrome DevTools Docs: https://developer.chrome.com/docs/devtools/

• DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/

Quick Tips

• Double-click to edit most values in DevTools

• Right-click almost anywhere for context menus

• Use $ and $$ as shortcuts for querySelector

• Copy values with copy() function in Console

• Clear Console with Ctrl+L or console.clear()

Notes

• This skill was automatically generated from official Chrome DevTools documentation

• Reference files preserve structure and examples from source docs

• Code examples include language detection for syntax highlighting

• Quick reference patterns are extracted from real-world usage

Updating

To refresh this skill with updated documentation:

• Re-run the scraper with the same configuration

• Review and enhance the Quick Reference section

• Update any changed APIs or features