Question

在Windows 10上，我将非常简单的节点Express app放在一起：

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行中不起作用：

我在这里错了什么？

Answer 1

要在所有文件中启用断点，您需要修改settings.json。（文件 - ＆gt;偏好设置 - ＆gt;设置）

// 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。

希望这有助于某人。

Answer 2

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

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

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

这为我解决了。

Answer 3

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

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

确保以下两点

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

VS代码使用vscode-chrome-debug为JS代码错误“忽略了断点，因为找不到生成的代码”错误

3 个答案: