提问人：Bradley 提问时间：11/10/2023 最后编辑：Bradley 更新时间：11/11/2023 访问量：46
无法使用外部源映射调试 Chrome 扩展程序 （v3）？不支持的协议方案 chrome-extension：// [更新了部分修复]
Can't debug Chrome Extensions (v3) using external source maps? Unsupported protocol scheme chrome-extension:// [Updated w Partial Fix]
问：
我可以让它们内联加载，但是当我将构建器更改为使用外部样式表时，我总是收到此错误。
我尝试过其他 SO 帖子中提到的建议，但它们似乎都与 v2 有关，对我没有帮助。
具体来说，将此添加到清单中：（在移动设备上快速重新键入）
{
"web_accessible_resources": [{
"resources": ["*.js.map"],
"matches": ["https://*/*", "http://*/*"]
}]
}
无法读取 chrome-extension：//ooodmkmklcjkca 的源映射 opcpffalcikkebdmdo/src/content-scripts/highlighter/app.js：意外 503 回复来自 chrome-extension：//ooodmkmklcjkcaopcpffalcikkebdmdo/src/content-scripts/highlighter/app.js.map： 不支持的协议“ chrome-extension：
答：
1赞
Bradley
11/11/2023
#1
在为人类的更大利益而开会时深入研究这一点。
看起来我让它在外部工作而没有产生错误，但只有当我在查看 Chrome DevTools 内部的调试器时。在 Visual Studio Code 中，每次我单步执行 chrome 调试器时，它都会将我带到缩小版本。
理想情况下，这应该将我带到确切的 [svelte] 文件，并让我逐步完成并编辑该单个文件;就像我调试过的所有其他脚本一样。使用内联调试器，它会打开我的 [.svelte] 文件的克隆只读版本，这迫使我检查那里的变量，然后转到可写文件进行编辑;我从来没有用任何其他语言做过。
无论如何，在调试 Chrome 扩展程序时，这看起来是一个非常常见的问题，所以我希望它对一些人有所帮助，我希望有人可以改进这一点。如果我弄清楚了其他问题，那么我将使用我的更改更新此答案。
manifest.json
//Specific to this repo
{
"manifest_version": 3,
"permissions": [
"sidePanel",
"storage"
],
"action": {
"default_popup": "src/popups/app.html"
},
"side_panel": {
"default_path": "src/side-panels/app.html"
},
"content_scripts": [
{
"matches": [
"https://*/*",
"http://*/*"
],
"js": ["src/content-scripts/highlighter/app.js"]
}
],
//Manifest v2 Recommended change
"web_accessible_resources": [
{
"resources": ["*.js.map"],
"matches": ["https://*/*","http://*/*"]
}
]
}
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
//This config is meant for content_scripts, so this is just a random domain. Would probably be nice if it could go to options.html, popup.html, etc. automatically for debugging. Not sure how to get that working though.
"url": "https://www.svelte.dev/",
//Opens chrome and injects the unpacked extension and auto opens dev tools to trigger debugging automatically
"runtimeArgs": ["--load-extension=${workspaceFolder}/dist", "--auto-open-devtools-for-tabs"],
//Stops the errors imaged above
"resolveSourceMapLocations": [
"${workspaceFolder}/dist/**",
"!**/node_modules/**"
]
},
{
//Requires Debugger for Firefox Extension
"type": "firefox",
"request": "launch",
"name": "Launch Firefox",
"url": "https://svelte.dev/",
"addonPath": "${workspaceFolder}/dist"
}
]
}
vite.config.js
...
export default defineConfig({
...
build: {
emptyOutDir: true,
sourcemap: true
},
...
});
评论
devtool: 'inline-source-map'