前言
使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack
构建的应用程序
webstrom版本:2017.1
代码:使用 vue-cli 构建的基础单页面应用
修改 webpack 配置
由于 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 的扩展程序,点击链接进去安装即可
新建一个 debug
Run
-> Edit Configurations
选择 Javscript Debug
填上 URL 之后,下面的目录映射就会显示出来
运行 debug
设置好断点
,点击右上角的小虫子
之后会打开游览器,当运行到你设置的断点位置时,会唤起 webstrom
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。