Google chrome 使用webpack sourcemaps时未命中chrome中文件中的断点
我在source.js文件(通过源代码映射加载)中有一个断点,当我在source选项卡中使用chromedev工具指向in时,它不会被命中。有时,如果我点击格式化按钮{},我可以让它们被点击,但这是一次又一次的点击 有什么想法吗Google chrome 使用webpack sourcemaps时未命中chrome中文件中的断点,google-chrome,webpack,breakpoints,Google Chrome,Webpack,Breakpoints,我在source.js文件(通过源代码映射加载)中有一个断点,当我在source选项卡中使用chromedev工具指向in时,它不会被命中。有时,如果我点击格式化按钮{},我可以让它们被点击,但这是一次又一次的点击 有什么想法吗 "devDependencies": { "autoprefixer-loader": "^3.1.0", "babel-core": "^6.1.20", "babel-loader": "^6.1.0", "babel-prese
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"babel-core": "^6.1.20",
"babel-loader": "^6.1.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-stage-1": "^6.3.13",
"css-loader": "^0.23.1",
"material-ui": "^0.14.0",
"style-loader": "^0.13.0",
"stylus-loader": "^1.5.1",
"tape": "^4.2.2",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"babel-polyfill": "^6.1.19",
"moment": "^2.11.2",
"normalize.css": "^3.0.3"
}
webapck:
module.exports = {
entry: [
'babel-polyfill',
'./app/app.js'
],
output: {
publicPath: '/',
filename: 'dist/main.js'
},
debug: true,
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'app'),
loader: 'babel',
query: {
presets: ['es2015']
}
},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"]
}
};
注释devtool
//devtool: 'source-map',
添加到插件
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
include: ['app.js'],
exclude: ['vendor.js'],
columns: false
})
因此,这似乎是一个问题
临时解决方案是将其设置为将devtool
选项设置为sourcemap
或inlinesourcemap
,但请注意,这将导致编译时间增加
从Webpack3开始,问题有所改善,但问题在于Chrome和Webpack之间的相互作用以及它们不断变化的代码基础
使用Webpack 3,我成功地完成了以下配置:
devtool:“廉价模块源代码映射”
您能详细介绍一下它的功能和工作原理吗?如果我正确理解了问题所在,chrome在某些情况下无法设置断点,列(默认为true)当忽略SorceMaps中的假列映射并使用更快的SourceMap实现时。对于我来说,可以使用devtool:“廉价源映射”
来实现列,这似乎与devtool:“廉价模块源映射”
得到的结果相同?在官方文档中注释出devtool
并使用插件是没有任何意义的。可能与TLDR有关:尝试“内联源代码映射”