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'

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)
• 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?