CODEWITHSUNDEEP
google-chromegoogle-chrome-extensiongoogle-chrome-devtools
rhashimoto
rhashimoto

Reputation: 15869

Do source maps work for Chrome extensions?

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.

Upvotes: 19

Views: 7680

Answers (5)

Soeren
Soeren

Reputation: 711

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": [
            ...
        ]
    }
]

Upvotes: 4

Ruderer
Ruderer

Reputation: 375

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.

Upvotes: 17

Nik Sumeiko
Nik Sumeiko

Reputation: 8751

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

Upvotes: 4

rhashimoto
rhashimoto

Reputation: 15869

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.

Upvotes: 6

Stephen Collins
Stephen Collins

Reputation: 3653

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.

Upvotes: 9

Related Questions