【转】手机web前端调试页面的几种方式

前言

PC端web页面调试比较容易，这里主要说几种移动端调试的方法，从简单到复杂、从模拟调试到远程调试，大概分为几部分：

一、Chrome DevTools（谷歌浏览器）的模拟手机调试

二、weinre(web inspector remote)远程调试工具

三、微信的“web开发者工具”，集成了Chrome DevTools和weinre，作的比较好

四、Chrome DevTools远程调试Android和iOS页面

五、Eruda——手机网页前端调试面板

阅读说明

本文不是小白文，须要必定前端基础才能看懂；此外，本文并非调试教程，不少细节并无截图或者描述的很清楚，就如我说的已经默认阅读者懂得一些基本的调试方法；

我这里主要是对几种调试方式进行汇总，方便本身也方便他人看完文章以后知道更多的调试方式；若是遇到哪一步本身看不懂能够百度或者评论区留言，谢谢！

一、Chrome DevTools模拟手机调试

直接使用谷歌浏览器的开发者工具，能够参照下图，也可使用快捷键F12或者ctrl+shift+I；我的以为不论是哪一个浏览器，直接先按下F12，通常均可以打开开发者工具，打不开再说嘛。

这种调试方式不只能用于模拟手机调试仍是主要的PC端页面调试的方式，这里主要说用于手机调试。

 打开后看到相似以下界面的开发者调试界面，Elements能够查看文档元素，Console能够在线调试js和查看输出结果，Sources能够调试JS和查看依赖资源，Network查看全部的网络请求

 

在浏览器地址栏输入要调试的页面地址，选择模拟设备，而后就能够选择要调试的js调试了，右侧面板中有调试操做按钮；在Application面板中能够看到应用存储的数据Cookies什么的

若是没有须要模拟的机型怎么办？固然是增长了，打开DevTools的设置面板，左图中的Setting点开会出现右图，以下：

                 

二、weinre(web inspector remote)远程调试工具

weinre实际上是在待调试的页面中嵌入了一个特定的js，这样页面才能被weinre监测到并能打开调试面板；要注意weinre的调试面板不能调试JS,也不支持打断点调试，仅能用于调试页面样式，使用场景有限；

根据本身须要来选择吧，具体的使用安装过程参考：http://blog.csdn.net/freshlover/article/details/42640253；因为我使用的较少，也并不推荐这款工具，因此只是做为介绍和了解放在这里；若是想

对weinre深刻了解的本身参考连接中的内容琢磨吧。

三、微信的“web开发者工具”

微信的web开发者工具，集成了谷歌的DevTools和weinre，能够说是上面两点的集合，对于那些微信公众号里面使用的H5网页，这个是最好的选择； 

这个工具调试通常性的网页就和谷歌浏览器调试同样，看到的调试面板也差很少；可是若是要调试微信相关的功能好比：JS-SDK，权限列表等就必须使用这个工具了

工具下载地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN

 

除了使用url模拟调试外,微信的web工具也能对安卓手机进行远程调试，目前最新版还不支持iOS远程调试，打开设备监视面板：

打开后看到以下界面，能够看到有一台华为设备已经链接，远程调试要注意两点：

一、手机和电脑使用usb链接，手机要开启usb调试模式(不一样手机不同)

二、手机上安装最新版谷歌浏览器并打开

而后点击inspect便可开始调试当前手机谷歌浏览器打开的页面，这里不细说这个了，也不必细看，下面会详细说明

再看看微信的移动调试，iOS提供的只有普通代理测试，Android除了代理测试，还有X5 Blink内核调试；可是并非全部手机都支持X5 Blink；因此广泛仍是使用代理调试

手机的wifi网络配置好代理后，点击开始调试，出现监控界面，发现其实就是使用的weinre来实现的，不过微信对其作了改进，相比直接使用 weinre 有如下优势：

一、无须手工在页面中加入 weinre 调试脚本，这点很方便

二、能够在 weinre 的网络请求页卡Network中，看到完整的http请求log，而且没有只能看到ajax的局限

可是也有弊端，因为是微信开发的工具，移动调试只能调试微信App中打开的页面并且并非全部能在微信中打开的网页都能调试，怀疑是工具内部作了过滤

重启微信后，在微信中访问页面，能够被监测到，而后能够调试网页样式了，在Network页卡中能看到每一个请求的参数与响应结果

