DEBUGGING ANGULAR
I’ve been using console logs for the longest time and it requires me to save code, reload the app, re-click the same button in order to observe the output. Finally put in some time to learn about the chrome dev tool properly, and also how to apply them on an angular built!
- How to see your codes flowing in sequence
go into source tab of dev tools
add breakpoints by clicking on the line or
add debugger statements in script itself or
use event listeners in dev tools to stop at any mouse clicks or inputs
2. Using console, but not just for console.log
console.time
console.timeEnd
console.assert
console.count
$_ will refer to every element you’ve clicked on browser
$0, $1 will refer the element you’ve clicked on by index as a stack. i.e. 0 is the last clicked
3. Angular specific tricks
add debugger word in typescript files to not get minified compiled stuff (sourecmap must be true in compiler options of tsconfig.json)
use the json pipe
ngprobe($0), you can even trigger the event like this ng.probe($0).triggerEventHandler(‘click’);
or string it with parent to find other info ng.probe(span).parent.nativeElement === h1;
or string it with componentInstance to reassign some of its variables ng.probe($0).componentInstance.name; // ‘C’
REMEMBER!!! to do change detection as its not done automatically now
ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()
in ngFor, you find out the info held by it, use context ng.probe($0).context

ng.profiler.timeChangeDetection({record: true})

Angury tool — very cool !!!! https://augury.angular.io/
Rxjs DO operator or TAP operator


