Chrome DevTools ​

Notes ​

• $_ holds the previous result in the console. So you can do $_.something(..) to access the returned object items.
• In DevTools hold shift while hovering over a request and it will highlight the initiator in green and dependencies in red
• Pressing Ctrl + Space in Dev Tools Network filter search will give useful filters for requests. In Console it will give autosuggestions.
• Can use Chrome DevTools in iOS Safari 15 via the JSBox app
• Chrome Dev Tools can visualize backend performance with Server Timing
• Can add custom headers to requests in the Network tab. Right-click the columns bar > Response Headers > Manage Header Columns.
• ChromeDevTools has CSS Shadow Editor
• ChromeDevTools has CSS Animations inspector
• Can hide scripts/assets loaded by extensions from your network tab, put "-scheme:chrome-extension" in the filter input box
• You can dynamically insert console.logs without touching your code. Just right-click on the line and choose "logpoint", enter the variables you want to log and hit Enter.
• Holding the shift key while hovering over a request on Chrome DevTools will highlight the initiator in green and dependencies in red.
• To avoid seeing errors from extensions in Chrome DevTools, check 'Selected context only'
• See which CSS props has no visual effects and understand why is that so

Links ​

• What's new in Chrome DevTools (Google I/O '18)
• Chrome DevTools Masterclass (2016)
• chromedp - Faster, simpler way to drive browsers supporting the Chrome DevTools Protocol. (Examples)
• Chrome DevTools Protocol
• Make your own DevTools
• Rod - High-level Chrome Devtools controller directly based on Chrome DevTools Protocol.
• Chrome DevTools UI
• DevTools tips (2020)
• Hidden Features of Chrome DevTools (2020)
• How to Debug JavaScript Apps with Chrome DevTools (2020)
• Emulate vision deficiencies in DevTools (2020)
• Awesome Chrome DevTools
• Introduction to Dev Tools
• Abusing the Chromium Devtools Scope Pane (2021) (HN)
• How to debug event listeners with your browser's developer tools (2021)
• Chrome DevTools Protocol Docs
• Wayang - High-level Devtools driver directly based on DevTools Protocol.
• chobitsu - Chrome devtools protocol JavaScript implementation.
• DevTools Tips - Collection of useful cross-browser DevTools tips. (Code) (HN)
• Replay - Library that provides an API to replay and stringify recordings created using Chrome DevTools Recorder.
• Detecting memory leaks in chrome dev tools
• Puppeteer Heap Snapshot - API and CLI tool to fetch and query Chrome DevTools heap snapshots.
• Chrome DevTools Protocol Proxy - Intelligent proxy for debugging purposes.
• Investigate Animation Performance with DevTools (2019)
• Can I DevTools? (Code)
• basic-devtools - Exports $, $$, and $x utilities as described in Chrome Console Utilities API reference.
• Chii - Remote debugging tool like weinre, replacing web inspector with the latest chrome devtools front end.
• devtools-perf-features - Chrome DevTools’ little known features for perf debugging.
• Chrome DevTools > Lighthouse visualizes what's in the JavaScript you ship with a Treemap
• Useful DevTools Tips and Tricks (2023)