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

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
• More Devtool documentation

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:

• https://webpack.js.org/guides/development/#using-source-maps
• https://webpack.js.org/configuration/devtool/

Typescript

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

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

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.