Posted on

[30- 相關工具] 手機遠程測試

Android系統的手機設備偵錯

在電腦上的偵錯工具首推的就是 Chrome 開發者工具,但是由於若我們想要做手機遊戲,不同的設備有可能會有不同的狀況,我們會需要在不同手機上去做除錯。如果是Android系統的手機,開啟Enable USB Debugging之後,用USB線連至電腦,則可以藉著使用chrome去做遠端偵錯。
偵錯步驟如下:

  • 選擇 Settings > Developer Options > Enable USB Debugging以啟用設備上的開發者選項(要如何開啟請參考此篇文章:Set up a device for development
  • 使用一個 Google 帳戶登錄到 Chrome
  • 打開Chrome 開發者工具(在Chrome選單中選擇 更多工具 > 開發者工具)
  • 在 DevTools 中,點擊 Main Menu 主菜單,然後選擇 More tools > Remote devices。
  • 在 DevTools 中,點擊 Settings 標籤
  • 確保已啓用 Discover USB devices。
  • 使用 USB 將 Android 設備直接連接到電腦上
  • 在左測的remote target選擇要偵錯的設備

iOS的手機設備偵錯

首先針對要偵錯的 iDevice 接上 Mac 並且進入 iOS 設定中的「Safari」選項,在「進階」選單中開啟「網頁檢閱器」,iPhone 畫面如下:

接著我們開啟 MacOS 中的 Safari,並且啟用「開發」選項,如下圖:

當我們的 iOS 開啟網頁時,就可以在 Mac 中的 Safari「開發」功能表中看到連上線的 iDevice,直接選取正在開啟的頁面就可以進行 Debug 囉,畫面如下:

Debug的畫面如下:

利用 weinre 遠端 Debug 網頁元素

官網位置:https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

weinre 的全名是 WEb INspector REmote,顧名思義是一個遠端的網頁檢視器。在技術上 weinre 其實是一個以 node.js 為基礎的 Http Server,利用了 Web 即時通訊的技巧,將某個已經掛上 Target JavaScript 的 Browser ,透過背景將 DOM 資訊傳遞到 Debugging Tools 中。Debugging Tools 也是由 Web 進行設計,連接後雙方可以即時傳遞一些命令讓我們即時看見反饋,是一個很聰明的做法。而且沒有太多的環境限制,基本上可以執行 JavaScript 的瀏覽器都可以使用。

1. 安裝方式:可以直接由網址下載安裝,也可以透過npm來安裝
透過npm
sudo npm -g install weinre
直接透過網址安裝
sudo npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

2. 啟動服務
weinre –boundHost 10.0.0.13

接著在電腦內打開網址 http://10.0.0.13:8080,會看到如下的畫面:

3. 設定要被觀察的程式
在程式內加入下面的script

<script src="http://10.0.0.13:8081/target/target-script-min.js"></script>

接著重新整理就可以看到我們在手機設備上開啟的網頁的資訊,點選該連結就可以偵錯該程式

4. 偵錯畫面如下

參考資料