Using Chrome Developer Tools
summary
Shows how to open and use Chrome DevTools with concrete tricks: keyboard shortcuts and right‑click Inspect, editing HTML/CSS live and saving changes via Overrides, using the $0 shortcut to reference the clicked element in the console, pretty‑print minified JS, set breakpoints and view scope, run persistent Snippets, inspect network requests with replay XHR and Preserve Log, record user actions and export Recorder JSON or Recorder → Cypress export, generate HAR files for bug reports, and run Lighthouse audits and accessibility/vision emulations.
AI-written summary · about
chapters (14)
- 0:00Introduction to DevTools
- 1:53Opening DevTools
- 3:40HTML inspection and editing
- 8:19CSS debugging techniques
- 16:32JavaScript debugging
- 22:50Network requests analysis
- 30:11Working with local files
- 33:11Recording browser actions
- 35:17Performance audits
- 37:01Accessibility checks
- 40:11Managing cookies and storage
- 41:56Advanced search features
- 43:18Generating HAR files
- 45:27Q&A
related talks
50mChrome Developer Tools Deep Dive
20mGoing steady with the Chrome Dev Tools
43mWork Smarter, not Harder with Chrome DevTools
32mChrome Dev Tools. New & Tips
37mAll tooled up and nowhere to go?
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
52mDeveloper Tools That Shouldn't Be Secrets