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

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

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

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

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

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

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

阅读说明

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

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

1、Chrome DevTools模拟手机调试
直接使用谷歌浏览器的开发者工具，可以参照下图，也可以使用快捷键F12或者ctrl+shift+I；个人觉得不管是哪个浏览器，直接先按下F12，一般都可以打开开发者工具，打不开再说嘛。

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

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

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

如果没有需要模拟的机型怎么办？当然是增加了，打开DevTools的设置面板，左图中的Setting点开会出现右图，如下：

2、weinre(web inspector remote)远程调试工具
weinre其实是在待调试的页面中嵌入了一个特定的js，这样页面才能被weinre监测到并能打开调试面板；要注意weinre的调试面板不能调试JS,也不支持打断点调试，仅能用于调试页面样式，使用场景有限；

根据自己需要来选择吧，具体的使用安装过程参考：http://blog.csdn.net/freshlover/article/details/42640253；由于我使用的较少，也并不推荐这款工具，所以只是作为介绍和了解放在这里；如果想

对weinre深入了解的自己参考链接中的内容琢磨吧。

3、微信的“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远程调试，打开设备监视面板：

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

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

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

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

再看看微信的移动调试，iOS提供的只有普通代理测试，Android除了代理测试，还有X5 Blink内核调试；但是并不是所有手机都支持X5 Blink；所以普遍还是使用代理调试