Typescript debugging in Visual Studio Code

Question

i tried this solution: how to debug typescript files in visual studio code

But if I make a breakpoint in my .ts files it's says the file not found for the debugger. The breakpoint in the .js files works. The Sourcemaps exists.

the launch configuration:

    {
        "name": "DEBUG",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/src/app.ts",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/cmpl"
    }

SergeyK · Accepted Answer · 2016-08-23T04:02:00.843

1

It is a problem with your tsconfig.json. You must check if config contains correct sourceRoot compiler option set to the right path to your .ts sources.

sourceMap also must be set to true. You can double check path correctness, inspecting any of your .js.map files, where sources and sourceRoot fields must point to the right path to your .ts source file.

edited Aug 23 '16 at 04:02

answered Aug 23 '16 at 03:27

SergeyK

1,522
1
13
15

Did you check path to `.ts` file inside any of your `.js.map`? Is it relative or absolute? Is it points to correct location? – SergeyK Aug 23 '16 at 06:42
for an example the sourcmap from my IndexController is `"sources":["controllers/IndexController.ts"]` – R3Tech Aug 23 '16 at 18:24
Is IndexController.ts file in "controllers" folder, relatively to your IndexController.js.map? It looks like your config points to different folders for .js and sources. – SergeyK Aug 23 '16 at 18:36
IndexController.js/.js.map is in `./cmpl/controllers` and IndexController.ts is in `./src/controllers` – R3Tech Aug 23 '16 at 18:53
You can set the sourceRoot compiler option in the your tsconfig `sourceRoot: "src"` – SergeyK Aug 23 '16 at 19:02

score 0 · Answer 2 · answered Aug 23 '16 at 06:30

0

Couple of suggestions to make it work:

Make sure your tsconfig.json points to the right src/ and output directories, something like

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "sourceMap": true,
        "rootDir": "src",
        "outDir": "cmpl"
    }
}

You should have a build task (.vscode/tasks.json) to make sure the output is up-to-date

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

And in your launch.json "preLaunchTask": "tsc"

answered Aug 23 '16 at 06:30

to the tsconfig. It did, if not would be able to launch the server. The Server runs, but i cannot make breakpoints in my .ts files. And the build task works as well. – R3Tech Aug 23 '16 at 06:33
@R3Tech hmm that's strange. At this point it's difficult to say without examining the project closer :) – Aug 23 '16 at 06:52
i have a cmpl and src folder. In this are the app.ts/js file and folder like routes, controllers, models and more.In my root dir, where the cmpl and src folder are, is the tsconfig, package.json, gulpfile.js and other project files. – R3Tech Aug 23 '16 at 06:55
then I take it you're placing the breakpoint in a different file rather than app.ts? I'd advise to try placing breakpoints in app.ts and trace them to find out where you can't hit breakpoints anymore. – Aug 23 '16 at 07:02

Typescript debugging in Visual Studio Code

2 Answers2