研發人員的小工具:APP Manager 的簡易上手

作者:
瀏覽:271
研發人員的小工具:APP Manager 的簡易上手

App Manager

最近在 Firefox 瀏覽器有釋出一個新工具“應用程式管理員 APP Manager“,只要按照這裡的步驟下載與安裝( https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS/Using_the_App_Manager ),就可以輕鬆的開始使用,這個工具可以直接在 Firefox OS 手機和模擬器( Emulator )上去進行除錯,開發,和測試等程序。

 

為什麼要在這裏介紹這個工具呢?理由很簡單,如果你是一個剛開始在 Firefox OS 上做開發,對於程式碼偵錯流程不熟的工程師,或是像我身為一個測試人員,有一些測試個案與流程是需要將測試自動化。假使直接去看原始碼,這是一份吃力不討好的工作。因為你要找的物件如、 HTML 元件等可能散佈在不同的檔案中,此時你就需要有個好工具,可以輕鬆的找到所需的元件或物件,而 APP Manager 就是一個可以輕鬆勝任的工具。

 

所以,在這篇文章中我將先介紹一些簡單但是實用的功能,不管你是測試人員或是研發人員,都可以輕鬆的操作,達到你的需求:

(A) 手機上的基本資料:

  1. 當手機連上線之後,可以輕鬆地在 APP Manager上找到一些基本、但是重要的資料,如 B2G 版本,Gecko 版本,如圖ㄧ。

    研發人員的小工具:APP Manager 的簡易上手

    圖一:左上角有顯示手機版本等資訊,右邊則是安裝的程式

(B) 找到程式中元件的 ID:

  1. 打開 APP Manager,選擇 Device panel。
  2. 用 ADB 接上手機或是模擬器,,如果不知道 ADB 如何操作,也可以用瀏覽器的附加元件(ADB Helper)來連接(註一),它已經將連結與操作的命令整合在 APP Manager 內。
  3. 當手機連上後,會出現手機裡的內容與軟體,如圖一的右邊程式資訊。
  4. 先啟動程式,點選 Start。
  5. 再點選要測試軟體的旁 Debug 按鈕,如圖二。

    研發人員的小工具:APP Manager 的簡易上手

    圖二:點選Debug

  6. 按完 Debug,會出現另一個工具視窗,裡面有幾個功能,顯示了該軟體的相關程式碼,詳細的介紹在稍後的 “ E: 程式碼與手機軟體對照” ,這裡點選 Inspector。
  7. 選擇左上角有個箭頭指示的按鈕,如圖三。

    研發人員的小工具:APP Manager 的簡易上手

    圖三

  8. 此時,請用滑鼠或是手點該軟體,將可以看到被點到的元件 ID 顯示在工作視窗上。在此是打開 Clock 的程式,點選該程式的 New Alarm,此時該元件會如圖四顯示。

    研發人員的小工具:APP Manager 的簡易上手

    圖四:顯示在被打開的元件上

(C) 螢幕截取:當手機出現臭蟲 (bug) ,此時 RD 常會需要問題發生時的畫面來去判斷問題,這時要如何做呢?

  1. 只要手機仍然跟 App Manager 連著時,按下截圖(SCREENSHOT),就可以輕鬆獲得手機當時的畫面。
  2. 這個畫面會被載入到另一個 Firefox 視窗顯示出來,按下另存圖片即可轉存成圖片檔案,如圖五。

    研發人員的小工具:APP Manager 的簡易上手

    圖五:截圖顯示

(D) 安裝軟體: 輕易地將想測試的軟體 APP 透過這個工具上傳到手機去。

  1. 準備好軟體。
  2. 選擇 APP Manager 的 Apps panel。
  3. 選擇從本地裝、或是從網址去裝。在此,我們選擇了本地來安裝,選擇所在路徑上的 App 後,會顯示該軟體於 App Manager,如圖六。

    研發人員的小工具:APP Manager 的簡易上手

    圖六:要安裝的程式資訊

  4. 選擇“UPDATE” ,就可以完成安裝,在右下角的 Console 裡可以看到安裝完成,如圖七。

    研發人員的小工具:APP Manager 的簡易上手

    圖七: Console Window上顯示已安裝成功

  5. 再切回 Device panel,你可以看到該程式顯示於安裝清單上。

(E) 程式碼與手機軟體對照:這部分對於程式開發者而言,是可以輕鬆的找到所需的程式碼或是協助偵錯的。只要將程式啟動,點選 Debug ,此時該程式的 panel 出現在 APP Manager 的左邊,而在該視窗上方有不同的選項可供使用。這裡先介紹一些常用的選項,之後會有更詳細的介紹。

  1. Console : 會有該程式的一些 log 輸出
  2. Inspector : 這裡會秀出程式的 HTML 與一些元件的程式碼。
  3. Debugger : 可以看到對應的程式碼,也可以一步一步 trace 。

 

這個工具才剛在2013年中釋出沒多久,相信未來會有更多的功能被加進去,不管你是 RD 還是 QA 抑或是任何 Firefox OS 開發有興趣的人 ,都可以從這個簡單的小工具得到不少幫助。

註一:在此可以下載模擬器與 ADB Helper:https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/