| title | Chrome DevTools |
|---|
$_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
- 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?
- basic-devtools - Exports
$,$$, and$xutilities as described in Chrome Console Utilities API reference.