How to debug Angular 2 Typescript application using visual code or with the developer tools?
1
-
1see this link stackoverflow.com/questions/46714537/…kumar chandraketu– kumar chandraketu2018-08-21 03:51:24 +00:00Commented Aug 21, 2018 at 3:51
Add a comment
|
3 Answers
Late to the party, but hope the following helps someone else. The solution will work for angular2 & angular4 = Angular on visual studio code.
Install new extension - Debugger for Chrome
A new folder will be created (automagically) under your project - '.vscode' -> 'launch.json'.
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
}
]
}
- 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.
HAPPY CODING! :-)
Comments
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:
answered Aug 11, 2016 at 12:33
Thierry Templier
203k44 gold badges407 silver badges365 bronze badges
1 Comment
Scrambo
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?You can debug typescript files directly by setting a breakpoint from the browser.
1 Comment
christopher
This should be the accepted answer.