Debugging info is enabled by default during development in Angular2.
Debugging tools need to be enabled with enableDebugTools
For production enableProdMode() should be called to get rid of debug information that slows down your application and increases code size.
For details how to access debug info from the console see how to access Angular2 component specific data in console?
https://augury.angular.io/ provides a browser Plugin with a graphical UI
Because an Angular application is built for deployment, the options need to be enabled when the application is built, otherwise it won't be included in the deployable.
Answer from Günter Zöchbauer on Stack Overflowdebugging - How to debug Angular with VSCode? - Stack Overflow
logging - How to turn on/off $log.debug in AngularJS - Stack Overflow
After years of working with Angular, I just figured out I can simply console.log(this) and check the status of all variables at current component
How to debug Angular apps in Rider?
Videos
Tested with Angular 5 / CLI 1.5.5
- Install the Chrome Debugger Extension
- Create the
launch.json(inside .vscode folder) - Use my
launch.json(see below) - Create the
tasks.json(inside .vscode folder) - Use my
tasks.json(see below) - Press CTRL+SHIFT+B
- Press F5
launch.json for angular/cli >= 1.3
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (Test)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (E2E)",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceFolder}/protractor.conf.js"]
}
]
}
tasks.json for angular/cli >= 1.3
{
"version": "2.0.0",
"tasks": [
{
"identifier": "ng serve",
"type": "npm",
"script": "start",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"identifier": "ng test",
"type": "npm",
"script": "test",
"problemMatcher": [],
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
Tested with Angular 2.4.8
- Install the Chrome Debugger Extension
- Create the
launch.json - Use my
launch.json(see below) - Start the NG Live Development Server (
ng serve) - Press F5
launch.json for angular/cli >= 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
launch.json for angular/cli < 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"name": "Lunch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
},
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
}
}
]
}
Looks like the VS Code team is now storing debugging recipes.
https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome with ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Chrome with ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
}
]
}
$logProvider.debugEnabled(true)
This is only available in AngularJS 1.1.2 or later.
https://github.com/angular/angular.js/pull/1625
Here is an example of it being set.
var app = angular.module('plunker', []);
app.config(function($logProvider){
$logProvider.debugEnabled(true);
});
app.controller('MainCtrl', function($scope, $log ) {
$scope.name = 'World';
$scope.model = {value: "test"};
$log.debug('TEST Log');
});
http://plnkr.co/edit/HZCAoS?p=preview
By default it is on.
You can override the default $log behavior with a decorator to enhace the log level. This is an example:
angular.module('app').config(function($logProvider, $provide){
$logProvider.debugEnabled(false);
$provide.decorator('$log', function ($delegate) {
//Original methods
var origInfo = $delegate.info;
var origLog = $delegate.log;
//Override the default behavior
$delegate.info = function () {
if ($logProvider.debugEnabled())
origInfo.apply(null, arguments)
};
//Override the default behavior
$delegate.log = function () {
if ($logProvider.debugEnabled())
origLog.apply(null, arguments)
};
return $delegate;
});
});
This was inspired from the work of John Crosby at http://www.thekuroko.com/using-angulars-log-provider/