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 Overflow
🌐
Angular
v17.angular.io › api › platform-browser › enableDebugTools
Angular
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
Discussions

debugging - How to debug Angular with VSCode? - Stack Overflow
Go to VSCode debugger and run "Angular debugging session" configuration. As a result, new browser window with your application will be opened. For that you need to run Chrome in the debugger mode with opened port (in my case it will be 9222): More on stackoverflow.com
🌐 stackoverflow.com
logging - How to turn on/off $log.debug in AngularJS - Stack Overflow
I'm trying to use $log.debug("Foo"). How can it be turned on off. I can't find a sample anywhere. I think it need to be set in the config, but I cant seem to get that to work either. Where does ... More on stackoverflow.com
🌐 stackoverflow.com
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
Or just use debugger More on reddit.com
🌐 r/angular
34
114
January 25, 2024
How to debug Angular apps in Rider?
I have no experience with Rider. But, in Webstorm I just mash shift + cmd + click on the URL from the integrated terminal and it starts a debugging session. Maybe it works in Rider too? Debug an application that is running on localhost in development mode More on reddit.com
🌐 r/angular
14
3
January 1, 2024
🌐
Angular.love
angular.love › everything-you-need-to-know-about-debugging-angular-applications
Debugging Angular applications - simple guide
These debugging tools are independent of the mode in which Angular runs. They can be enabled both in development and production mode by calling enableDebugTools function that is exported from the platform-browser module.
🌐
Angular
angular.dev › api › platform-browser › enableDebugTools
enableDebugTools • Angular
Enabled Angular debug tools that are accessible via your browser's developer console.
🌐
Medium
medium.com › @VAISHAK_CP › debugging-angularjs-applications-30d2293bc992
Debugging AngularJS Applications. Introduction | by VAISHAK | Medium
July 21, 2023 - Read our blog on “Top 6 AngularJS Best Practices and Tips”. Enable debugging mode in AngularJS by adding the “ng-debug” attribute to your application’s root element.
🌐
JetBrains
jetbrains.com › help › idea › run-and-debug-angular-applications.html
Run and debug Angular applications | IntelliJ IDEA Documentation
March 10, 2026 - To debug your Angular application, you need two run/debug configurations: An npm configuration to start your application in the development mode, as described above.
🌐
Pluralsight
pluralsight.com › tech insights & how-to guides › tech guides & tutorials
Debugging Angular 2 Applications | Pluralsight
This guide gives a comprehensive ... the most out of Angular 2 debugging, it is recommended that you use Google Chrome as most of the examples presented here rely on the Chrome Developer Tools · Angular 2 applications have development mode enabled by default....
Find elsewhere
Top answer
1 of 12
210

Tested with Angular 5 / CLI 1.5.5

  1. Install the Chrome Debugger Extension
  2. Create the launch.json (inside .vscode folder)
  3. Use my launch.json (see below)
  4. Create the tasks.json (inside .vscode folder)
  5. Use my tasks.json (see below)
  6. Press CTRL+SHIFT+B
  7. 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

  1. Install the Chrome Debugger Extension
  2. Create the launch.json
  3. Use my launch.json (see below)
  4. Start the NG Live Development Server (ng serve)
  5. 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/*"
      }
    }
  ]
}
2 of 12
63

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"]
    }      
  ]
}
🌐
Angular
angular.dev › guide › testing › debugging
Debugging tests • Angular
The same way you start a debugging session with in Node, you can use ng test with the --debug flag with Vitest and browser mode.
🌐
This Dot Labs
thisdot.co › blog › debugging-strategies-for-angular-applications
Debugging Strategies for Angular Applications - This Dot Labs
May 30, 2023 - Instead, you can search for your TypeScript files using CTRL+P (or CMD+P on mac), or use the Angular Devtools to jump to the source code of your components. Once you’re in the source file, you can place breakpoints directly in your TypeScript files! Do note that debugging the original TypeScript files is not available in production builds.
🌐
JetBrains
jetbrains.com › help › webstorm › run-and-debug-angular-applications.html
Run and debug Angular applications | WebStorm Documentation
March 10, 2026 - To debug your Angular application, you need two run/debug configurations: An npm configuration to start your application in the development mode, as described above.
🌐
AngularJS
docs.angularjs.org › guide › production
AngularJS: Developer Guide: Running in Production
AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!
🌐
C# Corner
c-sharpcorner.com › article › how-to-debug-an-angular-application
How To Debug An Angular Application
October 20, 2023 - Note. It is necessary to run the app on port 4200 first and then launch debugging because the debugger needs to connect to a running instance of the application in order to interact with it. By default, Angular serves the application on port 4200.
🌐
Telerik
telerik.com › blogs › tips-for-debugging-your-angular-applications
Tips for Debugging Your Angular Applications
May 27, 2021 - Angular has a built-in profiler that records the amount of time it takes to run change detection throughout the application. It logs the amount of change detection cycle run throughout the application and the time taken for each check. To enable the the profiler, you have to enable debug tools in your Angular application.
🌐
C# Corner
c-sharpcorner.com › article › debugging-angular-11-application-in-visual-studio-code
Debugging Angular 11 Application In Visual Studio Code
March 8, 2021 - In this article, you will learn how to debug an Angular 11 application in Visual Studio Code
🌐
BrowserStack
browserstack.com › home › guide › how to debug angular app in chrome
How to debug Angular App in Chrome | BrowserStack
May 30, 2025 - Here is how you can debug Angular apps with Angular DevTools: ... Go to the Chrome Web Store. Click “Add to Chrome” to install the Angular DevTools extension. ... Launch your app and ensure it runs in development mode (not production), as Angular DevTools only works with development builds.
🌐
Medium
medium.com › @vamsivempati › a-guide-to-debugging-angular-applications-5a36bd88b4cf
A Guide To Debugging Angular Applications | by Vamsi Vempati | Medium
June 28, 2019 - This will only give us the necessary information when the debug mode is enabled and will not work on Production where debug mode is usually disabled. Angular has a built-in profiler which can be used to profile your Angular application. At the moment, it offers only one kind of profiling — ...
🌐
Newline
newline.co › ng-book › p › Debugging-AngularJS
Debugging AngularJS | - Newline.co
Angular Batarang is a Chrome extension developed by the Angular team at Google that integrates very nicely as a debugging tool for Angular apps. To install Batarang, we simply need to download the application from the web store or from the GitHub repo: https://github.com/angular/angularjs-batarang. Once our installation is set, we can start up the extension by navigating to our developer tools and clicking enable to enable Batarang to start collecting debugging information about our page.
🌐
DEV Community
dev.to › this-is-angular › simple-methods-for-debugging-angular-applications-1pe3
How To Debug Angular Applications Easy - DEV Community
June 19, 2023 - Angular offers a host of helpful debugging functions in its global ng namespace. These functions, available when you run your application in development mode, provide valuable insights into the application's current state.