使用 vscode-chrome-debug 的 JS 代码的 VS 代码“由于找不到生成的代码而忽略断点”错误答案

【问题标题】：VS Code “Breakpoint ignored because generated code not found” error for JS code using vscode-chrome-debug使用 vscode-chrome-debug 的 JS 代码的 VS 代码“由于找不到生成的代码而忽略断点”错误
【发布时间】：2017-08-16 14:58:28
【问题描述】：

在 Windows 10 上，我将非常简单的 node Express 应用程序放在一起：

investigate-debugger
+--.vscode
   +-- launch.json
+-- app.js
+-- index.html
+-- program.js

服务器以 app.js 代码启动：

//////////////////app.js
var express = require('express');
var app = express();

app.use(express.static('.'));

app.listen(8080, function () {
  console.log('Example app listening on port 8080!');
});

index.html 只是加载 program.js 文件：

//////////////////index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <script src="program.js"></script>
</head>
<body>
</body>
</html>

//////////////////program.js
var x = 5;
var y = 4;  // here is  “Breakpoint ignored because generated code not found” 
console.log(5 + 4);

我已经通过以下方式配置了launch.js：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome, launch",
            "type": "chrome",
            "request": "launch",        
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": false,
            "sourceMaps": false,
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        }
    ]
}

当我运行调试器时，我在调试器控制台中看到输出 9，我看到浏览器以正确的路径打开，但断点在 program.js 第 2 行中不起作用：

我在这里做错了什么？

【问题讨论】：

很可能您应该启用源映射，因为它们是调试所需的。此外，如果您使用 webpack，您可能需要调整 webpack 的设置以生成 VSCode 可以找到并用于调试的源映射。
没有 webpack 或其他 bandler。无论sourceMaps如何，事情都对我不起作用
我自己解决了这个问题，并整理了一篇关于这个的博客文章。也许有人会觉得它有帮助：nechai.net/2017/03/22/…
@AlexanderNechay 您提供的博客链接中没有任何内容，您的意思是要包含其他链接吗？
@Azurespot，很抱歉，我的提供商丢失了我网站的数据。我已经在medium上重新发布了这篇文章：medium.com/@nechais/…

标签： debugging visual-studio-code

【解决方案1】：

要在所有文件中启用断点，您需要修改 settings.json。（文件 -> 首选项 -> 设置）

// Place your settings in this file to overwrite default and user settings.
{  
    "debug.allowBreakpointsEverywhere": true
}

我还注意到，在使用 chrome 调试器时，您需要将实际的 html 文件指定为 URL 的一部分。例如，当您调试时，chrome 可能会以 localhost:8080 的形式打开，这将无法正常工作。相反，您需要指定实际页面，例如 localhost:8080/index.html。

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

尝试将 '/*' 添加到您的网站“网址”。

"url": "http://localhost:8080/*",

这告诉 VS Code 它应该跟踪调试中的所有文件。

这为我解决了这个问题。

【讨论】：

这对我不起作用。它说 * 不是网站。

【解决方案3】：

请参考https://github.com/Microsoft/vscode-chrome-debug#sourcemaps。你需要调整你的 sourceMapPathOverrides。

默认配置可能不适合您的情况。调整后，在调试控制台运行.scripts命令查看输出。

确保以下两点

1) .js 文件映射到正确的绝对路径
2）如果有多个相同的文件，让正确的文件映射到正确的路径，让其他文件映射到错误的路径。

【讨论】：