Javascript - Source Map

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript)

1 - About

A source map provides a mapping between the original and the build source code (combined/minified)

The location coordinates are by line and column number in the source map.

Source maps works for styling as well. See CSS - Source Map

With source maps, it is possible to single step through or set breakpoints in the original source.

Source maps can be generated with two kinds of inlining:

  • Inlined source maps: the generated JavaScript file contains the source map as a data URI at the end (instead of referencing the source map through a file URI).
  • Inlined source: the source map contains the original source (instead of referencing the source through a path).

3 - Library and IDE

3.1 - VsCode

If no source map exists for the original source or if the source map is broken and cannot successfully map between the source and the generated JavaScript, then breakpoints show up as unverified (gray hollow circles).

See VsCode - Javascript

Advertising

3.2 - Webpack

See https://webpack.js.org/guides/development/

https://webpack.js.org/configuration/devtool/

This option controls if and how source maps are generated.

You can see that the source map file is emitted with the dev server

Hash: db8af9ffcce7bc166a1d
Version: webpack 3.6.0
Time: 2678ms
          Asset     Size  Chunks                    Chunk Names
      bundle.js  1.07 MB       0  [emitted]  [big]  main
  bundle.js.map  1.09 MB       0  [emitted]         main

Running webpack through:

  • The webpack-dev-server. The map are emitted in memory and then then you don't see them in explorer.
  • The webpack cli (./node_modules/.bin/webpack.cmd), the source map comes into the output directory

-d is shorthand for –debug –devtool source-map –output-pathinfo

4 - Documentation / Reference

web/javascript/source_map.txt · Last modified: 2019/02/16 17:40 by gerardnico