脚本宝典收集整理的这篇文章主要介绍了webstrom 调试 Vue.js 单页面程序,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack
构建的应用程序
webstrom版本:2017.1
代码:使用 vue-cli 构建的基础单页面应用
由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图
修改 devtool
为 source-map
这是我的开发配置文件 webpack.dev.conf.js
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
这里需要安装一个 chrome 的扩展程序,点击链接进去安装即可
Run
-> Edit Configurations
选择 Javscript Debug
填上 URL 之后,下面的目录映射就会显示出来
设置好断点
,点击右上角的小虫子
之后会打开游览器,当运行到你设置的断点位置时,会唤起 webstrom
以上是脚本宝典为你收集整理的webstrom 调试 Vue.js 单页面程序全部内容,希望文章能够帮你解决webstrom 调试 Vue.js 单页面程序所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。