移动端前端开发真机调试实践

上篇文章介绍了移动端开发布局的一些知识点,关于移动端测试的知识点特别多,通过亲自安装体验,记录一下实践过程。

Weinre测试安卓真机

Weinre可以方便地查看PC端的页面在手机端的效果,以及在PC端调试查看手机端的效果。它使用的前提是保证PC和手机在同一局域网内。
我的电脑是Mac,只在Mac上做了测试,具体测试步骤是:

  • 首先安装Weinre
1
sudo npm install -g weinre
  • 在本地开启一个监听服务器
    mac下需要执行命令 ipconfig getifaddr en0
  • 指定使用当前机器的 ip 以供移动设备访问使用
    通过ipconfig,知道我的电脑ip为192.168.1.103,在命令窗口下执行
1
weinre --boundHost 192.168.1.103

weinre默认监听8080端口,在pc上打开链接http://192.168.1.103:8080/

将会看到下面的界面

看到这个界面后,你可以调试自己本地的页面也可以调试外网的页面

调试自己本地的页面

比如说,我本地有这么个页面,想在真机上看下实际效果。

具体操作步骤为:

  • 1、引入上图中的外链js
  • 2、将本地页面链接的localhost修改为局域网ip,我的ip为192.168.1.103,故我需要调试的页面打开方式为http://192.168.1.103:3000/index
  • 3、打开手机浏览器,访问http://192.168.1.103:3000/index,将在手机上看到PC端的网页
  • 4、进入http://192.168.1.103:8080/client/#anonymous
    选中需要调试的页面,这里我选择http://192.168.1.103:3000/index这一页面,此时选择的链接将被高亮设置。

    选择Elements,在这里选中元素,比如我选择ul这一节点,将在手机上看到ul的元素被选中了。

调试外网页面

因为不是自己本地或者自己写的页面,无法手动在自己的html文件里加入<script src="http://192.168.1.103:8080/target/target-script-min.js#anonymous"></script>这种target script.
但我们可以通过代理服务器主页【Target Bookmarklet】一节中 bookmarklet 来实现。

  • 1、在手机浏览器书签地址栏加入这段代码
1
javascript:(function(e){e.setAttribute("src","http://192.168.1.103:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
  • 2、在http://192.168.1.103:8080/client/#anonymous选中百度的链接
  • 3、即可在Elememts下调试效果

    在PC上改变元素的样式在手机可以看到元素样式的改变,console功能都可以使用。这里不再一一演示。

UC开发版测试安卓真机

  • 1、在Android设备上安装UC浏览器开发版,进入下载页
  • 2、获取Android设备的IP
    比如我的小米2A,获取方式为设置->WLAN->高级设置->IP地址,我的IP为192.168.1.102
  • 3、用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 :9998,比如我需要进入192.168.1.102:9998
  • 4、打开UC开发版安卓客户端,选择“允许”,将在PC上获得这样的界面
  • 5、在http://192.168.1.102:9998/里选择站点,进入后调试元素,在UC开发版手机端将看到变化的效果

    注意,调试本地localhost路径的页面,只需要在手机浏览器里将localhost改成局域网IP。

更多真机调试资料分享