chrome：使用 sourcemaps 调试 contentscript答案

【问题标题】：chrome: use sourcemaps to debug contentscriptchrome：使用 sourcemaps 调试 contentscript
【发布时间】：2019-03-31 01:26:04
【问题描述】：

我正在为 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 中。如您所见，生成的代码包含 sourcemap：

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

我的示例包含两个脚本：一个 contentscript 和一个包含在 browseraction 的 popup.html 中的脚本。他们都在控制台上打印了一些东西，这使得在 chrome 中很容易找到它们：

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

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

【问题讨论】：

正如@Ihk 在his answer 中提到的，问题不在Chrome。 Chrome 支持开箱即用的扩展源映射：stackoverflow.com/a/62142425/309031

【解决方案1】：

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

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

--public-url ./

【讨论】：