如何调试 Android 手机网页-阿里云开发者社区

如何调试 Android 手机网页

2012-10-13 1423

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 兵马未动，粮草先行。安排好 debug 工作的道理也一样，调试的基本工作务必先于开发之前搞得好，不然后果很严重……！哈哈，这样的开场白太那个了……其实实不相瞒，俺的实际情况是，到项目后期才懂得那么一点页面调试手段，之前怎么弄……不怕见笑，还是 console.log/alert 几招，甚至几招都算不上，，好原始的说……嗯，少废话，来上货，，一、基于 weinre 的方案的： Weinre 主页：http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/Home.html 直接用 Weinre 那就要自己搭建服务器，麻烦。

兵马未动，粮草先行。安排好 debug 工作的道理也一样，调试的基本工作务必先于开发之前搞得好，不然后果很严重……！哈哈，这样的开场白太那个了……其实实不相瞒，俺的实际情况是，到项目后期才懂得那么一点页面调试手段，之前怎么弄……不怕见笑，还是 console.log/alert 几招，甚至几招都算不上，，好原始的说……嗯，少废话，来上货，，

一、基于 weinre 的方案的：

Weinre 主页：http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/Home.html

直接用 Weinre 那就要自己搭建服务器，麻烦。想不那么麻烦可以试试下面介绍的。

A.Phonegap 集成了 Weinre：

http://debug.phonegap.com/

先在你欲调试的页面置入这段脚本，js src 源来自 phonegap 的，其中 # 号后面紧跟着就是你的 id，由你来指定：

<script src="http://debug.phonegap.com/target/target-script-min.js#sp42"></script>

然后启动你的 Chrome 浏览器，最好是 Chrome，别的浏览器不行，访问 http://debug.phonegap.com/client/#sp42，便可看到我们十分熟悉的 Chrome 调试器界面：

B.Adobe Shadow

不是说要进军 HTML5 市场的吗，所以在 Weinre 的基础上搞了 Shadow（影子），Shadow 与 Phonegap 的相差无几。请恕我这里唐突，先来个Shadow 的官方介绍：

关于Adobe Shadow

weinre非常方便，目前来说是针对移动设备进行远程调试的最佳工具，但在进行真正的跨平台移动web应用开发时，通常开发者要面对多个不同型号的移动设备，此时要使用weinre同时同步在所有设备上进行调试就是一个非常费时费力的事情，Adobe在3月7日通过Adobe labs站点推出了Adobe Shadow，其核心利用了weinre进行远程调试，但是提供了针对多设备同步调试的功能。如果你感兴趣，可以在此下载试用：http://labs.adobe.com/technologies/shadow/

真正有用的地址：

http://debug.shadow.adobe.com:8080/

http://debug.shadow.adobe.com:8080/client/#sp42

Adobe 蛮贴心的，还弄了个 bookmarklet，——俺有空还想瞧瞧这个小 bookmarklet 能作何用……

javascript:(function(e){e.setAttribute("src","http://debug.shadow.adobe.com:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0); // 最后这个 void(0); 亮了～

二、Google 原生方案

所谓“原生方案”，就是利用 Google Chrome 调试工具本身，与 Chrome for Android 浏览器自带的调试工具相对接，与上述的方案有点近似但更为强大。尽管 Google 这个方案比较强大，但是美中不足的是，因为要访问这个http://chrome-devtools-frontend.appspot.com，（总之一见到这个 *.appspot.com 就逃不掉的了……）。

Google 教程介绍得简洁明了，访问地址如下：

https://developers.google.com/chrome/mobile/docs/debugging

我想还是略微介绍下使用步骤，主要的五步如下：

1、确认你已经安装 Android SDK，因为我们需要命令行工具 adb.exe

tips：建议将 adb.exe 加入环境变量，方便调用。

2、成功安装 sdk 后，敲入：

adb forward tcp:9222 localabstract:chrome_devtools_remote

会出现下列提示，表面建立守护进程成功：

3、打开两边的浏览器，一个是手机上的，请注意不是默认浏览器，是 Chrome，切记；然后打开本地 PC 桌面的浏览器，接着输入地址：localhost:9222，供你选择浏览器的哪一张 tab 调试：

4、点击后，跳到 http://chrome-devtools-frontend.appspot.com ，就可以 do what you want:

5、最后，你在 console 控制台中试试 alert('Hello world!'); 看看？

至于这个基于 Chrome 的原生方案，一点仍需注意的就是，在 Hybird 的模式下可能派不上用场，但前面介绍的 Weinre 方案相信可以。原因不详述了。另外是否支持 iPhone 呢？时间关系，我没有做多的测试。因为 iPhone 的 Chrome 装上了，也不知是不是就是使用着 Chrome 的核心？——这个真不晓得，因为曾听说过，苹果不允许别的浏览器核心，，不过话说回来，既然 Android 弄好了，iPhone 也可以放心许多……

P.S: 如果您是 iOS 程序员或者手头上有苹果的机器，那么就幸福多了，把你的 iPhone/iPad 升级到 iOS 6，然后在“设置 > Safari > 高级”开启 Safari 的远程调试功能即可，——不像 Android 的那样强制 Chrome 浏览器， iOS 使用自带的 Safari 即可。该功能点是 iOS 6 新增的功能，用来代替原来简单的“调试控制台”。