安卓系统上的远程 JS 调试 Remote JavaScript Debugging on Android

简介: 每当在 Android 移动设备上调试网页时,开发人员往往都会不自觉陷入调试的泥潭中去。《Android开发指南》提供了一个解决方案,却有点繁琐复杂。因此,许多 Web 开发人员会倾向于使用类似 Firefox Firebug 的或像 WebKit 的 Web Inspector 之类的工具进行调试,因为它们的确容易使用,而且功能强大。

每当在 Android 移动设备上调试网页时,开发人员往往都会不自觉陷入调试的泥潭中去。《Android开发指南》提供了一个解决方案,却有点繁琐复杂。因此,许多 Web 开发人员会倾向于使用类似 Firefox Firebug 的或像 WebKit 的 Web Inspector 之类的工具进行调试,因为它们的确容易使用,而且功能强大。不过,即使开发人员使用了这些工具,但又有另外一个问题,就是调试的结果与最终设备上显示的完全不同。对此,我们决定去创建一套属于自己的解决方案——就是,根据 Android 团队所提出标准解决方案,衍生出来的这么一个工具——而实际上却又要简单得多的工具。我们称它为“RemoteJS”,RemoteJS 允许您调试真正运行在 Android 设备中 JavaScript 代码,或者说,就是一个在你工作站上所运行的仿真器

Developers often run into debugging hurdles when testing web pages for Android mobile devices. And, while the Android Developers Guide provides a solution, it’s a bit cumbersome and complex. So, many web developers often turn to tools like Firefox’s Firebug or Webkit’s Web Inspector because they are easy to use, powerful, and convenient. However, what developers often find when using these tools is that the end result is quite different on the actual device. We decided to create our own solution — a tool based on the standard solution proposed by the Android team, but much simpler to use. We call it RemoteJS, a tool that enables you to debug your JavaScript code while running on an Android device or emulator from your workstation.

Build RemoteJS

构建 RemoteJS 程序是一个相当直截了当的过程。首先,请确认您已安装了 Qt 框架。然后,在Sencha 实验室源码库全新的“Android 工具”那里下载我们 RemoteJS 源代码。构建桌面应用程序如下:

Building the application is a fairly straight forward process. First, confirm that you haveQt framework installed. Then, download the RemoteJS source code from our brand new Android Tools repository on Sencha Labs. Build the desktop application as follows:

git clone git://github.com/senchalabs/android-tools.git
cd android-tools/remotejs/src/desktop
qmake && make 

接着需要做的的就是安装 Android SDK,将设备联入计算机(或启动你的模拟器)。下面的截图是位于模拟器旁边一个的 RemoteJS 工具,用来检测来自Sencha Touch 的例子

Next, all you need to do is install the Android SDK, plug your device in (or launch your emulator), and you’re ready to go. Here’s a screenshot of the RemoteJS tool running next to an emulator, inspecting anexample from Sencha Touch:


该程序会自动安装一个包,包的名字与设备上的名称相同。这个工具,实际上是代替 Android 浏览器的网页加载器。由于两款程序都是使用同一款的 Web 浏览器引擎,所以从程序员角度看,不需要顾忌那些一致性的担心。用于正是这两个应用程序相同。欲了解工作原理及实施细则,请参阅自述文件。只需在控制台上输入 URL 就可以打开网址。如果你输入不包括开头的协议,就默认是“www”的。如果你连接超过一个以上的设备,您将会在一个列表中作出选择。同样,当您断开连接的设备时它会侦测这一事件,然后它会回落到刚才唯一连接着的设备。然后等待直到你再次连接下一个设备。请注意,要输出一些内容,你需要使用console.log

The program automatically installs a package with the same name on the device.  This tool will actually be the one loading your page, instead of the Android browser.  This doesn’t represent any concern from the developer’s perspective, since the web engine component that is used is exactly the same on both applications. For further details on how it works and the implementation details, please refer to theREADME. To open a specific URL, just enter it on the console.  If you don’t include the protocol, only addresses starting with “www” will be validated.  If you have more than one attached device, you’ll be presented with a list to choose from.  Similarly, it will detect when you disconnect the device already being used.  It will then fall back to the only attached device left, if that’s the case, or wait until you connect one again. Please note that in order to actually get some output back, you need to make use of console.log.

