webstrom 调试 Vue.js 单页面程序

前言

使用 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 的扩展程序，点击连接进去安装便可

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related

新建一个 debug

Run-> Edit Configurations

选择 Javscript Debug

填上 URL 以后，下面的目录映射就会显示出来

运行 debug

设置好断点，点击右上角的小虫子

以后会打开游览器，当运行到你设置的断点位置时，会唤起 webstrom