The main reason is that debugging TS in a browser is far from optimal experience.
When setting breakpoints in a browser and following call stack I use JavaScript files, not TypeScript. I explore the sources in IDE and use debugger in a browser to reconstruct program execution flow with the help of call stack. If you are not familiar with SystemJS, you can read here to understand why it’s used. The files placed at this location will be loaded into a browser either through module loader like SystemJS or as part of a bundler like Webpack. Angular provides minified files and map files as well. For example, core module is located at node_modules/core/bundles/. Debugging source codeĪngular’s build process packages sources in UMD modules located at node_modules//bundles/.umd.js.
The content described in the article is based on the current major version 4.x.x. The second part of the article explores debugging API provided by the framework that you can access in a browser console - mostly ng.probe functionality.īefore we begin, please note that all current debugging API is marked as experimental and may change in the future versions of Angular. The first part of the article shows the approach I use when debugging source code. Unfortunately, at the moment the official documentation on debugging tools and practices in Angular is lacking so this article is aimed to provide you with the knowledge to become Angular debugging ninja ?. So it’s important to know how to leverage all the available tools. All developers when start working on an existing project debug a lot. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. “ Debugging is twice as hard as writing the code in the first place.
0 kommentar(er)
