cordova/phoneGap 開發調試工具

原文地址

一、前言

Ripple Emulate：使用Google模擬器，可以幫到大部分的調試，除了需要調用手機設備方面的功能除外。GapDebug：真機安裝apk，電腦端和真機端同步調試，適用的項目phonegap/cordova/ionic。

二、Ripple Emulate安裝和使用

Apache Ripple主頁：

http://ripple.incubator.apache.org/

安裝：

npm install -g ripple-emulator

使用方法：

項目路徑執行命令行：ripple emulate ；會在默認瀏覽器打開網頁版的模擬器。

模擬項目失敗可能的原因

運行的路徑內沒有支持的項目。比如沒有index.html文件。如果是cordova項目可能沒找到platform的文件夾，這時會有cordova相關報錯。

三、GapDebug安裝和使用

非常驚喜的發現了這個工具，可以偵聽安裝在設備上的app，並且進行調試。

用前注意

1. 國外的軟件，又涉及到google，所以，這個軟件下載要翻牆；第一次使用時軟件會自動下載android debug tool，從google下載，所以也要翻牆。如果翻不動牆，又不能通過萬能的互聯網找到解決方法，那可以不用再往下看了。
2. 親測的是最新版2.1，可以用。之前用過網上找的1.0，連接不上手機

正文開始

(下面摘自官方指南並翻譯)

調試移動app

使用GapDebug是非常簡單的，只需要連接手機，然后就可用起來！

移動端配置

• iOS：啟用Web Inspector

  Settings ⇨ Safari ⇨ Advanced ⇨ Web Inspector，滑動打開

• Android：啟用USB調試

  Settings ⇨ Developer Options ⇨ 勾線 USB Debugging

• 允許APP應用調試

  以Phonegap應用為例，編輯 platforms/android/AndroidManifest.xml，添加：

  <manifest>
       ....
       <application android:debuggable="true" />
       ....
  </manifest>
  

  如果使用Phonegap Developer App，則不需要上述設置。

打開GapDebug

1. 從windows開始菜單或Mac Finder打開GapDebug。

沒有連接設備的GapDebug界面：

運行后，GapDebug在你的系統上會產生一個調起快捷菜單的圖標，windows是狀態欄右側的托盤，Mac在上面的通知欄上。從Windows系統托盤打開的用戶界面：

2. 使用USB數據線連接你的設備到你的工作站（workstation）。（USB線連接手機和你的電腦）

3. 允許你的工作站作為一個信任設備。最初你的設備連接你的工作站時，你可能收到提示工作站否是可信任的連接源。選擇OK或Trust。

在設備界面的設備信息展示。

USB線連接Nexus7 Android設備

提示：我們建議你的設備不使用自動鎖屏或休眠設置防止沒有響應,並且需要開啟開發者模式中的USB調試功能。

4. 在你的設備上，開始你想做的調試。app將呈現在你的設備面板的設備詳情下方。
   QRConference Buddy app在設備上的呈現

5. 查看連接設備和可用的app。選擇一個app在一個新的追蹤視圖（Inspector View）開始一個調試對話。
   調試中的安卓appQR Conference Buddy

用戶界面

界面和瀏覽器的開發者工具都大同小異，很容易上手。

實時調試（Instant Debugging）

app可以做實時調試，GapDebug自動檢測app的運行並立即開始響應。使用這個圖標切換實時調試。

安裝一個app到你的設備

在你的操作系統里你能夠使用GapDebug快捷地安裝一個或多個app文件到你的設備。有兩個方法安裝app——使用安裝app圖標或拖拽安裝文件到你連接的設備上。安裝后app會自動運行，看自動運行設置

注意：安裝到Androi設備前，設置設備允許安裝Google應用商店以外的資源（國產的手機根本不用擔心這個）。

安裝app

1. 點擊圖標

2. 選擇你要安裝的IOS（.ipa）或android（.apk）文件

3. 當安裝完成后設備面板上多出一條app提示

使用拖拽文件安裝

1. 打開你的文件所在的文件夾

2. 將文件拖拽到設備面板上

3. 安裝完成后會出現一個app提示。

自動和手動運行

GapDebug能自動運行安卓或IOS設備上最新安裝的app。另外GapDebug支持手動開啟app。

Launch-After-Installation設置

app安裝后GapDebug能立即運行它。這個功能節約了從安裝app到調試不受干擾的時間。控制app運行功能下圖有兩個設置項。

“Start app after installation”項默認是勾上的。通過GapDebug安裝的app會自動在你的設備上啟動。

“Only start app if previously running”項允許你指定app運行，僅限運行過或更新過的已安裝app。

注意：在IOS設備上運行app需要做其他設置。詳情去看IOS設置。

Android設備上的手動運行app

1. 點擊圖標的圖標

2. 從菜單中單擊要運行的app。菜單關閉后app將立即運行

調試多個app

你可能需要同時調試多個app。例如，你可能同時調試一個app的IOS和Android兩個版本。當你選擇設備面板上的一個app時，調試選項卡打開。還有，當前激活的選項卡是藍色的。

當你選擇第二個app調試時，一個新的選項卡打開。單擊可以切換到另一個選項卡。兩個選項卡是藍色時因為他們同時打開的是一個調試實例。無論如何，當前使用的是高亮的，其他的是灰色的。

設備視圖截屏

點擊Snapshot圖標為設備視圖截屏

從Settings設置你想如何操作截圖

下載、查看和清除設備日志(sysylog)

一個設備系統日志包含主要設備和應用事件，能夠幫助診斷應用或系統級別錯誤。

下載和查看日志

操作如圖，點擊菜單的Syslog選項

從Settings中設置你想對日志的操作

選項1，下載；選項2，打開；選項3，下載並打開

清除日志

高亮的Clear Syslog項點擊后清除日志

重啟和設備關機

Restart重啟，Power Off關機

參考文章：原文鏈接