chrome:使用源映射来调试内容脚本

时间:2018-10-26 09:55:34

标签: javascript typescript google-chrome-extension google-chrome-devtools source-maps

我正在为Chrome开发一个网络扩展程序。该代码以打字稿编写,然后与包裹捆绑在一起。

生成的输出对我来说是正确的,但是chrome无法加载以打字稿编写的内容稿的源映射。为了让您重现该问题,我设置了以下最小示例: 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

我的示例包含两个脚本:一个内容脚本和一个包含在browseraction的popup.html中的脚本。它们都将一些内容打印到控制台,这使得在chrome中找到它们变得容易:

popup log

contentscript log

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

但是内容脚本未映射到其原始源。如何让chrome使用源地图?

1 个答案:

答案 0 :(得分:1)

问题出在源地图路径上。前导/不适用于文件夹中的文件。这些文件需要完整的路径(包括父文件夹),或者仅需要名称而不带斜杠。

对于也使用包裹的人,可以使用其他选项打开正确的行为:

eachNode = 0;

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