Angular BatScanner

on YouTube ↗17m

" summary

Angular BatScanner hooks into Angular's compile meta resolver to auto-instrument component lifecycle hooks and record change‑detection events, revealing the top‑to‑bottom then back‑to‑top check order. It builds a flame‑chart style stack of component checks, uses hooks into CompilerMetaResolver and a Chrome extension with rAF/idle scheduling to capture events without blocking digest, requires two small bootstrap injections to export traces, currently approximates per‑component timing and needs better aggregation and precise child‑check timing.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and motivation
2. 3:44Introducing Angular BatScanner
3. 7:22How BatScanner hooks into Angular
4. 10:17Building the Chrome DevTool extension
5. 13:09Limitations and future improvements
6. 16:03Conclusion and Q&A

" related talks

• 02mAngular DevToolsMinko Gechev · Google I/O 2021
• 21mMad Science with the Angular CompilerMinko Gechev · AngularUP 2017
• 32mDeep Dive into the Angular CompilerAlex Rickabaugh · AngularConnect 2019
• 15mToolingBrian Ford · ng-europe 2014
• 29mApprehending Your App with AuguryShmuela Jacobs · NG-NL 2017
• 32mAngular as strategy for collaboration and scaleBrad Green · ngAtlanta Conf 2018
• 18mMad science with the Angular CompilerMinko Gechev · ng-conf 2017
• 28mAccelerating AngularSimona Cotin · JSDayIE 2023