11

I'm doing some test development and creating a Chrome extension using Svelte and ParcelJS and would like to see the sourcemaps in chrome dev tools. When looking at any page however I can only see the bundled code see this error:

DevTools failed to load SourceMap: Could not load content for chrome-extension://debafkiakedogoflaalmbbfbbccnfbib/Background/index.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

It seems the loader does not like the chrome-extension url scheme. I've tried adding 'dist' as an override directory, but whatever loads the sourcemaps seems to ignore it and still uses the 'chrome-extension` scheme.

I am able to get it working by manually changing the url to another schema, either a file:/// url or running a simple http server in the dist directory and using an http:// url:

//# sourceMappingURL=file:///c:/git/svelte-extension/dist//Background/index.js.map`
//# sourceMappingURL=http://localhost:8080/Background/index.js.map`

Is there a way to either get chrome to override the directory or tell parcel to create those urls?

Jason Goemaat
  • 27,053
  • 14
  • 78
  • 109
  • FWIW I'm using `data:application/json` URLs in webpack and source URLs show up as `webpack://....` – wOxxOm Apr 27 '20 at 15:49
  • Parcel [doesn't seem to support](https://github.com/parcel-bundler/parcel/issues/2733) inline source maps, but [webpack does.](https://webpack.js.org/configuration/devtool/) They should skip the issue altogether. – fregante Apr 27 '20 at 21:04
  • 1
    A note on inlining source maps in extensions: It solved my problem with chrome not being able to load external ones, but my bundles became much larger. I had to switch back to external ones when one of my js bundles became larger than 4MB which is not allowed by Mozilla Addons on grounds of their automatic code review is not able to process it. – Gergely Szabo Apr 28 '20 at 13:18

1 Answers1

11

Try using inline sourcemaps during development. Chrome won't load Chrome extension sourcemap files, but inline sourcemaps do work.

Background

Chrome has always silently failed to load sourcemap files from the chrome-extension:// URL scheme. Chrome v80 started reporting the DevTools failed to load SourceMap error.

This may change soon, as there is a fix in the works. Some security concerns are holding this back, so keep your fingers crossed.

Here are two relevant Chromium bugs tracking this:

  1. https://bugs.chromium.org/p/chromium/issues/detail?id=1052872#c14
  2. https://bugs.chromium.org/p/chromium/issues/detail?id=1053535
Jack Steam
  • 2,445
  • 18
  • 30
  • 2
    I was having a similar issue working with webpack. I wanted to see my original code for debugging, but couldn't because Chrome couldn't read the source map. Going from `devtool: "source-map"` to `devtool: "inline-source-map"` resolved the issue for me. – pyrytakala Dec 11 '20 at 15:14