安卓系統上的遠程 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:

[plain] view
plaincopy

1. git clone git://github.com/senchalabs/android-tools.git  
2. cd android-tools/remotejs/src/desktop  
3. 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 瀏覽器的網頁載入器。由於兩款程式都是使用同一款的 網頁瀏覽器引擎，所以從程式員角度看，不需要顧忌那些一致性的擔心。用於正是這兩個應用程式相同。欲瞭解工作原理及實施細則，請參閱讀我檔案。只需在控制台上輸入
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.

REFERENCES:http://blog.csdn.net/zhangxin09/article/details/7069583