webpack 调试模式(sourcemap) chrome无法断点

目前项目中采用的webpack 作为前端构建方式。
使用es6+webpack+react的时候发现一些问题

1.在chrome中 调试 有些行断点打不上,会莫名其妙跑到其他行
2.一些错误信息来自bundle.js

调查应该是sourcemap解析的问题,目前我采用的是
devtool :"#source-map" 或 devtool :"#inline-source-map"

这个问题应该是sourcemap 生成的列信息导致的,就算 sourcemap 没有列,有些浏览器引擎(例如 v8) 也会给出列信息.大部分情况我们调试并不关心列信息.

我们改变下sourcemap模式
devtool:'cheap-source-map',
devtool: 'cheap-module-source-map'
这种 模式下 会 不显示列信息。 调试ok了

另外一种测试
devtool: '#inline-eval-cheap-source-map',

也可已这样:


webpack 调试模式(sourcemap) chrome无法断点_第1张图片
Paste_Image.png

可以看下老外解决方案
http://stackoverflow.com/questions/35637324/breakpoints-in-files-in-chrome-not-being-hit-when-using-webpack-sourcemaps

更加详细问题描述来自isuss
https://github.com/webpack/webpack/issues/2145

你可能感兴趣的:(webpack 调试模式(sourcemap) chrome无法断点)