Apprehending Your App with Augury

on YouTube ↗29m

" summary

Augury is a Chrome extension for Angular 2+ (demo uses Angular 4) that inspects live apps: it shows a component tree (hybrid/all/components-only), highlights change detection events, displays injector graphs and a visual router tree with lazy-load markers, and links to source with breakpoints. Live demo uses the $a debug shortcut to grab componentInstance, finds a missing (click) binding, and injects events (minutes=1000, seconds=70) to test edge cases. Extension targets large apps (hundreds–thousands of components) and is open source.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 3:23What is Augury?
3. 5:36Augury features and interface
4. 11:57Visualizing routes
5. 13:42Debugging in action
6. 24:24Community and conclusion

" related talks

• 07mMaking your life better with AuguryShmuela Jacobs · AngularUP 2016
• 02mAngular DevToolsMinko Gechev · Google I/O 2021
• 17mAngular BatScannerDouglas Duteil · ng-europe 2016
• 23mDebugging Like a Boss in Angular 9Anthony Humes · ng-conf 2020: Hardwired
• 32mangular.jsMiško Hevery · JSConf US 2011
• 31mAngular Performance: Your App at the Speed of LightChristian Liebel · NG-DE Conference 2019
• 21mMad Science with the Angular CompilerMinko Gechev · AngularUP 2017
• 21mDebugging Angular Ivy Applications - DevTools To Our Help! 💪🏼Daniel Tamir · AngularUP Experience 2020