浅谈vue+webpack项目调试方法步骤


Posted in Javascript onSeptember 11, 2017

题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候。

从webpack开始

直接进入正题。有人觉得vue项目难调试,是因为用了webpack。所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。

-sourcemap

webpack配置提供了devtool这个选项,如果设置为 ‘#source-map',则可以生成.map文件,在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择: 戳这里

浅谈vue+webpack项目调试方法步骤

这里不同的配置有些不同的效果,比如是否保留注释、保留行信息等,具体每一条什么意思这里不详解释,有兴趣的童鞋可以参考这篇文章

官方默认的是用 ‘#cheap-module-eval-source-map'

devtool: '#cheap-module-eval-source-map'

设置好之后,在vue项目调试的时候,代码里面标注debugger的时候就能看到对应的代码了,非常方便。

浅谈vue+webpack项目调试方法步骤

或者,直接找到对应的文件。在chrome用 'ctrl(command) + p‘,输入文件名,可以找到对应的源代码。

浅谈vue+webpack项目调试方法步骤

打断点:

浅谈vue+webpack项目调试方法步骤

需要注意的是,这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。

-vue-cli

vue家的项目脚手架,推荐使用。vue-cli老家在这里

vue-cli可以帮我们自动搭建项目,首先npm全局安装

npm install -g vue-cli

然后创建一个新的项目

vue init webpack my-project

一路回车,搞定。(更多配置项请参考上面给出的vue-cli链接)

这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)

浅谈vue+webpack项目调试方法步骤 

从bulid文件夹里面就大概能看出:

  • webpack.dev.conf: 开发模式用
  • webpack.prod.conf: 生产模式用

其中,开发模式提供了devtool为'#cheap-module-eval-source-map',生产模式根据config文件夹下的productionSourceMap变量控制是否使用。

若为true,则devtool为'#source-map'

其他使用方法一致。非常方便。

线上调试

平时开发的时候,我们用webpack的热加载,可以省去挂载调试的步骤,非常方便。但是发布后部署到服务器上,就失去了这个本地优势。

如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息,而且发布一个包看代码量可能需要等待不等,这个方案不实际。但是如果挂载的是热加载到端口下的文件的话,这个问题就很好办了。

-热加载

在此之前,先来分析一下webpack的热加载原理。

对项目抓包可以发现这么一个文件:__webpack_hmr

浅谈vue+webpack项目调试方法步骤

这是webpack热加载的服务器推送事件,eventsource类型,功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接,服务器发送更新数据回来append到流的末端,前端读取最新append的数据,然后动态的更新页面上的东西。

接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件,触发热加载,再抓个包,发现有两个.hot-update.json和一个.hot-update.js文件

浅谈vue+webpack项目调试方法步骤

这些具体做了些啥我不知道,这里就不深究了。应该是根据json里面的数据,达到一个准确更新的效果。

所以热更新其实就是监听服务器上的数据,有修改的话服务器发送数据过来,前端把数据拿来后替换到页面上这么一个过程。

-AutoResponder

接下来谈谈线上挂载测试,这里推荐一款软件:fiddler

fiddler有一个功能叫做AutoResponder,它可以将一个地址指向另一个地址。之所以用这个软件,是因为它能匹配正则,非常方便。

浅谈vue+webpack项目调试方法步骤

上一节说到,webpack热加载用到了这几类文件

  • __webpack_hmr
  • xxxxxxxxxxx.hot-update.json
  • xxxxxxxxxxx.hot-update.js

和.html以及其他.js文件一起,我们就可以把这几个类型的文件挂载上去,达到一个远程热更新的效果,设置如下:

假设:

线上地址:http://192.168.9.189

本地服务器地址:http://localhost:8080/

为了照顾到接口,不能用*全匹配(上图fiddler里最后一条灰色的)

request matches respond with
EXACT:http://192.168.9.189/index.html http://localhost:8080/
EXACT:http://192.168.9.189/__webpack_hmr http://localhost:8080/__webpack_hmr
regex:http://192.168.9.189/([^.]+).js$ http://localhost:8080/$1.js
regex:http://192.168.9.189/(.+).hot-update.json$ http://localhost:8080/$1.hot-update.json
regex:http://192.168.9.189/(.+).hot-update.js$ http://localhost:8080/$1.hot-update.js

打开debugger就能发现vue的devtools出来了

wap端-技巧分享

手机上调试也没那么麻烦。和电脑一样在同一个局域网下,输入地址就能看到效果了。最近在做一个wap端的vue项目,这里谈谈一些自己用到的一些小技巧。

  • iphone可以用safari来检查元素;android可以用chrome远程调试
  • wifi下的http代理可以转发手机的网络请求,挂到本机上可以抓包数据

浅谈vue+webpack项目调试方法步骤

手机加载慢的时候,同样可以使用http代理转发到主机上,再访问速度就比较快了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JS定义类的六种方式详解
May 12 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 #Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 #Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 #Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 #Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 #Javascript
简单谈谈JS中的正则表达式
Sep 11 #Javascript
详解Vue双向数据绑定原理解析
Sep 11 #Javascript
You might like
网站当前的在线人数
2006/10/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python正则表达式常用函数总结
2017/06/24 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
服装厂厂长职责
2013/12/16 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
销售总经理岗位职责
2014/03/15 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
关于责任的演讲稿
2014/05/20 职场文书
中学清明节活动总结
2014/07/04 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers