8

Is it possible to use data-URI source-maps in inline Javascript in HTML script tags?

I've tried a few variations on the following HTML, but none of them seem to produce a usable sourcemap for the embedded JS when the page is loaded in Chrome:

<script type="text/javascript">
/* source code... */

//# sourceMappingURL=data:application/json;base64,/* base64'd inline sourcemap */
</script>

I've also tried stripping sourcesContent, file, and sourceRoot from the generated sourcemap, since I figure those wouldn't apply in this situation. But it doesn't seem to help.

The spec seems to imply that this is possible, or at least considered, since script tags without src attributes are briefly mentioned:

If the generated code is associated with a script element and the script element does not have a “src” attribute, then the source origin will be the page’s origin.

— https://sourcemaps.info/spec.html

However, I am having trouble finding evidence of this being used in the wild, or if this is even possible. Can anyone help shed some light on this?

Improve this question
3
  • Can you use //# sourceURL=? Commented Apr 15, 2020 at 18:29
  • //# sourceURL= correctly matching the sourcemap object does not seem to work. Commented Apr 15, 2020 at 18:30
  • I tried creating fake sourceURLs like page.html-1 for the first <script> tag on a page, as well as just using page.html directly Commented Apr 15, 2020 at 18:31

1 Answer 1

Reset to default
8

With inlined scripts, it is possible to add inlined sourcemaps too. It is done as you state above. Although type="text/javascript" is optional.

<script type="text/javascript">
/* source code... */

//# sourceMappingURL=data:application/json;base64,/* base64'd inline sourcemap */
</script>

The issue I had after inlining the sourcemap was that my inlined script was nameless. So when trying to debug in Chrome Dev Tools, I was unable to open the script in the Sources tab to set debug points. I could not find the script at all. Even checking the HTML page where the scripts are embedded did not help as the inlined scripts are not part of the original HTML source. The inlined scripts are added after the HTML is loaded. I believe this is how PreloadJS loads JavaScript via XHR.

To solve this, you can use //# sourceURL=someFile.js which will apply the name "someFile.js" to your inlined script. You could use any name here, it does not need to be the name of the original source.

Now when you search in Sources tab you will find the script as "someFile.js", you can set debug points and you will be directed to the original source file, provided your sourcemap is correct before base64 encoding.

Below is a link to a resource that describes the behaviour of sourceURL. The entire article is actually really interesting. If you have 5 mins, give it a read. https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl

This MDN article also shows the use of the sourceURL, albeit in eval'd JS code.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hey @Kbam7 I know long time passed since your comment but I guess it worths a shot - I'm having the same issue you wrote about in here, even tho putting //# sourceURL=someFile.js is not helping (or I didn't understand where to put it). I have two files - index.js (with //# sourceMappingURL comment) & index.html, and I tried to place the script code in a <script> tag inside the html file, exactly like you showed in your post. It works, the JS is inlined the HTML file, but the sourcemap comment is like doesn't exist - it has no influence when I open the devtools :/ Thnx dude
@MatanD make sure to add //# sourceURL=someFile.js to the end of your JavaScript script. For example, after the //# sourceMappingURL=xxx. Also make sure that your sourcemap is generated correctly and is base64 encoded. Apart from that I'm not sure how else I could assist. Best of luck to you!
Dead link for html5rocks.com/en/tutorials/developertools/sourcemaps/… - web archive link: web.archive.org/web/20220125022251/https://www.html5rocks.com/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.