[Pkg-javascript-devel] Bug#922824: sourceMappingURL in minified js seems to point to the wrong location

Thu Feb 21 12:18:52 GMT 2019

On Thu, Feb 21, 2019 at 11:02:48AM +0100, Paolo Greppi wrote:

> sourceMappingURL is related to source maps, i.e. a way to make the
> readable JS source available while you debug minified code in the
> browser
> it is possible that the libjs-bootstrap4 source maps are broken, but
> that comment should not impact routing the request to the minified
> file on disk

Hi, thanks for looking into this. I think I've been unclear: the problem
is not when serving the javascript files, but when the browser looks for
the .map file.

In particular, the pointer to the map file in the .min.js, seems to
point to a .map file that is in the dist/js/ directory relative to the
bootstrap.min.js file:

$ tail -1 /usr/share/javascript/bootstrap4/js/bootstrap.min.js 
//# sourceMappingURL=dist/js/bootstrap.js.map

I would understand that that comment should rather be:
//# sourceMappingURL=bootstrap.js.map

For example, looking at /usr/share/javascript assets in my system,
bootstrap4 seems to be the only one that does not point to .map files
just next to the minified versions:

$ find -L  /usr/share/javascript/ -type f | xargs grep sourceMappingURL
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=xterm.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=CompositionHelper.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=EventEmitter.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Viewport.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Clipboard.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=CircularList.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=EscapeSequences.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=InputHandler.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Parser.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Renderer.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Linkifier.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=CharMeasure.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Browser.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Mouse.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Charsets.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=DomElementObjectPool.js.map
/usr/share/javascript/xterm/xterm.js://# sourceMappingURL=Generic.js.map
/usr/share/javascript/underscore/underscore.min.js://# sourceMappingURL=underscore.min.js.map
/usr/share/javascript/backbone/backbone.min.js://# sourceMappingURL=backbone.min.js.map
/usr/share/javascript/bootstrap/css/bootstrap.css:/*# sourceMappingURL=bootstrap.css.map */
/usr/share/javascript/bootstrap/css/bootstrap-theme.css:/*# sourceMappingURL=bootstrap-theme.css.map */
/usr/share/javascript/bootstrap4/css/bootstrap.css:/*# sourceMappingURL=bootstrap.css.map */
/usr/share/javascript/bootstrap4/css/bootstrap-reboot.css:/*# sourceMappingURL=bootstrap-reboot.css.map */
/usr/share/javascript/bootstrap4/css/bootstrap-grid.css:/*# sourceMappingURL=bootstrap-grid.css.map */
/usr/share/javascript/bootstrap4/js/bootstrap.bundle.min.js://# sourceMappingURL=dist/js/bootstrap.js.map
/usr/share/javascript/bootstrap4/js/bootstrap.min.js://# sourceMappingURL=dist/js/bootstrap.js.map

Here is a way to reproduce the issue:

$ mkdir /tmp/922824
$ cd /tmp/922824
$ cp -Lr /usr/share/javascript/  .
$ cat > index.html  <<EOT
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/javascript/bootstrap4/css/bootstrap.min.css">
    <script src="/javascript/jquery/jquery.min.js"></script>
    <script src="/javascript/popper.js/umd/popper.min.js"></script>
    <script src="/javascript/bootstrap4/js/bootstrap.min.js"></script>
    <script src="/javascript/underscore/underscore.min.js"></script>
  </head>
  <body>
    <h1>Test</h1>
    <p>It works!</p>
  </body>
</html>
EOT
$ python3 -m http.server 8000

Visit localhost:8000 with chrome: it works!, then press F12 to open the
javascript console: it triggers loading the .map file. The http.server
log that I get is this:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /javascript/bootstrap4/css/bootstrap.min.css HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /javascript/popper.js/umd/popper.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /javascript/jquery/jquery.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /javascript/bootstrap4/js/bootstrap.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /javascript/underscore/underscore.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2019 13:13:08] code 404, message File not found
127.0.0.1 - - [21/Feb/2019 13:13:08] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [21/Feb/2019 13:13:09] code 404, message File not found
127.0.0.1 - - [21/Feb/2019 13:13:09] "GET /javascript/bootstrap4/js/dist/js/bootstrap.js.map HTTP/1.1" 404 -
127.0.0.1 - - [21/Feb/2019 13:13:09] "GET /javascript/underscore/underscore.min.js.map HTTP/1.1" 200 -

Note the last lines: bootstrap.js.map is a 404, because the url to the
map file is generated as dist/js/bootstrap.js.map relative to the
location of the bootstrap.min.js file, which does not exist.

I added underscore for reference: the .map is found, because the
url provided works relative to the underscore.min.js file:

$ grep sourceMap javascript/underscore/underscore.min.js
//# sourceMappingURL=underscore.min.js.map

On Thu, Feb 21, 2019 at 11:05:00AM +0100, Jonas Smedegaard wrote:

> Using source-maps for browsing into sources requires somehow serving 
> those source files, and hinting e.g. with the "SourceMap" http header 
> where they are located.
> 
> I imagine it would be possible to setup a static Apache2 hint to point 
> to the sources served at https://sources.debian.org/
> 
> Does that make sense?  If so, then I believe this "bug" is more lack of 
> documentation than the Boostrap package being wrong.
> 
> Thanks a lot for your interest in these details, and sorry this was not 
> already in a more polished state,

The .map files are already included in the debian packages and are not
so big; bringing in sources.debian.org is a digression I'm not sure I
can follow. Maybe my bug report wasn't that clear and I led you on some
wild goose chase? I hope I made it clearer now.

For my use the sourceMappingURL comment is a browser-side thing, and
browser-side, at the moment, bootstrap4 is set up so that the browser
doesn't find the .map files, while it finds them for other packages: see
the bootstrap4 and underscore comparison in my example above.

I don't know if node.js also makes use of sourceMappingURL, and if so,
if there can be issues harmonising the two things. Browser-side,
however, the sourceMappingURL pointer in bootstrap4 seems incorrect to
me at the moment.

Enrico

-- 
GPG key: 4096R/634F4BD1E7AD5568 2009-05-08 Enrico Zini <enrico at enricozini.org>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 833 bytes
Desc: not available
URL: <http://alioth-lists.debian.net/pipermail/pkg-javascript-devel/attachments/20190221/62c40be9/attachment-0001.sig>