安卓系统上的远程 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.


目录
相关文章
|
21天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
151 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
22天前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
66 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
24天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
54 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
24天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
51 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
1月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
82 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
1月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
73 32
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
109 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
3月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
122 11
|
20天前
|
安全 Android开发 iOS开发
escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
escrcpy 是一款基于 Scrcpy 的开源项目,使用 Electron 构建,提供图形化界面来显示和控制 Android 设备。它支持 USB 和 Wi-Fi 连接,帧率可达 30-120fps,延迟低至 35-70ms,启动迅速且画质清晰。escrcpy 拥有丰富的功能,包括自动化任务、多设备管理、反向网络共享、批量操作等,无需注册账号或广告干扰。适用于游戏直播、办公协作和教育演示等多种场景,是一款轻量级、高性能的 Android 控制工具。

热门文章

最新文章

  • 1
    Android历史版本与APK文件结构
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 4
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 5
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 6
    【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
  • 7
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
  • 8
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
  • 9
    Android实战经验之Kotlin中快速实现MVI架构
  • 10
    android FragmentManager 删除所有Fragment 重建