chrome: 使用 sourcemaps 调试 contentscript

Question

我正在为 Chrome 开发一个网络扩展。代码是用typescript写的，然后用parcel打包。

生成的输出对我来说看起来是正确的，但是 chrome 无法加载用 typescript 编写的 contentscript 的源映射。为了让您重现该问题，我设置了这个最小示例： https://github.com/lhk/chrome_ts_sourcemaps

git clone https://github.com/lhk/chrome_ts_sourcemaps
cd chrome_ts_sourcemaps
npm install
parcel build src/manifest.json

这将创建一个 dist/ 文件夹，可以将其作为扩展加载到 chrome。如您所见，生成的代码包含 sourcemaps:

console.log("I'm the contentscript");
},{}]},{},["rrAT"], null)
//# sourceMappingURL=/index.map

我的示例包含两个脚本：一个内容脚本和一个包含在浏览器操作的 popup.html 中的脚本。它们都在控制台打印一些东西，这使得在 chrome:

中很容易找到它们

弹出窗口中的 console.log 已被识别为 popup.ts:1。 Chrome 知道这是一个打字稿文件。

但内容脚本未映射到其原始来源。如何让 chrome 使用 sourcemap ？

Answer 1

问题出在源映射路径上。文件夹中文件的前导 / 不正确。这些文件需要它们的完整路径，包括父文件夹，或者只需要它们的名称，不带斜线。

对于也使用 parcel 的人，可以使用附加选项打开正确的行为：

--public-url ./

chrome: use sourcemaps to debug contentscript