2

移动端真机调试方法

  1. chrome真机调试
  2. weinre调试
  3. spy-debugger调试

chrome真机调试

缺点:
必须手机和pc都安装chrome浏览器,其他浏览器无效。

优点:
简单快捷

方法:

手机端下载好chrome浏览器,使用USB连接到PC,打开手机的USB调试模式。

然后在PC端打开chrome浏览器,在地址栏输入:chrome://inspect. 勾选"discovery usb device"。

然后在手机端浏览网页,就可以看到如下的页面,

clipboard.png
点击inspect,进行调试。

ps:如果手机端是IOS则需要在MAC下操作才可以。Windows只能抓到安卓手机

wenire真机调试

缺点:
无法打断点
优点:

  • weinre调试方式,安装和适用不复杂,适用于全平台的调试,即任何手机的任何浏览器皆可以调试,不过需要手机和电脑在同一个网段下。*

方法:
全局安装:

npm install  – g weinre

局部安装:

npm install 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, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。

控制台启动截图:

clipboard.png

启动了weinre之后,我们在浏览器中输入localhost:8090.显示如下界面,表示已经启动成功。

clipboard.png

点击"debug client user interface",进入调试页面。
clipboard.png
当前的targets中内容为空。

现在,我们需要做另外一点操作,在我们要调试的页面中,增加一个脚本。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

其中需要把localhost改成自己本机的IP地址

targets已经不为none,已经能捕捉到嵌入脚本的页面。

clipboard.png

这时,我们就可以点击Elements进行调试。

clipboard.png
这时候,在调试的时候,移动端的页面也同步更新。修改样式时,会在手机端即时生效,并且也可以查看控制台信息,唯一一点就是,不能进行断点调试。

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

spy-debugger真机调试

优点:

方便,功能齐全

缺点:

安装稍微复杂一点

特点:

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

方法:
TODO。。。


yeooo
41 声望1 粉丝