移动端页面调试三种方法

实际开发中不同的真机设备往往会出现不同的响应问题，不方便在模拟器复现，只能在真机调试。目前的调试工具种类繁多，本篇文章列举了一些自己平时用的

使用Chrome 浏览器调试移动端网页

手机开启调试模式连接电脑，确保是调试模式连接的（不知道怎么打开调试模式的可以参考：jingyan.baidu.com/article/046…
手机上打开一个网页，只要是webview形式的网页应该都是可以的；
电脑chrome浏览器地址栏输入：chrome://inspect/#devices ，会看到如下图的情况（上面会看到你所连接的设备的名称和信息，下面就是当前设备上可以用于在电脑上调试的页面的一下信息，地址、标题、网页大小。。。，如果没有显示设备信息，则表示没有连接好，可以插拔手机或关闭调试模式重开一下）；

4. 找到你准备调试的那个，并且确保手机上的那个页面也是处于激活状态的的，然后点击蓝色的 inspect 链接，会弹出一个新的窗口；

5. 熟悉的界面出现了

如果连接错误，可尝试运行命令

adb kill-server -> adb start-server -> adb devices

使用spy-debugger调试移动端

安装spy-debugger首先要有node环境。不知道的可搜索官网下载node。在有node的环境下，命令行执行

npm install spy-debugger -g

安装成功后，把需要调试的手机和电脑连到同一网络环境下，在命令行执行spy-debugger，此时会显示：正在启动代理本机在当前网络下的IP地址为：xxx.xxx.xx.xx node-mitmproxy启动端口: 9888 浏览器打开 ---> http://127.0.0.1:50094

如浏览器没有自动打开最后一行提示的地址（本例中的http://127.0.0.1:50094），可自行复制到浏览器打开，打开后界面如下

此时给手机设置HTTP代理（这里为ios的方法，安卓类似）：设置 - Wi-Fi - 在连接的Wi-Fi右边点击感叹号进入 - HTTP代理 - 手动，填入调试的PC的IP地址以及上一步中命令行返回的node-mitmproxy启动端口: 9888 在确保代理填写正确后，在手机上使用safari访问http://s.xxx安装SSL证书（调试https的网页需要）安装完证书后，调试前的工作就基本完成了，此时打开需要调试的app（webview）或网页，可以看到spy-debugger的界面已经实时检测到

当有多个webview时，可以选择需要调试的页面（高亮变成绿色）后，点击工具栏的Elements即可和浏览器中的查看元素的操作一致，同样支持实时修改样式等功能。

此外，工具栏上的剩余几个按钮与浏览器调试功能中的tab基本一致，例如Console页面同样支持输入输出指令等，就不赘言了。除了页面调试，该页面左侧还有请求抓包页面可供切换，与Charles、Fiddler等抓包工具用法相近。值得一提的是，请求抓包页面其实是spy-debugger集成了AnyProxy（而页面调试页面则是集成了weinre），如果要单独使用及配置AnyProxy（例如AnyProxy默认不对https请求做处理，所以响应数据会是乱码显示，如需看到明文信息，需要配置证书），可以访问其官网了解并单独安装使用。

如果在使用过程中手机锁屏会断开连接，莫慌：重新打开页面即可

Eruda: 手机网页调试

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

按钮拖拽，面板透明度大小设置。
Console 面板：捕获 Console 日志，支持 log 、 error 、 info 、 warn 、 dir 、 time/timeEnd 、 clear 、 count 、 assert 、 table ；支持占位符，包括%c 自定义样式输出；支持按日志类型及正则表达式过滤；支持快捷命令加载 underscore 、 jQuery 库；支持 JavaScript 脚本执行。
Elements 面板：查看标签内容及属性；查看应用在 Dom 上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看 Dom 上绑定的各类事件。
Network 面板：图表显示页面加载速度；查看页面各资源请求时间（ Android ）；捕获 XHR 请求，查看发送数据、返回头、返回内容等信息。
等等（此处不一一列举。功能展示基本和chrome调试工具类似）

安装方式 可以使用npm安装

npm install eruda --save

在页面中加载脚本：

<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

Js 文件对于移动端来说略重（ gzip 后大概 80kb ）。建议通过 url 参数来控制是否加载调试器，比如：

;(function () {
    var src = 'node_modules/eruda/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

初始化时可以传入配置：

container: 用于插件初始化的 Dom 元素，如果不设置，默认创建 div 作为容器直接置于 html 根结点下面。
tool ：指定要初始化哪些面板，默认加载所有。

eruda.init({
    container: el,
    tool: ['console', 'elements']
});

总结

以上三种方式中，eruda相对来说调试不算便捷，本身脚本文件也比较大，除非特殊需要在真机设备打印信息调试的情况，否则不建议使用，推荐spy-debugger方式，不占用页面资源，npm安装便可使用。

【移动端】移动端页面调试方法总结

移动端页面调试三种方法

使用Chrome 浏览器调试移动端网页

使用spy-debugger调试移动端

Eruda: 手机网页调试

总结