Wednesday, December 27, 2023

How to Debug Angular code using Chrome Developer tools

To debug Angular application in Chrome, open the Developer tools.

Click on the "Sources" tab. The left panel is a tree list. The last item is "webpack://". Inside it, the second item is just a dot "." character. Click on it. You can see it has a "src" folder that contains all the source Angular code.

A better way is to use the middle panel. Put your mouse inside it and type the key Control-P. It will give a popup where you can type the name of the source file and it will show the file names underneath that match the name you typed. You can then click to select the file.

The 'Console' in the Develper tools is also very useful. It can output the log messages in the Angular components. But every time a page is navigated to a new page, the previous log messages can be cleared up. To preserve the console log, on the top right of the console output window there is the 'Console Settings' icon. Click on that. There is a checkbox for 'Preserve log'. Click on the checkbox to enable it. Now the console log messages will not be removed when the page is navigated to a new page.