配置webpack以允许浏览器调试-Configurewebpacktoallowbrowserdebugging

66  

You can use source maps to preserve the mapping between your source code and the bundled/minified one.

您可以使用源映射来保留源代码与捆绑/缩小的源代码之间的映射。

Webpack provides the devtool option to enhance debugging in the developer tool just creating a source map of the bundled file for you. This option can be used from the command line or used in your webpack.config.js configuration file.

Webpack提供了devtool选项，可以在开发人员工具中增强调试功能，只需为您创建捆绑文件的源映射。可以从命令行使用此选项，也可以在webpack.config.js配置文件中使用此选项。

Below you can find a contrived example using the command line to generate the bundled file (bundle.js) along with the generated source map file (bundle.js.map).

下面你可以找到一个人为的例子，使用命令行生成捆绑文件（bundle.js）以及生成的源映射文件（bundle.js.map）。

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

If you open index.html in your browser (I use Chrome but I think it is also supported in other browsers), you will see in the tab Sources that you have the bundled file under the file:// scheme and the source files under the special webpack:// scheme.

如果您在浏览器中打开index.html（我使用Chrome但我认为其他浏览器也支持它），您会在标签Source中看到您拥有file：// scheme下的捆绑文件和源文件特殊的webpack：//方案。

And yes, you can start debugging as if you had the original source code! Try to put a breakpoint in one line and refresh the page.

是的，您可以开始调试，就像您拥有原始源代码一样！尝试将断点放在一行中并刷新页面。

2  

Source maps are very useful as already pointed out.
But sometimes selecting which source map to use could be a pain.

如前所述，源地图非常有用。但有时选择使用哪个源地图可能会很痛苦。

This comment on one of the Webpack source map issue might be helpful for selecting which source map to use based on requirements.

对Webpack源映射问题之一的这一评论可能有助于根据需求选择要使用的源映射。

1  

Have a look Here

看看这里

its a beautifier that deminifies Javascript. at the bottom, it has a list of various plugins and extensions for browsers, check them out.

它是一个美化你的Javascript。在底部，它有一个浏览器的各种插件和扩展的列表，检查出来。

you might be interested in FireFox Deminifier , its supposed to deminify and style your Javascript when its retrieved from the server.

您可能对FireFox Deminifier感兴趣，它应该在从服务器检索时对您的Javascript进行细分和设置样式。

1  

I recommend to debug in VsCode if you're in development.

如果您正在开发中，我建议您在VsCode中进行调试。

Debug experience is very good and all mapped correctly.

调试体验非常好，并且所有映射都正确。

You can follow this post to test.

你可以按照这篇文章进行测试。

0  

I think its better to setup your project using production and development mode https://webpack.js.org/guides/production/ Its also include how to map your code to debug

我认为使用生产和开发模式更好地设置项目https://webpack.js.org/guides/production/它还包括如何将代码映射到调试

devtool: 'inline-source-map'

devtool：'inline-source-map'