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

每当在 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.


©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页