# Chrome DevTools Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It provides deep access to browser internals and web applications, enabling developers to inspect, debug, and optimize web pages and applications. ## Key Panels ### Elements - Inspect and modify the DOM (Document Object Model) - Edit HTML and CSS in real-time - View computed styles and box model - Debug CSS Grid and Flexbox layouts - Accessibility inspection ### Console - Execute JavaScript in the context of the page - View logged messages and errors - Interactive JavaScript REPL - Filter and search logs - Live expressions for monitoring values ### Sources - Debug JavaScript with breakpoints - Step through code execution - View and edit source files - Workspace integration for local development - Snippets for reusable code ### Network - Monitor network requests and responses - Analyze loading performance - Inspect headers, payloads, and timing - Throttle network speed for testing - Block requests for debugging - Export as HAR files ### Performance - Record and analyze runtime performance - Identify bottlenecks and jank - CPU profiling - Memory timeline - Frame rate analysis - Core Web Vitals metrics ### Memory - Heap snapshots for memory analysis - Allocation timelines - Detect memory leaks - Object retention analysis ### Application - Inspect storage (localStorage, sessionStorage, IndexedDB, cookies) - Service Workers management - Cache storage inspection - Manifest and PWA debugging - Background services ### Security - View security information - Certificate details - Mixed content warnings - Connection security status ### Lighthouse - Automated auditing for: - Performance - Accessibility - Best practices - SEO - Progressive Web App compliance ## Opening DevTools | Method | Shortcut | |--------|----------| | Open last panel | `F12` or `Ctrl+Shift+I` (Windows/Linux) / `Cmd+Option+I` (Mac) | | Open Console | `Ctrl+Shift+J` / `Cmd+Option+J` | | Open Elements (inspect) | `Ctrl+Shift+C` / `Cmd+Option+C` | | Open Command Menu | `Ctrl+Shift+P` / `Cmd+Shift+P` | ## Advanced Features ### Remote Debugging Debug pages on remote devices (Android phones, other computers) using [[Chrome DevTools Protocol (CDP)]]. ### Device Mode - Simulate mobile devices - Test responsive designs - Emulate touch events - Throttle CPU and network - Geolocation spoofing ### Workspaces Map local files to network resources for live editing with persistence. ### Coverage Identify unused CSS and JavaScript code. ### Rendering - Paint flashing - Layer borders - FPS meter - Scrolling performance issues ## Related Tools - [[Chrome DevTools Protocol (CDP)]] - The underlying protocol - [[Chrome Debug Mode]] - Running Chrome with debugging enabled - [[Puppeteer]] - Node.js library using CDP - [[Playwright]] - Cross-browser automation using CDP ## References - Official Documentation: https://developer.chrome.com/docs/devtools/ - DevTools Tips: https://devtoolstips.org/ - Chrome DevTools Blog: https://developer.chrome.com/blog/