chrome：使用sourcemaps来调试contentcript

Posted 2021-04-05

我正在为Chrome开发一个webextension。代码用typescript编写，然后与parcel捆绑在一起。

生成的输出对我来说是正确的，但chrome无法加载用typescript编写的内容脚本的源图。为了让你重现这个问题，我设置了这个最小的样本：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中。如您所见，生成的代码包含源映射：

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

我的示例包含两个脚本：一个内容脚本和一个包含在浏览的popup.html中的脚本。它们都会在控制台上打印一些东西，这样可以很容易地在chrome中找到它们：

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

但是contentcript没有映射到它的原始来源。如何让chrome使用sourcemap？

答案

问题是源图路径。文件夹中的文件的前导/不正确。这些文件需要它们的完整路径，包括父文件夹，或者只需要它们的名称，而不需要斜杠。

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

--public-url ./

相关问题是：https://github.com/parcel-bundler/parcel/issues/2209