使用Fiddler调试手机程序 | 前端和运维利器
我的图书馆
使用Fiddler调试手机程序 | 前端和运维利器
作者：Uncle Chen原文：http://unclechen.github.io//使用前端开发利器Fiddler调试手机程序/Fiddler是一个非常好用的web前端调试工具，它能记录客户端和服务器的http和https所有请求和响应，允许监视、设置断点，修改输入输出数据。与其他的抓包工具，例如wireshark、firebug等不同，Fiddler可以允许你在调试CGI接口时，修改返回的数据，也就是可以构造请求和模拟响应。此外，Fiddler还可以支持模拟低速网络（如手机网络）过滤请求等等，安装了Willow插件以后你还可以轻松实现修改Host等操作。可惜的是目前Fiddler只支持Windows系统，没办法，毕竟是基于.net框架开发的嘛。1. Fiddler的安装和配置下载安装：官网下载Fiddler：/download/fiddler注意：由于Fiddler4是基于.net框架的，所以需要在自己的电脑上先安装.NetFrameWork，安装好了以后，就可以下载Fiddler4进行安装了。配置：打开将Fiddler，在菜单中选择Tools-&Fiddler Options，如下图所示把Fiddler设为全局的监听，再把浏览器或者软件的的http proxy设置为127.0.0.1，端口设为8888。选择ok后，关闭Fiddler并重新打开Fiddler，就可以用Fiddler抓取本地所有的流量了。2. 抓取手机数据包抓取手机数据包和抓去电脑上的数据包一样，只需要将手机的代理设置为Fiddler。具体操作：让手机连接的wifi和你安装Fiddler的电脑处于同一网段，然后在手机的wifi设置中，选择高级选项，设置代理，指向你电脑的ip，端口设置为8888即可。如上图所示，我电脑的ip是10.4.66.135，于是在手机连上wifi以后，勾选高级选项，代理选择手动，代理服务器主机名输入10.4.66.135，代理服务器端口输入8888，点击保存即可。配置好以后，手机上所有网络请求和响应都会走Fiddler代理，这样就可以分析手机的网络流量了。我们在手机上打开一个大家熟悉的地址，可以看到抓取的数据流量包了，Fiddler的工具栏看起来很复杂，如下图所示，稍微熟悉一下之后就会发现其实很简单。左侧界面是数据包按照时间顺序的列表，右边是对应每一个包的解析，我们可以看到详细的http header头文件以及表单、json数据等等。3. 修改网络响应response有的时候我们调试程序的时候，需要服务器返回新格式的数据，或者有时候发现原来的服务器上的某个js/css文件有问题，需要修改。如果这时我们要求同事帮忙修改文件，重新发布的话，将会非常麻烦，也可能会影响到现有的线上环境。对大公司来说，这不仅效率低下，而且一不小心就可能酿成大事故。所以通常的做法是在测试环境进行修改，然后等测试通过以后，再部署到线上环境中去。但是有了Fiddler之后，我们可以直接在本地客户端进行调试了。通过Fiddler修改HTTP数据的特性，替换服务器发给我们的回包，等本地客户端调试通过以后再确认发布。说了一堆没用的，我们直接进入实战。使用Fiddler修改网络响应包有两种操作：使用AutoResponder对回包进行重定向使用Willow插件管理重定向规则这两种操作方法是一样的，都是对服务器返回的数据包（下面简称回包）进行规则的设置，使得回包被替换成我们指定的文件。不过Willow插件用起来比较方便，所以我们一般都会安装Willow插件。现在我们以Willow插件为例介绍这个非常好用的回包替换功能，我这里安装的是1.4版的Willow，支持Fiddler4.0版本。安装了Willow插件的Fiddler，在右侧的网络数据解析界面上会多出一个Willow标签菜单，如下图所示。从图上看出，Willow的图标是一个小树，当回包重定向功能开启时，这颗小树会变成绿色，普通状态下小树是灰色的。在下面的列表中，Fiddler、Temp 1、unclenought等都是一个一个的Willow project，这些project对应的是一组一组的规则，这里我们添加一个unclenought的project。在Willow菜单内右键可以选择Add Project、Edit Project以及Add Rule等等。其中我们最常用就是Add Rule功能了，通过这个我们可以设置一些规则，将回包进行重定向。右键选择Add Rule以后，我们在Match栏填写正则表达式来匹配网络请求，Action栏选择我们本地的一个文件来替换match栏对应的请求的回包,这里我选择了自己写的一个hello fiddler.html测试文件。记住，规则保存好了以后，必须勾选Willow菜单左上角的小勾，使得回包替换功能开启，确保Willow小树的图标变成了绿色的！hello fiddler.html文件的代码如下：此时我们在打开手机浏览器输入以后，不会再看到正常的百度首页，而是本地文件的hello fiddler.html测试页面了。再回到Fiddler左侧的流量包界面，我们可以看到命中的数据包被标注为黄色了。因此我们判断自己定义的规则是否生效，可以看看数据包是不是被标为黄色了。此外由于，Fiddler回包替换的规则支持正则表达式，所以有时写的规则不一定是完全正确的，大家要多检查下rule中设置规则。此外Fiddler还支持修改Host的功能，通过Willow插件可以一键修改，方法也是在Willow菜单下，右键点选一个project，选择Add Host，填写需要替换domain和ip地址即可。关于Fiddler的基本使用就介绍这些，至于断点调试等等，以后有机会再补充！运维帮是一个互联网技术分享平台南非蜘蛛微信运维帮技术社区定期举办技术沙龙，请关注订阅号获取最新信息。运维帮已开通多个微信群供大家交流学习，需要先加南非蜘蛛微信 （yunweibang008）后拉你入群。会员讨论群：总群1、总群2、云端技术地方讨论群：北京、上海、广州、深圳、杭州、成都软件讨论群：Nginx、Zabbix欢迎给订阅号投稿，同时也欢迎加入QQ技术讨论群
TA的最新馆藏
喜欢该文的人也喜欢用Fiddler模拟低速网络环境-前端开发博客
推荐文章 2618Views 13793Views 828Views 930Views 472Views热门文章
36,067Views
20,543Views
17,914Views
8,462Views
5,735Views
4,757Views对这篇文章不满意吗？百度搜索：");Fiddler调式使用知多少(一)深入研究 - WEB前端 - 伯乐在线
& Fiddler调式使用知多少(一)深入研究
Fiddler的基本概念：
Fiddler是一款基于windows系统的代理服务器软件，本地运行的程序，比如web浏览器及其他客户端的应用程序，可以把http和https请求发送给Fiddler，Fiddler通常把这些请求转发给web服务器，服务器将这些请求的响应返回给Fiddler，Fiddler再把响应转发给客户端。
Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler会自动设置代理， 退出的时候它会自动注销代理，这样就不会影响别的程序。如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成网页无法访问。解决的办法是重新启动下Fiddler即可。
安装Fiddler
安装Fiddler之前需要安装.net framework， 我目前的安装的是Fiddler4，所以我下载安装的是.net framework4，如下所示：
安装Fiddler和安装一般的软件没有什么区别，这里就不介绍~~；
了解下Fiddler用户界面
我这边是Fiddler4的界面如下：
在fiddler中web session界面中捕获到http请求如下所示：
Web session列表兰中包含了一些信息如下：
理解不同图标和颜色的含义（下面是常见的）：
web session的常用的快捷键
CTRL+A： 选中所有的session；
取消选中所有的session；
反向选中；如果session已选中，则取消，否则选中；
删除所有的session；
Delete： 删除选中的session；
Shift+Delete 删除所有未选中的session
重新执行当前请求
多次重复执行当前请求
U： 无条件重新执行当前请求，发送不包含If-Modified-Since 和 If-None-Match的请求头
SHIFT+U 无条件地多次重复执行当前请求。
ALT+Enter 查看当前session的属性；
Insert：切换是否用红色粗体标记选中的session
给选中的session添加描述；
了解web Session上下文菜单
我们来点击session一项后，右键菜单，会出现如下所示：
AutoScroll Session List选项用于决定Fiddler是否会自动把新增的session添加到web session列表中。
我们先来了解下 Copy菜单项的一些session信息如下：
Just Url： 把选中的session的url列表拷贝到剪贴板，每行一个url。如下我们定位到session中，
当我们进行粘贴的时候，看到是一个url地址；如下所示：
上面可以看到，我们还可以使用快捷键ctrl+u 实现；
This column: 拷贝选中session菜单所在列的文本；如下：
到我们拷贝完成的时候，进行粘贴的时候，可以看到如下文本：
Terse summary：把选中的session的简要说明复制到剪贴板中，简要说明中包括请求方法，url，响应的状态码及状态信息，如果响应是HTTP/3xx重定向，文本中也会包括响应头中Location字段的内容；如下所示：
当我们进行粘贴的时候，可以看到如下信息：
GET /UpdateCheck.aspx?isBeta=False
200 OK (text/plain)
当然如上也可以使用快捷键；
Headers only
把session的请求头复制到剪贴板中，既可以以纯文本格式，也可以以HTML格式复制。如下：
粘贴如下：
GET /UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: /client/4.5.1.2
Accept-Encoding: gzip, deflate
Connection: Close
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/ charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-:29 GMT; path=/
Access-Control-Allow-Origin:
Date: Sun, 05 Jul :29 GMT
Content-Length: 447
Connection: close
Session: 把整个session列表复制到剪贴板中，支持以纯文本和HTML这两种格式进行复制。如下：
粘贴结果如下：
GET /UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: /client/4.5.1.2
Accept-Encoding: gzip, deflate
Connection: Close
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/ charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-:29 GMT; path=/
Access-Control-Allow-Origin:
Date: Sun, 05 Jul :29 GMT
Content-Length: 447
Connection: close
?I?%&/m?{J?J??t???@??????iG#)?*??eVe]f@????{???{???;?N’????\fdl??J??!???-?~|-?”????o??????o???w?{??&??wwog????=[???2O_f?y??d?v]?i?XUu??g?f?O?n????Z7?d}q^???#
~’????=?_?????I??o???k???z?.?u??
7}???6[?7? }?-[|:o???w’eu????xZ-???uwU5msw????????W??n????v???F???????q?{~????_????q?f????i??????-?eZ??-}:????GOsB?X^?WE;O? ???I??U?]fE?M?|?’??^????M?u?PV?*?’D?4?.???b????4g?YkF?(?S????w???
Response DataURI :响应信息的DataURI
截图如下：
信息如下：
data:text/base64,H4sIAAAAAAAEAO29B2AcSZYlJi9tynt/SvVK1+B0oQiAYBMk2JBAEOzBiM3mkuwdaUcjKasqgcplVmVdZhZAzO2dvPfee++ujudTif33/8/XGZkAWz2zkrayZ4hgKrIHz9+fB8/IvZ/4+T+b5zs/sbJ3m+c7I/vj3fHe+n3Pr27d3dvZ/f+93/jJD1brOrqMk9fZtO3eZueZKt2XedpsVhVdeu+n6Vny2aVT9uqbujTn8zqolo36WR9cV68y+kjA34n/d7+3T36Xwh/lr6pqrJJj9Jvf/n6zWv64vV6hS7Sl3X10wQ3fb3K6jZb0jf0Cn2RLVsPfDpv29Wju3cnZXXRjNu8zOvi7XhaLe6eF7MZ/XV3VTVtc3f3/vbO/vbeg7tX86zdbraX+dV2sdzWRtv72/e3iRi/cfJ7fvf0+cmXX5z+nr9x8maep6/zabWcpaezoi2qZVqdpy19Oqmqt+lHT3NC46JYXqRXRTtPnwmoj9KiSZfVVZpdZkWZTcp8/Bsnz/OsXqaLigiYTap1y1BW2SqvJ0TeNKMunr76Yvu8zvM0Z+hZa0amKOJTjOv/AeF3j4a5AQAA
Full Summary
把web session列表中显示的信息复制到剪贴板。如下：
信息如下：
Protocol Host
Content-Type
/UpdateCheck.aspx?isBeta=False
447 private
text/ charset=utf-8
fiddler:6500
Save子菜单中包含了用于把流量保存到文件中的一些选项；如下所示：
Selected Sessions中的In ArchiveZip 选项是把 Web Session列表中选中的session保存到SAZ文件中；如下所示：
Selected Sessions中的 As Text是把选中的所有session一起保存到一个文本文件中；如下：
Selected Sessions中的As Text(Headers only) 把选中session的请求头和响应头一起保存到一个文本文件中；下面还有很多选项，我这边就不一一介绍，等用到某一项的时候，我们再来介绍；
Fiddler如何捕获firefox中的会话
Fiddler启动时默认是IE代理设置127.0.0.1:8888,其他浏览器需要手动设置；
Firefox手动设置如下：工具 –》选项 –》高级 –》网络 –》设置
即可生效；不过上面的设置比较麻烦，我们可以安装一个插件，如下：
Firefox中安装FiddlerHook插件
当我们安装好fiddler后，就已经安装好了FiddlerHook插件了，我们需要去firefox中启用这个插件；工具—》附加组件—》扩展—》fiddlerHook启用
启用即可！！然后我们需要在firefox中进行设置即可；
我们再来看一下Firefox手动设置如下：工具 –》选项 –》高级 –》网络 –》设置
我们可以再来安装一个hostAdmin插件即可方便查看。
Fiddler如何捕获Https会话
默认下，Fiddler不会捕获HTTPS会话，需要你设置下, 打开Fiddler
Tool-&Fiddler Options-&HTTPS tab
弹出框后一直点击Yes即可；
Fiddler的HTTP统计视图（可以优化请求和页面）
Fiddler的统计选项卡中显示了当前Session的基本信息，在选项卡的最上方显示的是文本信息，最下方是个饼图，按MIME类型显示流量。使用Statistics页签，用户可以通过选择多个会话来得来这几个会话的总的信息统计，比如多个请求和传输的字节数。
选择第一个请求和最后一个请求，可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多，从而对页面的访问进行访问速度优化。
如下所示：
饼图如下：
统计选项卡的一些信息含义如下解释：
Request Count： 选中的session数；
Unique Hosts： 流量流向的独立目标主机数。如果所有选中的流量都发送到相同的服务器上，则不会显示该字段。
Bytes sent:
HTTP请求头和请求体中向外发送的字节总数。后面括号中分别给出了头和body各自的字节数。
Bytes received: HTTP请求头和请求体中接收到的所有字节数。在全部计数后面的括号中给出了请求头和请求体各自的字节数。
Requests started at: Fiddler接收到的第一个请求的第一个字节的时间点。
Responses completed at: Fiddler发送到客户端的最后一个响应的最后一个字节的时间点。
Sequence(clock) duration:
第一个请求开始到最后一个响应结束之间的 “时钟时间”。
Aggregate session duration: 所有选中的session从请求到响应之间的时间的和。
DNS Lookup time: 所有选中的session解析DNS所花费的时间的总和。
TCP/IP Connect duration: 所有选中session建立TCP/IP连接所花费的时间总和。
HTTPS Handshake duration： 所有选中session在HTTPS握手上所花费的时间总和。
Response Codes： 选中session中各个HTTP响应码的计数。
Response Bytes by content-type: 选中session中响应的各个Content-Type的字节数。
Estimated Performance: 选中的流量在不同语种(local)地区和连接方式下所需时间的初步估计。
移动开发如何使用fiddler调式代码
首先电脑和手机要使用同一个无线网。
配置Fiddler，点击 Tools
手机端的配置，我这边是Android手机(IOS也一样)，点击设置进去，选择无线网，如下：
点击代理设置进去后，如下：
接下来可以看看我的ip地址如下：
如上设置后，我们就可以使用手机访问网页后，可以使用fiddler来监控请求或者替换js或者css文件了；
注意：有时候我访问的页面提示
“代理服务器连接失败”，那么这种情况下，很有可能是防火墙或者一些360类似的杀毒软件，我们可以在防火墙下设置为fiddler通过，如下所示：
如上设置我们可以监听页面请求了，但是如果我想要监听本地的服务器端的代码，就访问不了（我本地使用的服务器是php环境），比如上我在本地做demo，如果一切好的话，我上传到服务器端去，首先我们需要启动php服务器；启动好后，我们来使用本机的ip来访问下；如下所示：
我们需要在fiddler里面修改配置，Tools –》 HOSTS，如下：
点击保存按钮后，我们接着再访问页面，就可以访问了，如下：
页面可以访问后，有时候我们想替换下js或者css文件，我们就可以使用右侧的tab选项栏中的AutoResponder了，如下：
在最下面的可以替换一些js或者css文件即可了；这里就不多介绍了~
如上是目前总结的一些基本fiddler基本知识点， 在接下来的业余时间会多去总结Fiddler相关调式方面的知识点~
如果总结的不好的话，希望大家多多指教~~
总结：Fiddler基本知识点总结如上一些，在接下来的时间会全面总结Fiddler相关的含义，我们平时用到的Fiddler一些方面，但是我们还需要多去理解其他各个方面的含义，为以后使用代理http请求或者优化页面有更好的理解，因此我觉得有必要的多去学习下Fiddler知识点~ 所以Fiddler一直会有下文总结的~~
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码.
虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却远远不够用.
特别是当产线环境不能随意修改文件情况下,用线上环境来调试本地代码更是迫切的需求.
(往往本地测试通过,上线后却是各种bug.)
今天分享一下如何用Fiddler来修改并调试线上的JS代码.
以博客园首页为例子,用我本地的一个js文件来替换它的一个js.
查看首页源码发现一个js,就拿它开刷了.
打开fiddler,捕获博客园的首页请求. 找到&aggsite.js&的请求.
这里有个技巧,可以通过 &select&命令来筛选js请求. 在下面的命令框输入&select script&回车即可. 如下图.
接着把这个请求拖动到&AutoResponder&面板.
拖动之前记得先勾上 &Enable automatic responses&和 &Permit passthrough for unmatched requests&.
然后在Rule Editor的第二下拉框选择 &Find a file&来选择本地的JS文件, 选择后点 Save.
这里我用本地的&test fiddler.js&来替换博客园首页的&aggsite.js&.
&test fiddler.js&内容如下. 就是向body追加一段红色文字.
$(function(){
var p=$("&p/&").text("这是fiddler加上的JS").css("text-align","center").css("color","red");
$("body").prepend(p);
好了,刷新博客园首页看看效果.
可以看到,我们替换的js被执行了,接下来就可以在本地使用我们顺手的编辑器来写JS代码了,
本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样,是不是很方便?
最后想说其实你可以用同样的方式来替换图片,CSS,HTML.
总之一点就是利用线上的环境来测试你的代码,但又不对线上产生影响.
要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧.
Views(...) Comments()浅谈vue+webpack项目调试方法步骤
作者：Lienviws
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
题外话：这几个月用vue写了三个项目了，从绊手绊脚开始慢慢熟悉，婶婶的感到语言这东西还是得有点框框架架，太自由了容易乱搞，特别人多的时候。
从webpack开始
直接进入正题。有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。
-sourcemap
webpack配置提供了devtool这个选项，如果设置为 ‘#source-map'，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:
这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章
官方默认的是用 ‘#cheap-module-eval-source-map'
devtool: '#cheap-module-eval-source-map'
设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。
或者，直接找到对应的文件。在chrome用 'ctrl(command) + p‘，输入文件名，可以找到对应的源代码。
需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。
vue家的项目脚手架，推荐使用。
vue-cli可以帮我们自动搭建项目，首先npm全局安装
npm install -g vue-cli
然后创建一个新的项目
vue init webpack my-project
一路回车，搞定。(更多配置项请参考上面给出的vue-cli链接)
这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
从bulid文件夹里面就大概能看出：
webpack.dev.conf: 开发模式用
webpack.prod.conf: 生产模式用
其中，开发模式提供了devtool为'#cheap-module-eval-source-map'，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。
若为true，则devtool为'#source-map'
其他使用方法一致。非常方便。
平时开发的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。
如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好办了。
在此之前，先来分析一下webpack的热加载原理。
对项目抓包可以发现这么一个文件：__webpack_hmr
这是webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。
接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个.hot-update.json和一个.hot-update.js文件
这些具体做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。
所以热更新其实就是监听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。
-AutoResponder
接下来谈谈线上挂载测试，这里推荐一款软件：fiddler
fiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。
上一节说到，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代理可以转发手机的网络请求，挂到本机上可以抓包数据
手机加载慢的时候，同样可以使用http代理转发到主机上，再访问速度就比较快了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具