手机端网页调试小技巧

chrome真机调试

只能调用手机端chrome浏览器，简单容易上手

1、访问 chrome://inspect 勾选"discovery usb device"

操作展示

手机连接usb调试，chrome自动查询到，手机端访问的页面可以直接打开。

weinre调试

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面。

1
2
3
4
5
6
7


//安装

npm install -g weinre

//打开 运行 成功则进入默认页面
weinre --httpPort 8090 --boundHost -all-

weinew启动参数说明

httpPort：设置Wninre使用的端口号，默认是8080。 boundHost：[hostname | Ip | -all-]: 默认是 ‘localhost’。
debug [true | false]：这个选项与–verbose类似，会输出更多的信息。默认为false。 readTimeout [seconds]：Server发送信息到Target/Client的超时时间，默认为5s。
deathTimeout [seconds]：默认为3倍的readTimeout，如果页面超过这个时间都没有任何响应，那么就会断开连接。

1
2
3
4


//在要调试的页面中新增 script 脚本

<script src="http://自己的ip:8090/target/target-script-min.js#anonymous"></script>

修改样式时，会在手机端即时生效，并且也可以查看控制台信息，唯一一点就是，不能进行断点调试。

最后，在调试结束之后，别忘记删除嵌入的script。

spy-debugger调试

Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。

特性：

页面调试＋抓包
操作简单
支持HTTPS。 spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。可以配合其它代理工具一起使用(默认使用AnyProxy)

安装：

1
2
3
4
5
6
7


// 全局安装
npm install –g spy-debugger

//运行

spy-debugger

设置手机的HTTP代理：

1
2
3
4
5


代理的地址为PC的IP地址，代理的端口为spy-debugger的启动端口(默认端口为：9888)默认端口是 9888。
如果要指定端口： spy-debugger–p8888。
Android设置步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动。
iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动。

手机安装证书(node-mitmproxy CA根证书)：

第一步：生成证书

生成CA根证书，根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。

1
2


spy-debugger initCA

第二步：安装证书

把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击安装即可。

Spy-debugger启动界面，同样，在手机端刷新页面之后，targets中会有记录。

Eruda

https://github.com/liriliri/eruda

在html页面中引入此工具，既可自动使用控制台调试工具。