5

How to debug Angular 2 Typescript application using visual code or with the developer tools?

Lasantha Basnayake
  • 359
  • 5
  • 11
  • 1
    see this link https://stackoverflow.com/questions/46714537/chrome-debug-angular-typescript-how-to-navigate-to-ts-file/51941277#51941277 – kumar chandraketu Aug 21 '18 at 03:51

3 Answers3

8

Late to the party, but hope the following helps someone else. The solution will work for angular2 & angular4 = Angular on visual studio code.

  1. Install new extension - Debugger for Chrome enter image description here

  2. A new folder will be created (automagically) under your project - '.vscode' -> 'launch.json'. enter image description here

  3. Edit 'launch.json' to reflect as below. Note, port 4200 is default to 'ng serve' adjust if yours is different.

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        }
    ]
   }
  1. Finally we get to 'play' - click on 'debug' followed by clicking on the 'play' button (see below). From there a debug chrome window will open up, view console to see your console.log outputs.

enter image description here

HAPPY CODING! :-)

Rodrigo Rubio
  • 1,686
  • 2
  • 16
  • 26
4

What is important at this level is source maps. They allow you to link TypeScript source code to the transpiled JavaScript one.

There is a sourceMap option in your tsconfig.json file that must be set to true:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true, // <-----
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

You'll then be able to see your TypeScript files within the Sources tab of DevTools and to add breakpoints in them.

This article could also interest you:

https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f#.sltohvpio

Xpleria
  • 5,472
  • 5
  • 52
  • 66
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I'm on IE10 ( required where i work :[ ), and I can only see the compiled javascript in non-descriptive names such as `Function Code (x)` and `eval code (x)`. Is there any other way I might get this to work, or am I SOL? – Scrambo Aug 11 '16 at 13:52
3

You can debug typescript files directly by setting a breakpoint from the browser.

enter image description here

CharithJ
  • 46,289
  • 20
  • 116
  • 131