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

user_4668401 0
Viewed 303

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:

enter image description here

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?

npm angular webpack node.js javascript
3 Answers

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.

user_10265020

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.

user_62522370

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.

user_11071100
Related