如何在移动设备上调试html5开发的网页

在咱们用phoengap+html5作的移动app中，常常遇到的问题就是 本地网页兼容可是到了app出现不兼容的状况，缘由是手机端页面，大多运行在webkit内核的浏览器上，但仍是会因平台、厂商的不一样而有种种兼容性问题。

 

下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是，iOS平台只能用自带的Safari浏览器来调试，而Android平台也只能用google Chrome浏览器来调试。固然，我目前只发现这么两种手段，若是你还有其余方法可调试更多的浏览器，但愿你能留言告诉我。

1、iOS + Safari

一、打开手机web检查器。

经过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），而且你会看到该选项下面对电脑操做的相应描述，照作就好。

2.连接电脑（Mac）

2.1 先在手机Safari中打开你想调试的网页，并用数据线链接到电脑（我这里是Mac）

2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到以下图所示（点击查看大图）：

3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，以下图（点击查看大图）：

 

3.调试网页

如上3.3图所示，此时你能够查看手机网页的DOM结构，而且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，以下图（点击查看大图）：

 

2、Android + Chrome

1.设置手机

 

1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下（这是官方文档里的说法）就会提示“你已成为开发者”。

 

1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

 

2.设置电脑（Mac）

这块比较麻烦，由于要装一下Android的SDK。

2.1 下载Android SDK，并解压，我把整个adt目录放在了 /Users/David/adt/ 这里。

2.2 设置环境变量 。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open .bash_profile，若是文件存在则会打开，若是不存在则再输入touch .bash_profile 建立并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ，关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。

2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote  。

 

3.连接电脑

3.1 在手机上的Chrome里打开想要调试的网页，用数据线链接手机和电脑（个人是Mac。唉～我只是强调平台的不一样，不要误会）。

3.2 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：

 

4.调试网页

4.1 你能够点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表，以下图：

 

4.2 点击上图中的网站缩略图，就会跳转到Google的一个代理连接（连接可能被墙……，挂代理）就会打开以下图所示的控制台（点击查看大图）：

 

4.3 这就和电脑上网页调试没什么差异了，鼠标通过DOM节点，手机上的布局一样也会高亮起来：

好的，完结。