<基耶斯洛夫斯基《十诫》影评《被掩埋的巨人》读后感，对记忆的反思>

移动端浏览器真机调试的几种方法

### 前言
　　这是个老话题了，在移动端网站开发的过程中，虽然代码可能符合w3c标准，在手机模拟器及手机端Chrome、手机端Firefox上表现也正常，可在真实手机浏览器上却出现各种问题，虽然大概率是浏览器本身的bug，却需要开发来买单，不得不写一些类似hack的代码，过程中<a href="https://www.boatsky.com/blog/73">真机调试</a>是必经的一步。

不过奇葩的手机浏览器各有奇葩之处，“全部修复”不太现实，我们需要做的是在预算时间内，修复有代表性的用户量多的手机浏览器上出现的问题，按优先级高低归纳手机常用的浏览器：

Chrome，基于Chromium，Chromium包括Blink,而Blink是Webkit的分支，也可能理解为它的改良版，bug较少。

Firefox，基于Gecko，bug较少。

Safari，基于Webkit二次开发，bug中等。

Android 系统默认的浏览器，4.3以下一般是基于Webkit浅程度的套壳，而4.4以上是Chromium，不同的手机商可能做了不同的定制，一般都是往坏的方向的定制，视情况而定，一般手机商瞎改的越少，bug越少。

QQ浏览器，基于Webkit二次开发，命名X5内核，微信与手机QQ都内置了它，bug多多。

UC浏览器，新版的基于Chromium，命名u4内核，bug多多。

综上考虑，一共三类：
　　Chrome真机调试：因为Chrome与Firefox的bug很少，表现也一致，两者只需测一个。而Android默认浏览器与UC一般也是基于Chromium，调试类似。
　　Safari真机调试：需要在Mac上的PC Safari与iPhone的Safari用iCloud同步。
　　QQ浏览器真机调试：使用腾讯的TBS Studio.

### 移动端打开PC localhost
　　常用的方法是手机使用PC的代理，此处使用whistle，它与Windows的fiddler及Mac的Charles类似，只不过它是跨平台的。

一、按照官方的指引，下载 <a href="https://github.com/avwo/whistle" target="_blank" rel="nofollow">https://github.com/avwo/whistle</a>  ，安装 npm install -g whistle，启动 w2 start，成功后：
```
[i] whistle@1.13.25 restarted
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
http://127.0.0.1:8899/
http://10.12.75.21:8899/
Note: If all the above URLs are unable to access, check the firewall settings
For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
```

http:// 10.12.75.21:8899/ 是whistle内网的地址，可以在PC端打开这个网页，在上面进行监听、抓包、配置、调试等操作，比如可以用Rules重定向解决跨域问题。这里简称whistle 调试页。

二、手机连接与PC一样的wifi，然后设置手机代理ip 10.12.75.21 与端口8899，之后手机的数据流都会在whistle 调试页体现，表示成功。

三、本地web服务不使用localhost启动，而使用ip启动，假设web服务地址 http: //10.12.75.21:8080/ ，用手机访问它。

四、如果是https的安全api接口，还需要安全认证。点击whistle调试页的https，勾选 Capture TUNNEL CONNECTs，然后下载证书 Download RootCA（下载可以手机扫二维码，或者直接PC下载后发送至手机），然后手机安装该证书（有的浏览器会禁止安装，换个浏览器即可，或者用别的软件打开证书文件后安装）。

### Chrome真机调试：
　　一、打开 <a href="chrome://inspect/#devices" target="_blank" rel="nofollow">chrome://inspect/#devices</a>

二、手机浏览器(Chromium内核的浏览器，比如Chrome，一些Android默认浏览器等)，打开自己的本地web服务。

三、手机使用原装线连接PC，并且同意usb调试（可能还需要在手机设置开发者选项，不同的手机还不一样，如有的手机可以用MTP连接，如果实在连接不上，一般是方法不对，遇到问题，请自行查找该手机的连接方式，当然，换手机试试也是推荐的，不建议在小众手机上浪费太多的时间）

四、在步骤一点击Remote Target下的对应的浏览器，比如Chrome或Android，刷新第二步的页面，然后在对应浏览器下找到它，点击inspect，之后，手机与PC便同步了，这种同步除打开了手机的Chrome DevTools外，屏幕界面也同步了。

### Safari 真机调试
　　一、在Mac 下打开Safari，并且允许Develop，在下面找到自己iCloud的账号下iPhone，这时是找不到的。

二、iPhone也需要用同一个iCloud账号登录，并在同一个wifi下，使用原装线连接Mac，允许调试或者允许传照片，并在iPhone Safari打开web服务，第一步则可以找到iPhone了。

三、打开Safari的Web inspector，成功。与Chrome对比就是少了手机界面同步，但这个非必须的，因为界面同步可能会两者不一致的问题，最终还是要以真机界面为准。

### QQ浏览器真机调试
　　一、下载TBS Studio <a href="https://x5.tencent.com/tbs/index.html" target="_blank" rel="nofollow">https://x5.tencent.com/tbs/index.html</a> , 并安装。

二、同上面两种真机调试，连接USB之后，分别通过tbs的四个step, 连接手机、确定调试的app（QQ浏览器、手机QQ内置浏览器、微信内置浏览器）、检测是否支持TBS调试、设定TBS调试状态。这个过程可能会让你卸载手机上的QQ浏览器重新安装调试版QQ浏览器，在手机上同意即可。如果发现有的步骤走不下去，换个手机试试。

三、同步之后，与Chrome类似，只不过界面同步非常卡，并且有问题，不过我们以真机界面为准。

如果觉得有帮忙，您可以在本页底部留言。

移动端浏览器真机调试的几种方法

全部留言

我要留言