Debugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
summary
Live demos show actual debugging moves: use Chrome Canary and Command-Option-C to inspect, set a DOM breakpoint to land in the JS that adds the SJS active class, and step through event objects to see why an interaction fires. Profile with the flame chart and bottom-up grouping by domain to prove third-party scripts cost time, use request blocking to compare profiles, and enable paint flashing plus backface-visibility tweaks to reduce repaints. Console eager evaluation, local overrides, and Lighthouse throttling all behave as demonstrated.
AI-written summary · about
chapters (34)
- 0:00Start
- 1:38Firebug
- 2:41Chrome Canary
- 3:23Shortcuts
- 4:08Elements
- 4:57Copy and Paste Your Elements
- 5:43Content Editable
- 7:23Contrast Ratio
- 9:19Event Listeners
- 11:26Set a Dom Breakpoint
- 14:20Overview of Debugging Javascript for Free
- 17:28Multiple Cursors
- 18:40Edit Your Break Point
- 19:43Network Tab
- 21:15Fonts
- 21:51Http Headers
- 22:18Cookies
- 22:28Filmstrip View
- 23:06Emulate Offline Mode
- 23:43Show Third-Party Badges
- 24:00Performance Tab
- 27:37Identifying Third-Party Scripts
- 28:07Bottom Up View
- 29:09Request Blocking
- 30:52Eager Evaluation
- 33:10Mobile Evaluation
- 34:06Adjust Your Throttling
- 35:14Rendering
- 36:11Paint Flashing
- 37:53Back Face Visibility
- 38:39Css Transforms
- 40:18Application Tab
- 41:16Local Overrides
- 42:59What's the Differences in Using Chrome Paige Inspect Functions versus the Chrome Canary Itself
related talks
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
50mRocking Out with Browser-Based Developer tools
33mEssential JavaScript debugging tools for the modern detective
29mEssential JavaScript debugging tools for the modern detective
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
35mOptimise your Web Development Workflow
28mEssential JS debugging tools for the modern detective
50mChrome Developer Tools Deep Dive