Search code examples
javascripttypescriptgoogle-chrome-extensiongoogle-chrome-devtoolssource-maps

chrome: use sourcemaps to debug contentscript

I'm developing a webextension for Chrome. The code is written in typescript and then bundled with parcel.

The generated output looks correct to me, but chrome is unable to load the sourcemaps for a contentscript written in typescript. To let you reproduce the issue, I have set up this minimal sample: 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

This creates a dist/ folder which can be loaded as an extension into chrome. As you can see, the generated code contains sourcemaps:

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

My example contains two scripts: A contentscript and a script included in the popup.html of a browseraction. They both print something to the console, which makes it easy to find them in chrome:

popup log

contentscript log

The console.log from the popup is already recognized as popup.ts:1. Chrome knows that this was a typescript file.

But the contentscript is not mapped to its original source. How can I make chrome use the sourcemap ?

Solution

  • The problem are the sourcemap paths. The leading / is incorrect for files within folders. These files need either their full path, including the parent folder, or just their name, without a slash.

    For someone also using parcel, the correct behaviour can be switched on with an additional option:

    --public-url ./

    The related issue is: https://github.com/parcel-bundler/parcel/issues/2209