无法在 VS Code 中调试当前的打字稿文件，因为找不到相应的 JavaScript

Posted 2023-03-13

【中文标题】无法在 VS Code 中调试当前的打字稿文件，因为找不到相应的 JavaScript

【英文标题】：Can't debug current typescript file in VS Code because corresponding JavaScript cannot be found

【发布时间】：2018-04-17 23:11:42

【问题描述】：

我正在使用 Visual Studio Code 1.17 版，我的目标是调试 当前 打字稿文件。我有一个构建任务正在运行，所以我总是有一个相应的 javascript 文件，如下所示：

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

我已尝试使用以下 launch.json 配置：

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

但我得到了错误：Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

但是对应的JavaScript文件存在！

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

【问题讨论】：

添加了 ***.com/a/53236103/428486 解决方案相同的目录和单独的目录，我确认这两个都在 vscode 中工作，希望对您有所帮助！

【参考方案1】：

问题可能出在您的地图文件上，而不是配置上。

在尝试任何其他操作之前，您要确保在启动配置中使用的路径是正确的。

您可以通过暂时用系统上的绝对路径替换路径来查看它是否有效。

如果它不起作用，您应该：

检查您的 tsconfig 并确保 compilerOptions 下的 mapRoot 未设置为任何内容。这就是官方文档所说的：

指定调试器应该定位映射文件的位置 生成的位置。如果 .map 文件是 在运行时位于与 .js 文件不同的位置。这 指定的位置将嵌入到 sourceMap 中以引导 映射文件所在的调试器。

您可以阅读更多关于它的信息here

在大多数情况下，您并不想将其设置为任何值。

另外，请确保

