webstrom调试vue

webstrom调试vue

weixin_33896726

第一种，使用vue插件

1. 下载插件：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

2. 这样直接run一个vue项目，你就会看见插件标亮了

3. 打开调试模式，你就会看见最后有个vue标记，打开能看见当前vue页面渲染相关数据

第二种，使用webstrom调试

1. 下载插件 https://chrome.google.com/webstore/search/jetbrains?utm_source=chrome-ntp-icon

2. 打开webstrom Debugger, 记住端口号

3. 打开刚才安装的插件，选项，填入刚才看见的端口号

4. 添加一个debug配置 
5. 这样运行一个vue项目，并且在页面上右键，就开启了调试模式 

利用webstrom调试Vue.js单页面程序的方法教程

 更新时间：2017年06月06日 10:38:02   转载 作者：Enda  

这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。

 

前言

使用 webstrom 调试 Vue.js 单页面程序，理论上来说应该是支持所有用 webpack 构建的应用程序

webstrom 版本：2017.1

代码：使用 vue-cli 构建的基础单页面应用

修改 webpack 配置

由于 webpack 把所有文件全部打包到一起，所以我们需要 webpack 提供给我们一个源地图

修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。