Bug 107939 – Web Inspector: SourceURL and SourceMappingURL together in evalled code

• Status: RESOLVED
• Resolution: INVALID
• Component: Web Inspector (Deprecated)

[Guy Bedford]

I'm interested in seeing how source maps can work for evalled script. This is in order to bring support to the RequireJS CoffeeScript parser. One way I've been experimenting with this is through data-uris in the @ sourceMapperURL property.

When testing this with eval code, it seems that this method is working correctly. The only issue I have is that the @ sourceURL property is displaying the js file not the coffeescript file in the sources window, even though the debug line points correspond to the coffeescript file. If this could be fixed so that when a @ sourceURL and @ sourceMapperURL are both present in evalled code, the @ sourceURL code is displayed in full, that would be great.

Example repo here - https://github.com/guybedford/cs-source-maps  (test-eval.html is the sample page)

[Pavel Feldman]

Created attachment 184946 [details]
Patch

[Vsevolod Vlasov]

Comment on attachment 184946 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=184946&action=review

> Source/WebCore/inspector/front-end/CompilerScriptMapping.js:97
> +        if (!sourceMap)

I like this. The reason it was not here before is that it is currently done in WebInspector.DebuggerScriptMapping. I think we should remove the check there and move it here.

> Source/WebCore/inspector/front-end/CompilerScriptMapping.js:178
> +            var baseURL = sourceMapURL.startsWith("data:") ? scriptURL : sourceMapURL;

You could use ParsedURL.isDataURL() instead.

[Pavel Feldman]

Committed r140965: <http://trac.webkit.org/changeset/140965>

[Pavel Feldman]

Note that https://github.com/guybedford/cs-source-maps has it a bit wrong, it should have test-eval.js as the //@ sourceURL value.

[Guy Bedford]

(In reply to comment #4)
> Note that https://github.com/guybedford/cs-source-maps has it a bit wrong, it should have test-eval.js as the //@ sourceURL value.

In the case of compiling the CoffeeScript in the browser, this file wouldn't exist. I was under the impression that for any source, the @ sourceURL was the primary source file, not the compiled one?

[Guy Bedford]

Thanks for the prompt assistance with this. I'm showing my ignorance here, but when would I expect to be able to test this out in Chrome Canary?

[Pavel Feldman]

You should be able to test this now. It typically takes ~2 days for a change to get into Canary.

[Pavel Feldman]

> In the case of compiling the CoffeeScript in the browser, this file wouldn't exist. I was under the impression that for any source, the @ sourceURL was the primary source file, not the compiled one?

@ sourceURL defines an alias (string) that will be used as a script name in the UI. It covers the "eval" part of the story. Once you define a name, it will be no different from loading it with that name from the server. Then you have a source map defined for it that maps it to the CoffeeScript file. It is essential that CoffeeScript file and the JS it produced have different names. AFAIR they were matching in your case.

[Guy Bedford]

Ok, so the @ sourceURL should match the "file" property in the @ sourceMapping URL?

I've updated the repo to reflect this using a "test-built.js" alias as the @ sourceURL and "file" property in the map, but am still seeing the JS file loaded with the break points from the JS file as well.

[Guy Bedford]

I'm still struggling with getting eval to work with a source map data-uri. I am seeing some quite odd behaviour in my testing (which differs between Chrome and Canary), and have tried various permutations of options.

Any help with this would be much appreciated to get the RequireJS CoffeeScript plugin working with source maps support (https://github.com/jrburke/require-cs/issues/42).

The current source map I am using looks like:
var map = {
version : 3,
file: "/module.js",
sourceRoot : "",
sources: ["/module.coffee"],
sourcesContent: ["define [] () -> \n   test: 'coffee'"],
mappings: "(as calculated by CoffeeScript compiler)"
}

I am then converting this into a base64 data-uri and including it as the following:

eval(source + '\n//@ sourceMappingURL=data:application/json;base64,' + btoa(map) + '\n//@ sourceURL=/module.coffee);

This displays the correct file in sources in the current version of Chrome, and the debug points seem to correspond to the correct lines, but when debugging it crashes the browser.

In Canary, it reverts to displaying the JavaScript instead of the CoffeeScript as it does in Chrome.

The project is located at https://github.com/guybedford/require-cs.

Any tips would be really helpful, as I've kind of hit a dead end here. If you can point me to someone to ask, that would be appreciated as well. Thanks for your time!