A hero's guide to developing with Chrome Dev Tools
summary
Shows how a tiny Chrome extension (manifest.json + one vanilla JS file) injects UI buttons and functions into a Cordova React driver app to speed debugging and fix a production-only bug. Uses Chrome DevTools (Console, Sources file-system mapping, Network) to run injected queries against an in-page fake DB, copy JSON, render tables/charts and add a “force finish tours” API call that actually completes stuck tours. Uses one extension for two front-ends on the same domain; code is versioned and reusable.
AI-written summary · about
chapters (9)
- 0:00Start
- 2:00Driver App
- 5:09The Evil Bug
- 5:54Check that Things Are in Order
- 13:42Superpowers
- 13:53Superspeed
- 15:27Super Vision
- 20:26Super Strength
- 27:24Metronome Booth
related talks
33mChrome DevTools, From Prototype to Production
26m"Build Your Own Devtools"
33mTooling For The Modern WebApp Developer
43mModern web debugging with devtools
20mGoing steady with the Chrome Dev Tools
48mUsing Chrome Developer Tools
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
35mOptimise your Web Development Workflow