javascript - 无法使用 Debugger for Chrome 在 Visual Studio Code 中放置断点

Question

我只是想调试我的 html 页面中的一些 javascript。

我的配置如下:

但是当我调试我的 html 页面时(使用名为“启动 div.html”的第二个选项)，它运行但我无法设置断点......

有什么想法吗？

{
    // 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": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch the div.html",            
            "sourceMaps": true,
            "file": "${workspaceFolder}/div.html",
            "webRoot": "${workspaceFolder}"
        }

    ]
}

Answer 1

似乎不支持调试内联 JavaScript(我也无法设置断点)。你必须将你的 JS 代码分离到它自己的文件中，并将其包含到 div.html 中，如下所示:<script src="div.js"></script> 现在在你的 div.js 中设置断点并开始调试。当我第一次运行调试时遇到断点未命中/加载的问题。我可以通过单击绿色的“重新启动”调试按钮来解决这个问题。

PS:您需要安装 Debugger for Chrome 扩展程序，但您似乎已经安装好了。