CODEWITHSUNDEEP
javascripttypescriptvisual-studio-code
DauleDK
DauleDK

Reputation: 3433

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

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"
]}

Upvotes: 36

Views: 44438

Answers (12)

masood SOFI
masood SOFI

Reputation: 1

In my case, I added "sourceRoot": "../../" in the compiler options of tsconfig.json.

Check the relative path "sourceRoot": "" generated in app.js.map files as "sourceRoot":"../../","sources":["src/app.ts"] indicates the absolute path of your .ts files.

Upvotes: 0

user2725919
user2725919

Reputation: 307

In my case the Base url generated as

"baseUrl": "./",

inside tsconfig.json

I changed it to

"baseUrl": "./src"

and the mapping started working.

Upvotes: 0

Yogesh Umesh Vaity
Yogesh Umesh Vaity

Reputation: 48139

Remember that the program file that you want to run should have the focus before you execute, otherwise you'll get the 'Cannot find Javascript' error dialog. Especially when the file you are executing is not a Javascript or a Typescript file. Becuase, in the default launch.json file, configuration "program": "${file}" is specified. That means the file that is currently being displayed on the screen will be executed.

So for example: If you are in a non-js or non-ts file, say, tsconfig.json or launch.json and you click Run command, then you'll get that error dialog.

Properly setting up a Typescript project in VS Code

Make sure you have Typescript and Node.js installed on your machine before creating the project.

1.Intialize in the terminal

In the terminal create a new folder for your project.

mkdir MyProject

Change the current directory to the folder you made above.

cd MyProject

Initialize the project to enable Typescript. This will create the tsconfig.json file.

tsc --init

Open this folder in VS Code. This command works from MacOS. You can open manually too.

code .

2.Configure the output directory

Now go to the file tsconfig.json and add the following lines to the compilerOptions. Yes, you need to specify the output directory here in tsconfig.json instead of launch.json. VS Code will always look for files in default outDir of launch.json which is ${workspaceFolder}/**/*.js.

"outDir": "./out",  /* Specify .js output files. */
"sourceMap": true   /* Generate corresponding .map files. */

Running/Debugging the project

Write a simple program to test and run: welcome.ts

console.log('Welcome to Typescript');

1.Build

Now Click Run Build Task (Shift + Command(Ctrl) + B) from the Terminal menu of the VS Code and type the following command and press enter:

tsc: watch - tsconfig.json

You need to Run Build Task once when you first open the project. This will start watching for code changes in the project.

2.Run

Now go to the Typescript program that you want to run (Make sure your program file .ts has the focus). From the Run menu:

Click Start Debugging for debug (F5)

OR

Click Run Without Debugging (Ctrl + F5)

Output will be displayed in the Debug Console.

That's it. It may seem overwhelming at first, but it's easy once you get used to it.

Upvotes: 2

mneumann
mneumann

Reputation: 786

This worked in my case:

Go into your gulpfile.js and find the line that contains sourcemaps.write(). Change this line to

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))

Rebuild your project and try running the debugger again. Credit goes to roblourens on GitHub. He linked this page, which was helpful.

Upvotes: 1

Viswanath Lekshmanan
Viswanath Lekshmanan

Reputation: 10083

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"]
  }
]
}

Upvotes: 2

Scott w
Scott w

Reputation: 525

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

"sourceMap": true,

Upvotes: 2

asuciu
asuciu

Reputation: 1264

I had a weird situation where my machine worked perfectly fine based on @lucascaro suggestions but on someone else's computer with the same version of vscode, node, ts, etc. I could still see the error message.

So, if you have followed all the instructions from @lucascaro and you are still seeing the error message try adding this to your launch.json configuration after the program property, like this:

{
  ...
  "preLaunchTask": "tsc: build - tsconfig.json",
  ...
}

This addition made it work on the second machine, but if i added it to mine it would not work anymore.

So if you are in a place where it still fails give this a try.

Upvotes: 1

mrmashal
mrmashal

Reputation: 1863

In my case the culprit was setting the working directory to some directory other than the file's directory in launch.json:

"cwd": "${workspaceFolder}/dist"

Perhaps it could be a bug in VSCode.

Upvotes: 0

lucascaro
lucascaro

Reputation: 19267

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"]

Upvotes: 19

سعید دالوند
سعید دالوند

Reputation: 155

Hi I had the same problem. You just need to add to the user path or the global path variable the path you have installed npm.

C:\Users\userName\AppData\Roaming\npm

enter image description here

Upvotes: -3

J. Perkins
J. Perkins

Reputation: 4276

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'

Upvotes: 4

Aakash Malhotra
Aakash Malhotra

Reputation: 540

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.

Upvotes: 22

Related Questions