How to debug angular applications efficiently? Part — II
As we saw in the previous article, there are certain APIs exposed from Angular to debug the application efficiently. Let’s dissect the APIs in detail,
ng.getComponent
On calling the above method will retrieve the component instance where we can access all the properties and methods related to the component. This method requires input as a dom element.
usage: ng.getComponent(document.querySelector(“Your element selector”));
We can change the component properties and methods as per our wish and trigger the change detection to validate whether the component is working as expected with the updated data.
Come let’s change some properties and methods,
Here we updated the title property and getDemoCompAData of DemoAComponent and triggering change detection (ng.applyChanges) for the component to update the dom accordingly. And the newly modified method is available under different script window which makes debugging the functionality easier for further investigation and it avoids developer tools crash due to reversing a huge minified code base with source maps or doing a pretty print.
For developer tools crash or unresponsive scenario, Instead of debugging with bundled files, We can directly query the component, and replacing the code will be helpful because the newly replaced code will be loaded under different script window which allows debugging well.
As mentioned, We can change all the methods, properties, event handlers, and injected instances of a component so we can validate the issues with updated fixes in the developer console itself.
