Javascript - Source Map (Map File)

About

A source map provides a mapping between the original and the build source code.

The bundler that combined/minified the source code creates the source map

This is an important element used in a debug session in order to be able to stop at breakpoint.

The location coordinates are by line and column number in the 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).

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

Library and IDE

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).

Vscode Source Map Pb

See VsCode - Javascript

Webpack

The devtool option controls if and how source maps are generated for devtool.

module.exports = {
    mode: 'development',
    entry: './js/index.js',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

where the devtool value may be:

  • source-map - a full source map is emitted
  • inline-source-map extract source maps (for instance created from typescript) and include them in the final bundle
  • cheap-eval-source-map

Running webpack through:

  • The webpack cli, the source map comes into the output directory
webpack -d

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

  • The webpack-dev-server. The map are emitted in memory and then then you don't see them in explorer. 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

See:

Typescript

The sourceMap option of the compiler controls the generation of a source map.

{
  "compilerOptions": {
   ..........
    "sourceMap": true,
    ........
  }

Management

Devtool Enable / Disable

The devtool is a set of web developer tools embedded in every browser

  • Chrome: Open the settings and check/uncheck the “Enable source maps” option.

Chrome Devtool Enable Disable Source Map

Documentation / Reference





Discover More
Chrome Enable Source Map
CSS - Source Map

For each CSS file it produces, a CSS preprocessor generates: a source map file (.map) and the compiled CSS. The source map file is a JSON file that defines a mapping between: each (compiled|generated)...
Welcome From Browser
How to develop, publish and use a javascript library ?

A step by step tutorial on how to create and publish a javascript library
Javascript Debugger Keyword In Devtool
Javascript - Debugger

in Javascript source map file In the debugger window, you can set breakpoints in the JavaScript code. If you put the debugger keyword in a script and that you open the devtool, browser debugger...
React - Typescript

typescript integration in React Not all packages include declaration files. TypeScript will looks in the @types/react package. Install typescript and ts-loader...
Web - Build Operations / Build Pipeline

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, ...) Javascript (Javascript Module, React Jsx,...



Share this page:
Follow us:
Task Runner