"sourceMap": 是的`

在 tsconfig.json 中的compilerOptions 中设置，并且正在生成地图文件。

【讨论】：

如果给定绝对路径，调试器正在工作。 mapRoot 未设置 - 我将编辑原始问题，以便包含 tsconfig.json。最后 - 地图文件正在生成。

如果它使用绝对路径，那么显然意味着您需要正确设置“program”和“outFiles”。我都这样设置："program": "$workspaceFolder/backend/src/app.ts", "outFiles": [ "$workspaceFolder/backend/build/**/*.js"] $workspaceFolder 为您提供项目主文件夹的位置。从那里您可以导航到您的文件。您可以在下面的答案中查看我的完整配置。 ***.com/questions/31169259/…

***.com/a/47215246/7022062

VS Code Insiders 目前（2019 年 1 月）默认退出 SourceMap（tsconfig.json）。我必须取消注释 Sourcemap:true 否则不会创建源映射，并且 launch.json 中的默认调试启动配置将导致 VS-C 抛出“找不到相应的 Javascript 文件”错误。您可能希望 VS-C 的默认行为是生成源映射，但显然情况并非如此。

我一直在使用VScode 1.46.1，我即将测试我的最后一个和第十个launch.json...注意它是在VsCode帮助页面底部用纯文本编写的“找不到对应的 JavaScript”这对于 TypeScript 新手来说是个严重的问题！放置绝对路径会增加日志中的错误数量，因此绝对是正确方向的标记。非常感谢。

【参考方案2】：

您好，我遇到了同样的问题。您只需要将安装 npm 的路径添加到 用户路径 或 全局路径变量。

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

【参考方案3】：

以防其他人遇到这种情况：如果您使用 webpack 构建项目，则必须使用 devtool 设置来生成与 VS Code 兼容的源映射。经过反复试验，cheap-module-source-map 和 source-map 运行良好。我最终将此添加到我的webpack.config.js：

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

【参考方案4】：

outFiles 的配置指向错误的目录。

用这个替换你的launch.json 配置可以解决它：

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

来自vscode launch.json variable reference：

$fileDirName当前打开文件的目录名

应该是你需要的目录。

请注意，您也可以使用"outFiles": ["$fileDirname/**/*.js"] 来包含子目录。

您使用的配置添加了以下目录：

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

意思是这样的：

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

即到根目录的路径在那里两次，使其成为无效路径。

如果您的 .js 文件位于不同的 outDir：只需使用该目录的路径即可。 Typescript sourceMaps 将完成剩下的工作。

例如，如果您将.js 文件放在dist 目录中：

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

【讨论】：

做了一些测试，你成功了 - outFiles 是使它成为可能的属性。我想我的问题是我认为系统不够“智能”，无法在源映射的帮助下 lkp 文件，但现在由于您的回答而更加清楚。换句话说，这不适用于禁用源映射？

正确，它不适用于禁用源映射。在文档中不是很清楚，但是如果您在 tsconfig.json 中禁用 sourceMaps 则它不起作用：code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps

【参考方案5】：

这在我的情况下有效：

进入您的gulpfile.js 并找到包含sourcemaps.write() 的行。将此行更改为

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

重新构建您的项目并尝试再次运行调试器。 Credit goes to roblourens on GitHub. 他链接了this page,，这很有帮助。

【参考方案6】：

在我的情况下，罪魁祸首是将工作目录设置为launch.json中文件目录以外的某个目录：

"cwd": "$workspaceFolder/dist"

也许这可能是 VSCode 中的一个错误。

【参考方案7】：

我遇到了一个奇怪的情况，我的机器根据@lucascaro 的建议运行得非常好，但在其他人的计算机上使用相同版本的 vscode、node、ts 等。我仍然可以看到错误消息。

因此，如果您已按照 @lucascaro 的所有说明进行操作，但仍然看到错误消息，请尝试将其添加到您的 launch.json 配置中的程序属性之后，如下所示：

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

这个添加使它可以在第二台机器上运行，但如果我将它添加到我的机器上，它就不再工作了。

因此，如果您处于仍然失败的地方，请尝试一下。

【参考方案8】：

您可能需要在 tsconfig.json 中启用源映射

"sourceMap": true,

【参考方案9】：

我通过在 tsconfig.json

中添加

"sourceMap": true

解决了这个问题

launch.json 看起来像

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

【参考方案10】：

请记住，您要运行的程序文件在执行之前应具有焦点，否则您将收到“找不到 Javascript”错误对话框。特别是当您正在执行的文件不是 Javascript 或 Typescript 文件时。因为，在默认的launch.json 文件中，指定了配置"program": "$file"。这意味着当前正在屏幕上显示的文件将被执行。

例如：如果您在非 js 或非 ts 文件中，例如 tsconfig.json 或 launch.json，然后单击“运行”命令，则会出现该错误对话框。

在 VS Code 中正确设置 Typescript 项目

在创建项目之前，确保你的机器上安装了 Typescript 和 Node.js。

1.在终端初始化

在终端中为您的项目创建一个新文件夹。

mkdir MyProject

将当前目录更改为您在上面创建的文件夹。

cd MyProject

初始化项目以启用 Typescript。这将创建 tsconfig.json 文件。

tsc --init

在 VS Code 中打开此文件夹。此命令适用于 MacOS。也可以手动打开。

code .

2.配置输出目录

现在转到文件 tsconfig.json 并将以下行添加到 compilerOptions。是的，您需要在 tsconfig.json 中指定输出目录，而不是 launch.json。 VS Code 将始终在 launch.json 的默认 outDir 中查找文件，即 $workspaceFolder/**/*.js。

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

运行/调试项目

编写一个简单的程序来测试并运行：welcome.ts

console.log('Welcome to Typescript');

1.构建

现在从 VS Code 的 Terminal 菜单中点击 Run Build Task (Shift + Command(Ctrl) + B) 并输入以下命令并回车：

tsc: watch - tsconfig.json

您需要在首次打开项目时运行一次构建任务。这将开始监视项目中的代码更改。

2.运行

现在转到您要运行的 Typescript 程序（确保您的程序文件 .ts 具有焦点）。 从运行菜单：

点击开始调试进行调试（F5）

或

单击运行而不调试 (Ctrl + F5)

输出将显示在调试控制台中。

就是这样。一开始可能会觉得很费力，但是一旦习惯了就很容易了。