web移动端真机调试方法

功能：远程调试工具。可以通过该工具在PC浏览器（WebKit内核）上实时调试移动端真机web页面，如chrome开发者工具一般修改对应网页的页面元素、样式，或是查看js变量，同时还可以看到手机上页面的错误和警告信息。

（无线、实时调试）

1.Weinre——HTML/css/js变量

Weinre是Web Inspector Remote的缩写(远程web检查器)，它的作用就是相当于chrome的审查元素一样，界面和用法也基本一样，无非不同的是：weinre适合在移动端页面调试，比如手机访问页面的时候，我们可以使用chrome浏览器查看页面的html元素和css代码，我们可以对此进行更改，然后在手机端不需要刷新，立即可以看到效果；强烈建议用于调试特殊机型的html、css样式，或输出js变量。

（微信小程序开发工具也使用了该工具）

1.1 准备工作：

  • 调试手机跟PC处于同一网段（随身wifi搞一个）；
  • 本地服务器（node包推荐：http-server）。
  • jdk(java)运行环境

例： 监听3000端口
p-1.png

安装：

1
2
# 安装[Weinre](https://www.npmjs.com/package/weinre)
npm i -g weinre

下载架包weinre.jar

执行

首先运行weinre

1
weinre --boundHost 192.168.27.183 --httpPort 8888

执行架包(java)

1
java -jar weinre.jar --httpPort 192.168.27.183 --boundHost 8888

weinre 提供了6个可选的启动参数，常用的是以下两个参数，其它的用默认值就可以了。

  • httpPort：调试服务器运行的端口，默认的 8080，如果这个端口有在用，可以改为其它端口；
  • boundHost：调试服务器绑定的 IP 地址（或域名），默认 localhost，如果设置为 -all-，表示绑定到所有当前机器可以访问的接口。

在浏览器中输入地址http://192.168.27.183:8888/#test（hash为调试ID），如出现以下界面，这说明环境运行成功。

p-2.png

调试

p-3.png

首先在调试页面中加入图中js，如：
p-4.png

真机中打开调试页面，如：http://192.168.27.183:3000/index.html
p-5.png

进入之前的调试页面http://192.168.27.183:8888/client/#test，看下如下界面说明成功获取到真机节点
p-6.png

然后就可以尽情调试了，跟Chrome开发者工具一样。
p-7.png
p-8.png

注：ios app调试有域名限制，可问客户端开发安装无域名限制的包，或修改host。

2.vConsole.js——手机上的调试面板

真机上可呼唤控制台，提供log（日志信息）、system（系统信息）、network（网络信息）、element（DOM树）、cookie/Storage字段查看功能。

p-9.png

2.1 log——日志信息

p-10.png

2.2 system——系统信息

p-11.png

如图所示，该部分展示ua、及渲染时间等信息。

2.3 network——网络信息

p-12.png

如图所示，类似于Chrome开发者工具中的“Network”，可代替部分请求抓包。

2.4 element——DOM树查看

p-13.png

如图所示，类似于Chrome开发者工具中的“Elements”，但只供展示，不可修改或替换。

2.5 storage——cookie/storage查看

p-14.png

如图所示，类似于Chrome开发者工具中的“Application”，只供展示，全部删除功能。（修改和替换可在log控制台中敲js实现）。

其他

有条件的其实使用Chrome/Safari调试更加方便。

相关链接