19

I'm using the Closure compiler to create a Chrome extension and I'd like to get source maps to work for debugging. I can get source maps to work just fine by pointing the browser directly to a page in my source tree with the special sourceMappingURL added to the end of the compiled javascript file (everything is in a single directory):

debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map

But when I access the same script as an extension, I can only see the compiled javascript and not the original source. I do have the Chrome debugger configured to enable source maps in both cases, and otherwise they both execute identically with no errors. Do source maps just not work in extensions or is there something I'm missing in setting things up?

I've tried Chrome 25 stable and Chrome 27 canary, same behavior in both.

rhashimoto
  • 15,650
  • 2
  • 52
  • 80
  • 4
    I have come to the same conclusion that sourcemaps do not work in extensions. I have posted an issue on the Chromium project: https://code.google.com/p/chromium/issues/detail?id=212374 – w00kie Mar 18 '13 at 06:50
  • Thanks for confirming and posting the bug! – rhashimoto Mar 31 '13 at 20:43
  • 3
    It seems to have been fixed in Chromium trunk and will be included in Chrome 29 – w00kie Jul 04 '13 at 02:11

5 Answers5

15

I had the same problem and after switching to inline source maps, everything worked fine.

The reason is, that chrome extension only support inline source mpas

so, when you use webpack, just add

devtool: "inline-source-map"

There are a range of options possible, see the table in webpack documentation here.

Nils
  • 5,612
  • 4
  • 34
  • 37
Ruderer
  • 345
  • 2
  • 11
8

I know I'm incredibly late to the party, but Chrome DOES allow source maps. The problem you may be having is that it refuses to load the maps by default. This can be fixed by adding the map to the web_accessible_resources in your manifest.json file.

Stephen Collins
  • 3,523
  • 8
  • 40
  • 61
  • 1
    As the comments document, there was a lack of support for sourcemaps in extensions, fixed as of Chrome 29. – rhashimoto Dec 13 '13 at 23:56
6

In the spirit of providing answers to questions resolved in comments, Chrome previously did not support the use of source maps in extensions but this was rectified as of Chrome 29.

Thanks to the commenter, @w00kie who filed and tracked the bug on Chromium - if you wish to receive reputation for your helpful effort just post your own answer and I will delete this one.

Community
  • 1
  • 1
rhashimoto
  • 15,650
  • 2
  • 52
  • 80
4

Chrome supports an extension source maps out of the box. No need to have them inline or adding these to web_accessible_resources in your manifest.json file.

Mapped files are allocated under "Content scripts" tab within "Sources" tab under Developer Tools.

There is a source code of all enabled extensions, plus webpack:// files (if source maps are created with Webpack).

It's also possible to find mapped files using Cmd + P.

Chrome extension source maps

Nik Sumeiko
  • 8,263
  • 8
  • 50
  • 53
2

Contradicting the earlier post, I found that in order for source maps to work for content scripts, you actually have to whitelist them in manifest.json like so:

"web_accessible_resources": [
    {
        "resources": [
            "*.map"
        ],
        "matches": [
            ...
        ]
    }
]
Soeren
  • 691
  • 5
  • 12