Can't debug current typescript file in VS Code because corresponding JavaScript cannot be found

Question

I am using Visual Studio Code version 1.17, and my objective is to debug the current typescript file. I have a build task running, so I always have a corresponding javascript file like this:

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

I have tried with the following launch.json configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

But I get the error: Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

But the corresponding JavaScript file exists!

tsconfig.json:

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}

Solution 1

The configuration for your outFiles points to the wrong directory.

Replacing your launch.json config with this would fix it:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

From the vscode launch.json variable reference:

${fileDirName} the current opened file's dirname

should be the directory you need.

Note that you can also use "outFiles": ["${fileDirname}/**/*.js"] to include subdirectories.

The configuration you're using adds the following directory:

"${workspaceFolder}/${fileDirname}**/*.js"

Which translates to something like:

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

i.e. the path to the root is in there twice, making it an invalid path.

If your .js files are on a different outDir: simply use the path to such directory. Typescript sourceMaps will do the rest.

For example, if you put your .js files in a dist directory:

"outFiles": ["${workspaceFolder}/dist/**/*.js"]

Solution 2

The problem may be with your map files and not with configuration.

Before trying anything else you want to make sure your paths that you are using in your launch configuration are correct.

You can do so by substituting the paths with absolute paths on your system temporarily to see if it works.

If it does not work you should:

Check your tsconfig and make sure mapRoot under compilerOptions is not set to anything. This is what official documentation has to say about it:

Specifies the location where debugger should locate map files instead of generated locations. Use this flag if the .map files will be located at run-time in a different location than the .js files. The location specified will be embedded in the sourceMap to direct the debugger where the map files will be located.

You can read more about it here

In most of the cases, you don't really want to set it to anything.

Also, make sure that

"sourceMap": true`

is set in compilerOptions in tsconfig.json and map files are getting generated.

Solution 3

In case someone else bumps into this: if you're using webpack to build your project, you have to use a devtool setting that generates VS Code compatible source maps. Through trial and error, cheap-module-source-map and source-map work well. I ended up adding this to my webpack.config.js:

devtool: env.production ? 'source-map' : 'cheap-module-source-map'

Solution 4

You may need to enable source maps in your tsconfig.json

"sourceMap": true,

Solution 5

I got it fixed by adding "sourceMap": true in tsconfig.json

launch.json looks like

{
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/src/index.ts",
    "preLaunchTask": "tsc: build - tsconfig.json",
    "outFiles": ["${workspaceFolder}/build/**/*.js"]
  }
]
}

View more solutions