How to debug angular applications efficiently? Part — I
Debugging a bundled javascript application is a nightmare for all of us and it is applicable to angular as well.
Once the application is staged to silos, source maps would not be available in some cases and this will leads to stepping through unnecessary minified source codes. It would make debugging a bit harder.
Even if the source maps are available, Pretifying or reconstructing the base source with source maps will result in dev tools unresponsive if the bundle size is very huge.
And here is the rescue from Angular!!!
Angular provides powerful debugging tools which we can utilize and figure out most of the issues. These tools not only help in the aforementioned cases but also help us to debug the issues very quickly and effectively by providing certain APIs.
All the debug methods are residing under ng global object. I hope the debug method names itself self-descriptive anyhow we will explore it one by one in the upcoming articles.
Note: Angular debug tools only available with dev build configuration but the renderer should be ivy. it doesn’t matter whether it is an AOT or JIT build. it works pretty well even without source maps.
Usually, we face issues when integrating various modules or applications from different teams into common silos like Dev, QA, Staging etc. Deploying dev builds into dev servers would be a good choice to get the benefits of angular debug tools instead of deploying release builds.
How to debug angular applications efficiently? Part — IV
ng.getOwningComponent
rchss-nathan.medium.com
References: Browser debug tools crash issue — https://bugs.chromium.org/p/chromium/issues/detail?id=751763
