A lot of times I find myself trying to do some debugging in Angular, in this post I will share with you some of the most useful techniques I use to make this a more easy task.
The info method
This is a super simple one. In your component create an info() method that will be triggered by a button in the html.
You can see a full example here:
https://stackblitz.com/edit/angular-ivy-mxyvj6?embed=1&file=src/app/app.component.ts
The technique is rudimentary but it is good enough, you can check the state of your component at any point.
Breakpoints + debugger;
This is my recommended way to go. As a developer you need to have tools for debugging and if you are a front dev you need to know how to use your browser developer tools.
Most of the time you know where the bug could be, but if you dont you need to find the first part of the code that could be related to the bug and add a breakpoint there.
In your code, instead of using console.log(variable) use debugger;
debugger; // put this BEFORE the buggy code
const myVariable = 'some';
// ... more code e.g. a for loop with a bug
Open your browser and refresh the page. If all went ok you should see the developer tools oppened. just there. Now add some breakpoints to start debugging.
The ng.probe (ng global variable)
Thanks to the video below I found this other way to debug:
Angular exposes the ng global variable at a window level.
There are some usful methods that you can use by passing an HTML Element.
Some of the methods are:
- ng.getComponent
- ng.getDirectives
- ng.getListeners
- ng.applyChanges
- ng.getOwningComponent
- ng.getContext
- ng.getRootComponents
- ng.getInjector
// example
// Get more info of hat $0 means -> https://developers.google.com/web/tools/chrome-devtools/console/utilities#dom
let component = ng.getComponent($0);
console.log(component);
component.someVal = 5;
ng.applyChanges($0) // will apply the changes