总之，若是调试页面是微信中的页面(通常就是公众号)使用微信提供的工具效率很高；若是是通常浏览器中的页面也可使用微信的Chrome DevTools但最好不用weinre

四、Chrome DevTools远程调试Android和iOS页面

电脑上安装新版谷歌浏览器，而后地址栏输入chrome://inspect会打开设备监视页面，这里能够监视到iOS和Android设备，若是界面和图中不一致请安装最新版浏览器

Android:

前提：

一、手机和电脑使用usb链接，手机要开启usb调试模式(不一样手机不同)

二、手机上安装最新版谷歌浏览器并打开

会发现设备监视页面多出了一个华为设备，而且能看到当前手机上谷歌浏览器打开的网页的链接

a):能够在这里输入手机要打开的url而后open，手机上显示的当前页面就会改变

b):inspect表示开始调试当前页面，会打开调试面板(重要)

c):focus tab，表示让手机显示当前这个链接

d):reload表示从新加载页面，也就是刷新

e):close表示关闭当前手机显示的页面

接下来，点击inspect开始调试页面，注意若是google浏览器不能翻|墙的话，这个调试页面是打不开的，能够百度修改hosts文件翻|墙

 而后就能够像调试PC端网页同样远程调试手机网页了

iOS(window系统上，若是是macbook系统忽略此部分):

能够参考：http://www.cnblogs.com/kelsen/p/6402477.html

前提：

一、电脑安装iTunes软件，否则苹果手机不能正常被识别，安装好后数据线链接手机和电脑

二、打开手机的设置——>Sarafi——>高级——>Web检查器——>启用(默认是关闭的，将其打开)

三、下载ios-webkit-debug-prox代理(32位或者64位)，其做用就是在Chrome和Sarafi之间创建了一个代理，便于电脑的Chrome检测手机Sarafi打开的页面

四、在cmd中执行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌内置的监视器来调试(默认使用远程的)

启动后会监听9222端口，而后看到链接上了一台名为jiba的iOS设备，括号中为设备的UDID；而后看谷歌浏览器是否检查了这个端口，右图中有9222端口便可，没有就手动添加

     

此时打开手机Sarafi浏览器，打开百度首页，发现浏览器能检测到，没看到就刷新这个监视界面，通常来讲会在3秒内自动出现

 

点击inspect一样出现了调试面板，以下，发现iOS调试的面板不能看到手机屏幕在电脑上的投影，不过这并不影响调试；可是可能会遇到在调试js时断点不生效的问题，

若是很不幸遇到这个问题的话，将图中红框中的按钮连续点击两次——先禁用断点再启动便可恢复端点调试功能，不知道为何，猜想是这个过程当中恢复了断点的状态；这个问题很奇葩。

到这里使用Chrome调试iOS和Android就都完了，这种使用谷歌浏览器的方式，在Android上依赖于手机谷歌浏览器，在iOS上依赖Sarafi浏览器，受到具体软件的限制；不过能够理解，毕竟远程调试不如模拟调试简单

五、Eruda——手机网页前端调试面板

eruda是什么？正如标题所言，是用来在手机上调试页面的，注意是在手机上不是在电脑上；前面说的几种调试方式都是在电脑上模拟调试或者远程调试手机页面，但eruda是直接在手机上调试页面。

有什么好处？若是非要说好处就是可以直接在手机上打开相似PC端开发者面板同样的调试面板，主要用途是当PC端调试手机页面和手机上运行时效果不一致时能够直接在手机上调试。

示意图(手机上调试效果图)：

具体资料：https://www.oschina.net/p/eruda

目前我用的比较少，可是不失为一种值得推荐的调试工具。总的来讲，通常开发者都是直接在PC上调试页面（不论是PC端页面仍是手机端页面），所以在开发过程当中推荐使用Chrome DevTools或者微信web开发者工具来调试，

固然有同窗说我用的是360浏览器，其实无论你用什么浏览器除了内核差别，调试模式基本都和Chrome DevTools差很少；这里我要说的是通常调试页面时直接使用PC端来调试就能够了，可是发如今真机上运行效果和预期不一致

则能够采用Eruda来实现真机调试进而定位并解决问题。

 

以上工具并非互相独立存在的，颇有可能须要多种方式联合调试来解决一个问题，毕竟咱们不能把本身框死在一个工具里，应该扬长避短；