VSCode 上的调试器不适用于 Javascript

Question

更新：这是一个关于如何配置 VSCode 来调试 Javascript 的问题。 我知道它使用 Node.js，我不知道，javascript 总是在浏览器中工作，但我希望能够单步执行代码而不是编写数百个 console.log() 语句只是为了看看它是什么正在做。

尝试在 VScode 中为 Javascript 设置调试，但没有成功，它一直打开 launch.json 文件，但我不知道我需要在其中放入什么才能使这项工作。 我是 Javascript 的新手，只是在浏览器中运行，我假设 Node.js 是一种独立的 JavaScript 引擎，所以我安装了它。 我在 linux mint 计算机上安装了 Node v4.2.6，并且：

which node

导致：

/usr/bin/node

我很困惑，这是节点的正确路径吗？如何将其添加到此配置中，我无法确定键/值对应该是什么。 这是launch.json文件吐出：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/app.js"
    },
}

对此的任何帮助将不胜感激。

Answer 1

如果我理解正确，您想使用 VSCode 调试在浏览器中运行的 JavaScript。 正确的？

如果是这种情况，调试在节点中运行的 JavaScript 将没有多大价值，因为节点可能缺少代码所依赖的 API（例如 DOM）。 相反，您需要让 JavaScript 在浏览器中运行，然后使用 VSCode 进行调试。

不同浏览器的扩展允许这样做，它们主要使用DevTools 协议： vscode-firefox-debug 、 vscode-chrome-debug 、 vscode-edge-debug2 。

仅引用 vscode-firefox-debug 项目页面：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

这将在新的 FireFox 选项卡中打开${workspaceFolder}/index.html ，您将能够使用 VSCode 进行调试。 捆绑器、源映射和所有爵士乐会让人讨厌，但这是你应该得到的要点：在浏览器中运行 JavaScript，使用扩展将 VSCode 连接到 DevTools。