Could anyone point out how to debug angular 2 source code typescript files in chrome. webpack serve the typescript files of the angular project (files contained inside the "src" folder in an angular project)
but does not serve the typescript files of angular source code.
May be this will help. You cant directly add your break point in to any import statement. But there is an alternative.
Step 1: In your project integrated terminal ng s or ng serve to serve your Angular app.
Step 2: Open Chrome dev tools. Select webpack from the hierarchy.
Step 3: Make sure yo select dot(.) from web pack
Step 4: Say for instance if you want to see what is happening with router. You add a break point and you need to select "Step In" . Please see screenshot below .
Step 5: Screenshot with comments. This will take you to relevant library and you can add your breakpoint there too.!! ( Hope this step is the one you are looking for)
Hint: You can play around with "Step In and Step out" to get more insights.
Hope this is helpful.
I 'm using angular 8 and I haven't set any special configuration during development you can use chrome developer sources panel, in case you want to look for ng-if directive I will look for @angular/common module ,so press Ctrl + P and enter common.js then you can found the class related to ng-if (NgIf).
look for the class related to the directive NgIf and now you can set a breakpoint
you can easily know they exist module for any angualr core library by check the documnetion at angular.io and click source at the top this will take you to angular repo at github and to the file related.
Steps to debug an angular app using developer tools->
Build the application having watch enabled(ng build -w -env=test).
Now go the browser and open developer tools and goto the source tab and add project from file System.
After project is being added to the browser click ctrl+p and search for the file(webpack or typescript) which you want to debug.
After that add breakpoints as you want and refresh the application.
At the right side(in chrome) you will see the toolbar to handle breakpoints.
Thanks and happy debugging.
In our case only some source files were missing: i.e.
Sources - Page tab in the node webpack://./src/somedir/The reason in our case was, that those files belonged to a lazy loaded module.
An indication for lazy loading is that webpack shows a node like this:
After we navigated to the component in our application (when the module was actually loaded), the files showed up and CTRL-P could also find them.
To have the files immediately available we can use Workspaces.
i.e. go to the Sources - Filesystem tab and select your source folder.
Another advantage of this is that you can now edit your file in chrome and when you save it, the changes are really saved to the source file on disk.
When you still have the angular serve process running, it will notice the changes and rebuild your app.
One warning when you use this feature:
make sure that the workspace points to the correct location: i.e. we sometimes have different branches of the source checked-out and when you point to the wrong one, it can cause confusion because your changes in dev-tools don't show up in the expected source files that your IDE shows.
I find it very helpful to debug Angular apps using Angular Augury chrome extension.
