Debug Angular Application using "Debugger for crome" plugin

The debugging the Angular application is bit difficult using the browsers developer tools because most of the time the our application code is minified and source map is disabled.

We can debug our application using the browser developer tools but when we want to debug our unit testing code its not easy using developer tools debugging options.

The visual studio code has multiple plugins available to solve our problems.

The Debugger for Crome plugin is one of the best tool for debugging the angular code in visual studio code.

1. How to install "Debugger for Crome" plugin.

open visual studio code and click on Extensions on left side bar or click (Ctrl+Shift+X)
and select "Debugger for Crome" and click on install

Once installed add breakpoints by clicking on left side of the line as shown below

open the debug mode using the debug gear icon from left side bar  and the below configuration to launch.json file

{

"name": "ng serve",

"type": "chrome",

"request": "launch",

"url": "http://localhost:4200/#",

"webRoot": "${workspaceFolder}",

"sourceMapPathOverrides": {

"webpack:/./*": "${webRoot}/*",

"webpack:/src/*": "${webRoot}/src/*",

"webpack:/*": "*",

"webpack:/./~/*": "${webRoot}/node_modules/*"

}

},

{

"name": "ng test",

"type": "chrome",

"request": "launch",

"url": "http://localhost:9876/debug.html",

"webRoot": "${workspaceFolder}"

},

then click F5 to start debugging.

The control will stop at your breakpoints and you can do all stuffs  like watch the variable values

next steps will be continued soon...................

Please drop comments if you face any issues