如何调试 Android 手机网页

简介: 兵马未动,粮草先行。安排好 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 新增的功能,用来代替原来简单的“调试控制台”。


接着就是打开 Safari,开启你要调试的网页。更详细的操作步骤在:《iOS6新功能 如何用 Mac远程调试iPhone》http://iphone.265g.com/news/121815.html

三、Logcat


前两个方案都有一个特点,就是适合于界面的调试,html/css 那些,如果你只是调试 js,那么推荐用 Sdk 自带的 logcat 就可以。当然 Eclipse 那里已整合 Logcat(如上图),这里就介绍一下命令行的,不依赖 IDE。用法如下:

adb logcat "|" grep Console‎
这样你 js 中的 console.log(xx) 可以打出来了。这里的话,同事告诉我 grep 是 liunx 过滤器,,

注意有些手机并不支持浏览器 console 打印,我这里的 HTC 双擎便是不支持。后来换 Moto ME811 立刻 OK。

ref :

《安卓平台的javascript远程调试》http://www.darkfe.com/blog/android-web-browsers-remote-debug/

《用Weinre远程调试移动网页》http://www.imququ.com/post/remote_debugging_with_weinre.html

《getting-started-with-weinre-mobile-debugging-on-windows》http://dustint.com/post/482/getting-started-with-weinre-mobile-debugging-on-windows

还有我以前翻译的一篇文章:《安卓系统上的远程 JS 调试 Remote JavaScript Debugging on Android 》,不过现在感觉没什么用了……

目录
相关文章
|
5月前
|
Shell Linux 开发工具
"开发者的救星:揭秘如何用adb神器征服Android设备,开启高效调试之旅!"
【8月更文挑战第20天】Android Debug Bridge (adb) 是 Android 开发者必备工具,用于实现计算机与 Android 设备间通讯,执行调试及命令操作。adb 提供了丰富的命令行接口,覆盖从基础设备管理到复杂系统操作的需求。本文详细介绍 adb 的安装配置流程,并列举实用命令示例,包括设备连接管理、应用安装调试、文件系统访问等基础功能,以及端口转发、日志查看等高级技巧。此外,还提供了常见问题的故障排除指南,帮助开发者快速解决问题。掌握 adb 将极大提升 Android 开发效率,助力项目顺利推进。
130 0
|
2月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
60 8
|
2月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
139 4
|
3月前
|
Ubuntu Linux Android开发
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
本文介绍了如何在Android设备上安装Termux和AnLinux,并通过这些工具运行Ubuntu系统和桌面环境。
204 2
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
|
2月前
|
安全 搜索推荐 Android开发
Android vs. iOS:解锁智能手机操作系统的奥秘####
【10月更文挑战第21天】 在当今这个数字化时代,智能手机已成为我们生活中不可或缺的伙伴。本文旨在深入浅出地探讨两大主流操作系统——Android与iOS的核心差异、优势及未来趋势,帮助读者更好地理解这两个平台背后的技术哲学和用户体验设计。通过对比分析,揭示它们如何塑造了我们的数字生活方式,并展望未来可能的发展路径。无论您是技术爱好者还是普通用户,这篇文章都将带您走进一个充满创新与可能性的移动世界。 ####
100 3
|
3月前
|
Web App开发 Android开发
利用firefox调试安卓手机端web
该教程详细介绍如何通过Firefox浏览器实现手机与电脑的远程调试。手机端需安装最新版Firefox,并按指定步骤设置完成;电脑端则需安装15版及以上Firefox。设置完成后,通过工具栏中的“远程调试”选项,输入手机IP地址即可连接。连接确认后,即可使用电脑端Firefox调试器调试手机上的Web信息。注意,调试前手机需提前打开目标网页。
115 2
|
3月前
|
Android开发 iOS开发 UED
安卓与iOS的较量:谁才是智能手机市场的王者?
本文将深入探讨安卓和iOS两大智能手机操作系统之间的竞争关系,分析它们各自的优势和劣势。通过对比两者在市场份额、用户体验、应用生态等方面的表现,我们将揭示出谁才是真正的市场领导者。无论你是安卓粉丝还是iOS忠实用户,这篇文章都将为你提供一些有趣的观点和见解。
|
3月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
425 0
|
5月前
|
Ubuntu Android开发
安卓系统调试与优化:(一)bootchart 的配置和使用
本文介绍了如何在安卓系统中配置和使用bootchart工具来分析系统启动时间,包括安装工具、设备端启用bootchart、PC端解析数据及分析结果的详细步骤。
252 0
安卓系统调试与优化:(一)bootchart 的配置和使用
|
5月前
|
Android开发
【Azure 环境】记录使用Notification Hub,安卓手机收不到Push通知时的错误,Error_Code 30602 or 30608
【Azure 环境】记录使用Notification Hub,安卓手机收不到Push通知时的错误,Error_Code 30602 or 30608