编写远程调试的脚本 Scriptable Remote Debugging

我们认为,既然 GUI 版本的工作那么好,于是我们可以写类似而且无缝的东西。主要目标是,充分利用 Python 中已选择实现的语言自动化页回归测试。为此,一个Android 调试桥(Android Debug BridgeADB)的 Python 模块,便可以非常灵活地从您的主机上写脚本。自然,一个 RemoteJS 外壳版本,也写在 adb 模块的顶部。它侦听 stdin 输入的 JavaScript 命令然后输出结果到 stdout。这里马上就有一个例子,调试另一个Sencha Touch 的例子

We thought that since the GUI version worked so well, we could write something similar that would run headlessly.  The main goal was to automate page regression tests, taking full advantage of Python, the chosen implementation language.  For that, anAndroid Debug Bridge (adb)Python module was written, which allows for very flexible scripting from your host. Naturally, a shell version of RemoteJS was also written on top of the adb module.  It listens for JavaScript commands on stdin and output results to stdout.  Here’s the tool in action, debugging another Sencha Touch example:


未来 Coming Up

源代码不断在变化,我们计划为这些工具注入更多的功能。欢迎你以任何方式参与贡献。adb Python模块,将有可能远程自动注射设备上记录的事件,并可在任何时候进行截图。这将使线性的自动检查一致性成为可能。所以敬请关注,并不妨 clone 我们公共库上的Android 工具包然后亲自试一试。所有可用都遵循 MIT 许可。

The source code is changing constantly, and we plan to extend the capabilities of these tools.  You’re more than welcome to contribute in any way. With the adb Python module, it will be possible to remotely automate the injection of recorded events on the device and grab screenshots at any point.  This will allow automated verification of behavior consistency along time. Stay tuned and please feel free to clone our android-tools public repository to play around with the tools and code.  All is available under the MIT license.


目录
相关文章
|
5天前
|
Shell Android开发
Android Activity重写dump方法实现通过adb调试代码
Android Activity重写dump方法实现通过adb调试代码
11 0
|
8天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
10天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
21 0
|
12天前
|
JavaScript 前端开发 开发工具
【JavaScript 技术专栏】Node.js 基础与实战
【4月更文挑战第30天】本文介绍了Node.js的基础及应用,包括事件驱动的非阻塞I/O、单线程模型和模块系统。内容涵盖Node.js的安装配置、核心模块(如http、fs、path)及实战应用,如Web服务器、文件操作和实时通信。文章还讨论了Node.js的优劣势、与其他技术的结合,并通过案例分析展示项目实施流程。总结来说,Node.js是高效后端开发工具,适合构建高并发应用,其广阔的应用前景值得开发者探索。
|
12天前
|
前端开发 JavaScript 开发者
【JavaScript技术专栏】JavaScript错误处理与调试技巧
【4月更文挑战第30天】JavaScript开发中的错误处理和调试至关重要。语言提供三种错误类型:语法错误、引用错误和类型错误。为处理错误,可以使用`try...catch`捕获异常,`throw`语句显式抛出错误,以及`Error`对象创建自定义错误。调试技巧包括使用`console.log`、设置断点、利用源映射和性能分析。这些方法能帮助开发者高效定位和解决问题,提高代码质量。
|
12天前
|
缓存 算法 Android开发
构建高效安卓应用:深入理解Android Profiler
【4月更文挑战第30天】 在移动开发领域,应用性能优化是提升用户体验的关键因素之一。针对安卓开发者,Android Studio提供的Android Profiler是一个强大的工具,它集成了多个性能分析仪器,帮助开发者监控、分析并优化应用性能。本文将深入探讨Android Profiler的核心功能,并通过案例演示如何利用该工具定位性能瓶颈,以及采取相应的优化措施,从而构建更加高效的安卓应用。
|
18天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
21 2
|
19天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
19天前
|
Android开发
Android源代码定制:Overlay目录定制|调试Overlay资源是否生效
Android源代码定制:Overlay目录定制|调试Overlay资源是否生效
18 0
|
19天前
|
Android开发 内存技术
Android 通过tinyalsa调试解决录制和播放音频问题
Android 通过tinyalsa调试解决录制和播放音频问题
35 1