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

移动端开发的经验比较少，之前做过一点移动端的页面，都没有好好总结经验教训。移动端布局技巧性比较强，借最近摔的坑，记录一下工具和技巧。

工具篇

Chrome模拟器

首先是chrome的device model,我目前使用的chrome为当前最新的38.0.2125.122版本。没升级的建议升级下chrome，最新版本从界面上来看非常美观，而且以前从Emulating入口进入，
现在可以直接通过手机icon进入，更加快捷。
移动端调试时，如果将调试框放在下面，整个移动端界面就会被压缩。笔者之前一直找不到将调试栏移动到右边的方法，谷歌搜索了很久才明白了方法。
鼠标长按右上角Dock to the main window，将会出现出现右侧布局框的按钮，该细节隐藏太深！简明教程如下：

响应式布局

我采用的方法是rem为所有长度高度、字体大小的单位。
首先设置字体大小为10px,即1rem = 10px;

html{
    font-size: 62.5%;
}

但是问题来了，在chrome下，1rem显示的字体大小永远为12px！这是因为chrome默认最小字体大小为12px，所以对于低于12px的字体，chrome都做了1rem = 12px的处理。
解决方法：进入chrome 设置->显示高级设置->网络内容->自定义字体->最小字号，调整为10px,这样世界一下明朗了。

Weinre测试安卓真机

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

• 首先安装Weinre

  sudo npm install -g weinre

• 在本地开启一个监听服务器
  mac下需要执行命令 ipconfig getifaddr en0

• 指定使用当前机器的 ip 以供移动设备访问使用
  通过ipconfig，知道我的电脑ip为192.168.1.103，在命令窗口下执行

  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文件里加入这种target script.
但我们可以通过代理服务器主页【Target Bookmarklet】一节中 bookmarklet 来实现。

• 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。

本文来自移动端前端开发真机调试实践 和 移动端布局实践 的合并版