Source maps not found in Visual Studio Code typescript debugging

Question

I am trying to debug a simple Hello World typescript file. When I set a breakpoint, VS Code cannot find the source map, even though it is in the same directory. I am launching Chrome for this. My launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch with Chrome",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": true,
            "file": "${workspaceRoot}/HelloWorld.ts"
        }
    ]
}

I have tried various tricks such as starting the debugging session and then setting a breakpoint, and making sure there are no instances of chrome running when I debug.

Here is the map file:

{"version":3,"file":"HelloWorld.js","sourceRoot":"","sources":["HelloWorld.ts"],"names":[],"mappings":"AAAA;IACW,MAAM,CAAC,IAAI;QACd,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,CAAC,CAAC,CAAC;IACb,CAAC;CACJ;AAED,OAAO,CAAC,IAAI,EAAE,CAAC"}

My hello world .ts file:

class Startup {
public static main(): number {
    console.log('Hello World');
    return 0;
}

}

Startup.main();

I am not sure what else to do to get Code to process the map properly.

source maps are for the browser to debug I am not sure if Vs Code can debug without additional work — rjustin
{ "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true } } — Darryl

Rob Lourens Rob Lourens · Accepted Answer · 2017-09-27T16:38:30

Chrome can't run just a .js (or .ts) file alone. You need to set file to the path of an html file, or start a webserver and set url to its url.

Source maps not found in Visual Studio Code typescript debugging

1 Answers