前言

大前端时代，移动互联网是大趋势，而偏向移动开发，但前端开发的功能在移动上调试是比较困难的，因为无法像 PC 浏览器那样有各种各样的内置调试工具，而出现问题时只从页面上效果判断具体问题，这是不太可能的，如样式，在 IOS 和安卓上展示的效果不一致，而在开发浏览器上一点问题都没有，这就只能猜测和不断尝试，但如果对需要部署的环境且频繁拜托别人部署是很浪费时间，效率也低下，还要看别人是否愿意陪你折腾，因为你也在浪费他的时间，因此能自己一个人解决就绝对不要浪费别人的时间，而对移动开发的调试，我一般都是 vConsole、weinre、fiddler。

vConsole

主要使用在需要打印 console 的内容而能像 pc 浏览器一样有控制台，当然它也有其他的功能，但对我而言 Log 是最重要的。

1
2
3
4
5
npm install vconsole
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化

console.log('test.....');
vConsole
vConsole
vConsole
vConsole

weinre

weinre 是一款还不错的远程调试工具。功能与网页浏览器的开发者工具基本类似，适合用于移动端 web 的调试，但可能会用起来不顺手，因为它只是实现了浏览器调式的一部分功能，而且它的调式界面有点简陋，功能运用上没有浏览器调试那么便捷，但它比 VConsole 功能强大一些，也包含了它的功能。
而它最好的地方在于可以在 Elements 对样式的修改可以动态的修改到远端的样式，这就和在浏览器上调式样式一样，很不错的功能。

1
2
3
4
5
6
npm -g install weinre
weinre --httpPort 8081 --boundHost -all-

主要参数解析：
httpPort	调试服务器运行的端口，默认8080
boundHost	调试服务器绑定的IP地址或域名，默认localhost

运行后打开 localhost:8081 调式界面

weinre
weinre

Elements 的 tab 页里可以对元素进行样式调整，而选中样式也会在移动出现被选中的效果，如果没有重新刷新一下，因为它实现与远端同步是使用轮询方式实现的，如果请求有问题了，只能重新来，就是刷新，这一点我觉得体验效果很差。

weinre
weinre

fiddler

Fiddler 是强大的抓包工具，它的原理是以 web 代理服务器的形式进行工作的。
而且 Fiddler 的用途很广，但这里就介绍一下怎么进行移动端的调式。
Fiddler 它的简单原理就是拦截请求，伪造请求返回给客户端。

远程抓取手机数据配置

  1. 配置 fiddler 允许监听到 https（fiddler 默认只抓取 http 格式的）
    打开 Fiddler 菜单项 Tools->Options->HTTPS
    勾选 CaptureHTTPS CONNECTs,勾选 Decrypt HTTPS traffic 和 Ignore servercertificate errors 两项,点击 OK（首次点击会弹出是否信任 fiddler 证书和安全提示，直接点击 yes 就行）
fiddler
fiddler
  1. 配置 fiddler 允许远程连接

Tools->Options->Connections，勾选 allow remote computers to connect，默认监听端口为 8888（下图 Fiddler listens on port 就是端口号），若端口被占用可以设置成其他的，配置好后要重新启动 fiddler

fiddler
fiddler
  1. 对手机端进行参数配置

首先要保证手机和电脑都处于同一个 WIFI 网络；

然后要知道电脑的 ip 地址（当然这个电脑是安装 fiddler 的电脑），电脑 ip 地址可通过 cmd，输入 ipconfig 查询，或网络共享中 ipv4 找到，我的是 192.168.0.103。

再者要知道 fiddler 的端口号，Tools->Options->Connections，port 中值就是端口号，一般默认为 8888；接下来开始操作手机；

手机打开浏览器输入 http://ip:端口号，如http://192.168.0.103:8888，会打开https证书下载地址，点击FiddlerRootcertificate下载证书。

fiddler
fiddler

找到手机上证书安装设置，记住证书下载地址，然后在证书安装设置找到证书安装,由于手机不一样，证书安装设置也不一样，需要自己百度自己的手机证书怎么安装。
具体参考

  1. 更改手机无线网的代理
    在手机的 WiFi 那里的高级设置，代理选择手动，主机名就是 fiddler 的电脑 ip 地址，端口号，就是 fiddler 的端口号，与浏览器中 ip：端口号保持一致，点击确定即可。

这个无线代理设置也是手机不一样设置也有些不一样，需要自己百度查看自己的手机类型怎么设置。

具体参考

fiddler 使用

目前经常使用的 Inspectors 与 AutoResponse。

Inspectors 可以查看到请求中所有报文数据，如 header，报文体，返回数据，而且可以查看不同数据类型的数据，如 json，图片等

AutoResponse 可以拦截转发预期的请求然后返回客户端，这是一个很强大的功能。
要勾选上 Enable rules 与 Unmatched requests passthrough

fiddler
fiddler

这样我们可以把请求转发到本地的某个文件，然后实现类似如 mock 数据那样，但不对代码进行调正，只是把请求转发，而我们就可以修改本地的数据，实现到请求数据为我们修改的预期数据，如样式修改，我们把样式文件的请求转发的本地目标样式文件，然后修改本地样式文件就可以刷新查看到重新请求的样式可进行了调整。

如果拦截不生效，是缓存问题或者配置问题，所以要注意。

正则匹配可以使用$1\$2…等选中匹配中的第几个子串，这和正则一样。

fiddler
fiddler

资料:
Fiddler AutoResponse
AutoResponder 正则匹配
fiddler 正则匹配 2