移动端真机调试的两种方法

本文参考https://github.com/YvetteLau/Blog/issues/5

1、引入:

我们进行移动web开发时常常会接触到真机调试,但是手机端的浏览器却不想PC端这样有开发人员工具,一旦代码出错最直观的方式就是借助alert或者通过dom操作打印一些值出来查看,效率低下,非常不方便,因此,我们需要借助其他工具来提高效率。

2、weinre调试

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

安装weinre需要先安装好node和npm环境):

全局安装命令npm install -g weinre

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

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

移动端真机调试的两种方法_第1张图片

点击debug client user interface,进入调试页面。

移动端真机调试的两种方法_第2张图片

当没有指定代理页面被访问时,Targets为none

指定要代理的页面:

在要调试的网页代码中添加一个script:


                    
                    

你可能感兴趣的:(移动端真机调试的两种方法)