Chrome：使用源映射调试内容脚本

Question

我正在为Chrome开发一个Web扩展程序。代码是用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知道这是一个TypeScript文件。但是内容脚本没有映射到它的原始源代码。我该如何让Chrome使用sourcemap？”

- lhk

---

正如@Ihk在他的回答中提到的，问题并不在Chrome上。Chrome默认支持扩展源映射：https://dev59.com/3WUp5IYBdhLWcg3wtZPt#62142425 - Nik Sumeiko

Answer 1

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

对于同时使用parcel的用户，可以通过添加额外选项来切换到正确的行为：

--public-url ./

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

- lhk