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


Posted in Javascript onJune 06, 2017

前言

使用 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 之后,下面的目录映射就会显示出来

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

运行 debug

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

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

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

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

总结

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

Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 #Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 #Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 #Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
You might like
php预定义常量
2006/12/25 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
php写app用的框架整理
2019/09/29 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
浅析python实现动态规划背包问题
2020/12/31 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
竟聘演讲稿范文
2013/12/31 职场文书
高三体育教学反思
2014/01/29 职场文书
食品安全责任书
2014/04/15 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
迟到检讨书
2015/01/26 职场文书
服务员岗位职责
2015/02/03 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python