How to debug
Step 1
To debug the application we must have the project configured. Check that the following lines of code exist in the angular.json file.
{
"projects": {
"samples": {
"architect": {
"build": {
"configurations": {
---------------------------------------
"debug": {
"sourceMap": {
"vendor": true,
"scripts": true
},
"optimization": false,
"outputHashing": "all",
"namedChunks": false,
"aot": false,
"extractLicenses": false,
"vendorChunk": false,
"buildOptimizer": false
}
---------------------------------------
}
},
"serve": {
"configurations": {
"production": {
"browserTarget": "samples:build:production"
},
---------------------------------------------
"debug": {
"browserTarget": "samples:build:debug"
}
---------------------------------------------
}
}
}
}
}
}Also verify that you have the following scripts in the package.json file.
{
"scripts": {
"start": "ng serve",
"debug": "ng build -c debug"
},
}Step 2
Now simply run the command "npm run start", this starts a local development server for your application. You should see an application similar to this:
Step 3
To debug the application you need to open DevTools, to do this just press the key combination "Ctrl + Shift + C", you should be seeing something like this:
Step 4
Finally, just go to the Sources Panel. If you press the key combination "Ctrl + P" you can open the file you want to debug.
You can now add breakpoints in your files and debug the application.
Last updated
Was this helpful?