使用 VS Code 调试独立的单个 JavaScript 文件

Question

我有一段独立的JS代码，可以发出HTTP请求并对其进行一些工作。现在，通常我会通过在 repl.it 中运行它们然后console.log数据来调试此类脚本。但是，VS Code 有一个整洁的侧面板，其中包含"变量"、"监视"、"调用堆栈"，我希望充分利用它们。

我使用了VS Marketplace的"Chrome调试器"扩展。但是，每次我按 F5 时，Chrome 浏览器都会打开并尝试连接到本地主机，而我的 JS 代码不需要。这是我的launch.json文件(默认生成(：

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "/FolderName"
}
]
}

我期望发生的事情是我的JS代码应该在VS Code中运行，并且我的代码的调用堆栈和变量应该显示在左侧边栏中。

那么，如何完成这项任务呢？

---

示例：以下脚本在一定程度上表示我的脚本所执行的操作：

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://some.website.org/numbers/", true);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send();
xhttp.onload = function (e) {
var numbers = JSON.parse(e.srcElement.response));
add(numbers);
};
function add(numbers){
console.log(numbers);
}

当然，它比这更复杂，但要点是相同的：进行一次 API 调用并对接收到的数据进行一些操作。

Answer 1

您可以尝试在 chrome 中使用脚本打开 HTML 页面，然后使用 chrome 调试器的附加功能吗？

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 有一个示例启动设置，您可以在其中指定文件：

{
"version": "0.1.0",
"configurations": [         
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceFolder}/index.html"
},
]
}

Answer 2

以下是解释如何执行此操作的文章：

通过 Visual Studio Code 中的开发人员工具集成更轻松地进行浏览器调试

https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/

使用 Chrome 浏览器、Edge 浏览器或 Node 调试 JavaScript 不再需要扩展.js因为集成调试器是从 1.4.6 版开始在 VS Code 中首次启动的。

最后，这里有一个YouTube视频，演示了如何根据上面的文章调试JavaScript：

您是否正在 VSCode 中调试 JavaScript？ |你应该！

https://youtu.be/68wO-sl5vXg

-干杯