VSCode 源映射显然不起作用

Question

我试图在 VSCode 上调试 chrome 扩展，在尝试中我注意到断点不适用于脚本（例如 background.js）； 所以我用谷歌搜索了一些帖子并尝试了一些，最后我不知道出了什么问题。

我的 chrome 项目上的 .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8291",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"], 
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",

            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${webRoot}/*"
            }
        }
    ]
}

最初我没有 webRoot、breakOnLoad、sourceMaps、sourceMapPathOverrides 属性，但在阅读了文档和帖子（链接下方）之后，我添加了这些属性。

我提到的帖子： 使用 Visual Studio 代码（vscode 1.19+）解决“断点被忽略”Chrome 调试器 | 通过阿南托·戈什 | 前端周刊 | 中等的

我还注意到我有一个已弃用并建议卸载的 vscode-chrome-debug 扩展，我确实卸载了。 （所以确保不会发生任何进一步的棘手问题）

项目上的文件树：

├── .vscode 
├── background.js
├── bookmarklet.js
├── content.js
├── dialog.html
├── dialog.js
└── manifest.json

现在键入 F5 键运行项目，打开 chrome，打开开发工具并导航到源选项卡并检查项目文件是否正确显示......不，没有。 （当然断点还不能像我预期的那样工作）

在我看来（因为 SO 条款，这不是一个问题，你不需要回答）：

• sourceMap 到底是什么鬼？ 我是否需要在 F5 之前手动创建那个 sourceMaps 东西？ 如果是这样，医生到底在哪里？
• URL localhost 有什么用？ 我想确保只指定一个端口就足够了，对吧？ 还是我需要在 F5 运行之前启动服务器或其他东西？ 那服务器到底是什么东西。

那么，project/launch.json 有什么问题呢？

Answer 1

你问 *sourceMaps 到底是什么？ 我是否需要在 F5 之前手动创建那个 sourceMaps 东西？ 如果是这样，医生到底在哪里？

第一个的答案。 尽管 JavaScript 确实需要编译，但它通常也是如此。 编译是删除空白并使用其他代码优化其他技巧的过程，以使您的 JavaScript 更快更小，但这会提高可读性。 sourcemaps 做它听起来的事情，它将已编译的代码映射到已编译的源代码。

2楼的答案。

是和不是。 如果您要自己编译 javascript，则确实需要制作源映射，但这通常使用 webpack、esbuild 或您使用的任何编译器来完成。 如果包是为你编译的，你可能不得不去看看你从哪里得到脚本的地方应该有编译版本。

你最后一个文档的答案应该是你正在使用的编译器。