javascript - 使用 Chrome 调试器无法触发 VS 代码断点 :

标签 javascript visual-studio-code vscode-extensions

我是 VS Code(使用 v1.7)和 JavaScript 的新手。我正在尝试使用 Chrome 扩展调试器 (v2.2.2),但无法让断点发挥作用(我可以设置它们,但它们会被忽略,指出未经验证的断点)。

我知道我需要启动 Chrome 并在端口 9222 上进行调试,这是通过以下方式实现的:

chrome.exe --remote-debugging-port=9222

完成后,我设置了一个非常简单的测试来演示该问题。

我已按如下方式配置 launch.json(在 .vscode 文件夹中)

{
    "version": "0.2.0",
    "configurations": [{
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "port": 9222,
            "file": "${workspaceRoot}/index.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

我创建了一个非常简单的index.html:

<!DOCTYPE html>
<html>
<script src="script.js"></script>
</html>

最后 script.js 是:

console.log("Started");
var x = 1; //breakpoint set here
console.log(x);
console.log("Complete");

在代码中按F5,然后在进程中运行script.js加载index.html。如果未设置断点,代码将按预期完成 - 但这不是我想要发生的情况。

完成后,我看到图像 1它将红色断点图标替换为灰色断点图标,并将鼠标悬停在上面显示“未验证的断点”。

我想我做了一些非常简单的错误,但我无法弄清楚。有任何想法吗?谢谢。

最佳答案

您的设置似乎是正确的,但这是由于 chrome 开发工具中的错误 - Chrome needs to be refreshed before javascript files are shown in the sources tab
发生什么事了?
脚本执行后,V8 在 chrome 调试扩展启动开发工具之前收集它。这就是为什么它无法调试的原因。 解决方案 - 加载页面后重新加载页面。

关于javascript - 使用 Chrome 调试器无法触发 VS 代码断点 :,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40692475/

相关文章:

javascript - D3 - 无法从 csv 获取压缩圆圈

javascript - 如何创建 html 表格周 View ? (日历)

debugging - 如何使用 vscode 附加到远程 gdb?

visual-studio-code - 如何在VSCode扩展中创建BrowserWindow

visual-studio-code - vscode 文本在 HTML 脚本标签内着色

javascript - 突出显示选定的 Div

javascript - 添加过多 ID 对 html/js 渲染性能的影响

android - 如何在VSC中运行和调试React Native Android应用程序?

javascript - 如何在 VS Code 中为自定义文件扩展名启用 JavaScript IntelliSense?

vscode-extensions - vsce 发布失败 - 使用 pnpm/yarn 的 VS Code 扩展