How or Where does the browser get the source files for "sourcemapped" javascript files?

Question

I am beginning work on an existing project, which is built using angular JS. When I open chrome dev tools "source" view, the browser tells me:

Source map detected...

and I see this:

Where

inline.bundle.js
main.bundle.js
etc...

are compiled files, whose original files are in the source directories Ive circled, e.g.

ng://
webpack://
etc..

The browser doesn't show any network requests for these ng://, webpack:// files, so my question is, where do these files come from? how is the browser obtaining this data?

Im guessing the server delivered a "sourcemap" file/s to the browser, which contained all the original source code and its corresponding compiled code? then the browser parsed the sourcemap and essentially generated a "virtual" file tree for these files - and thats why there is no network request? Where do these "files" come from?

Madd0g · Accepted Answer · 2017-10-03 22:48:31Z

1

The sourcemaps could be baked into the original JS bundle, though it's not usually done in production.

It could also be an external file (usually referenced on the last line of the bundle).

Webpack allows all these different options through the devtool config option.

answered Oct 3, 2017 at 22:48

Madd0g

4,0315 gold badges41 silver badges60 bronze badges

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

2 Comments

the_velour_fog Over a year ago

Thanks, I dont see anything that looks like sourcemap data in any of the output files, also this: //# sourceMappingURL=vendor.bundle.js.map is at the bottom of the file vendor.bundle.js.map . But there doesn't seem to be any vendor.bundle.js.map file shown in the network requests or in the source view.

Keith Over a year ago

It would at some point loaded that .map file. Maybe your not seeing it now due to cache.

David · Accepted Answer · 2017-10-03 23:00:37Z

If you look through angularjs, webpack etc. You should see files ending with a .map extension. When you load a webpage the server sends a header with the url of the source map. From the specification the header looks like:

SourceMap: <url>

Source maps have to follow a specific format.

{
"version" : 3,
"file": "out.js",
"sourceRoot": "",
"sources": ["foo.js", "bar.js"],
"sourcesContent": [null, null],
"names": ["src", "maps", "are", "fun"],
"mappings": "A,AAAB;;ABCDE;"
}

The specification is available on google docs https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1

Source maps were introduced for debugging purposes so that you could see where in your source an error was coming from. For example you could have a load of sass files compiled to css and have no idea where the css was coming from in the sass files.

Drazen Bjelovuk · Accepted Answer · 2021-12-04 00:41:39Z

0

The association with the source map is typically denoted by a comment at the end of the compiled file. E.g.:

main.bundle.js

//# sourceMappingURL=main.bundle.js.map

The source map file then contains the original file paths as an array in its sources property (for the browser to organize in its explorer view), along with their actual source content under the sourcesContent property. The line/column numbers are associated using a fairly complex derivation of base64 strings, defined under the mappings property.

answered Dec 4, 2021 at 0:41

Drazen Bjelovuk

5,5626 gold badges44 silver badges68 bronze badges

Collectives™ on Stack Overflow

How or Where does the browser get the source files for "sourcemapped" javascript files?

3 Answers 3

2 Comments

Comments

main.bundle.js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

main.bundle.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related