利用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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
网络传输协议(http协议)
Nov 18 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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实现查看邮件是否已被阅读的方法
2013/12/03 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery 选择器详解
2015/01/19 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python怎么提高计算速度
2020/06/11 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
党章学习思想汇报
2014/01/14 职场文书
幼师求职信
2014/06/23 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
Python os和os.path模块详情
2022/04/02 Python