Chrome Developer Tools Deep Dive
summary
Shows exact DevTools tricks that save real time: use Ctrl+P file open and Cmd/Ctrl+Shift+O function jump to find code fast, edit JS in Sources and press Save to persist or right‑click Local Modifications to export, and fix a broken setTimeout live. Console techniques include %c styled console, console.count, console.group, console.table(columns), and console.time/timeEnd. Use Force Element State and the color picker, blackbox library scripts, network throttling (including 2G profile), screenshots in Performance, and export HAR for offline HAR Analyzer.
AI-written summary · about
chapters (14)
- 0:00Intro
- 3:55Inspect
- 6:41Styles
- 10:53Debugging
- 13:21Setting a breakpoint
- 17:08Object object
- 18:01Console object
- 21:09Grouping
- 23:04Console
- 27:53Sources
- 30:41Content editable
- 35:55Settings
- 41:05Emulator
- 46:45Analyzer
related talks
48mUsing Chrome Developer Tools
20mGoing steady with the Chrome Dev Tools
37mAll tooled up and nowhere to go?
52mDeveloper Tools That Shouldn't Be Secrets
33mEssential JavaScript debugging tools for the modern detective
29mEssential JavaScript debugging tools for the modern detective
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
35mOptimise your Web Development Workflow