How do web browsers find a source map for a JavaScript file?

Question

The following article explains that in order to find the source map of a JavaScript file such as jQuery, the web browser looks inside the JavaScript code and looks for the line containing the sourceMappingURL directive embedded in a JavaScript comment. For instance, the jQuery 1.9.0 minified file contains such a directive at the end of a file. However, the more recent jQuery 1.11.1 minified distribution does not contain such a directive, but a jQuery 1.11.1 map file is also distributed with this (final stable jQuery 1) version. So how does the web browser find the map file for the minified file.

I guess the convention of web browsers looking for the sourceMappingURL directive was dropped in favor of following the naming convention of looking for a file of the same name, with .js replaced by .min. Is this what happened?

According to the documentation for the recently released Firefox Developer Edition, such browser still seems to be looking for the sourceMappingURL directive.

Thanks.

Answer 1

The reasoning behind dropping source mapping from recent versions is described on the JQuery blog

This release does not contain the sourcemap comment in the minified file. Sourcemaps have proven to be a very problematic and puzzling thing to developers, spawning hundreds of confused developers on forums like StackOverflow and causing some to think jQuery itself was broken.

We’ll still be generating and distributing sourcemaps, but you will need to add the appropriate sourcemap comment at the end of the minified file if the browser does not support manually associating map files (currently, none do). If you generate your own jQuery file using the custom build process, the sourcemap comment will be present in the minified file and the map is generated; you can either leave it in and use sourcemaps or edit it out and ignore the map file entirely.

We hope to bring back and improve sourcemap support in the future, but at the moment neither the design nor the implementation seem suited for situations like jQuery’s, where there are widely distributed files on CDNs. We’d like sourcemaps (and browsers supporting them) to gracefully handle situations like file renaming or missing files. See our bug ticket for more information.