DevTools Useful Tricks
summary
Shows concrete DevTools moves: use $0 and $_ to grab the selected element and last evaluation, wrap it with angular.element and call scope and $apply so console edits actually update the page, use Batarang or pretty print to inspect Angular functions, use monitor and debug to log calls and break with argument values, use monitorEvents to see that touchend often fires before click, and blackbox scripts to step over Angular internals so the debugger stays in app code.
AI-written summary · about
chapters (9)
- 0:00Introduction to dev tools
- 1:23Data and DOM inspection
- 5:24DOM and scope manipulation
- 8:29Applying changes and tools
- 10:34Advanced debugging techniques
- 14:16Monitoring events
- 18:39Event listeners and global
- 20:50Black boxing scripts
- 23:15Conclusion and resources
related talks
50mChrome Developer Tools Deep Dive
52mDeveloper Tools That Shouldn't Be Secrets
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
48mUsing Chrome Developer Tools
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
53mBeyond console.log
33mEssential JavaScript debugging tools for the modern detective
37mAll tooled up and nowhere to go?