移動端 Web 測試調試工具詳解

• 2019 年 12 月 11 日
• 筆記

來源：http://www.51testing.com/

背景

　　雖然移動端Web有著天生的HTML5特性，但是硬體顯示環境的差異、各瀏覽器實現標準的方式的差異讓開發人員不得不花很多時間在測試與調試上。

　　從簡單的JSConsole到跨平台的Weinre再到強大的Ghostlab，再加上各種官方的調試工具，開發測試人員通常需要根據不同的場景使用不同的策略。

　　本文從實際需求出發，通過對測試調試工具的基本原理的解釋，對最具代表性的工具進行了分類，為大家的開發測試策略提供幫助。

　移動端測試調試工具的三種需求

　　程式碼同步：在編輯器中修改程式碼，在移動端自動更新並看到效果。

　　動作同步：在PC上點擊按鈕或跳轉頁面，各個移動測試設備執行相同的動作，測試人員可以直接看到效果。

　　調試功能：在移動端瀏覽器缺乏官方調試工具的情況下，通過JS模擬控制台、元素查看器、樣式編輯器。

　實現原理

　　對移動端程式碼的檢測與控制，主要由以下三個部分構成：

　　目標控制器 (Target)：通常是嵌入到頁面中的JavaScript程式碼，讀取頁面的狀態，發送到調試伺服器，接收並執行調試伺服器的指令。

　　調試伺服器 (Server)：負責接收目標控制器傳來的頁面資訊，通過調試客戶端去展現給開發者，並將調試客戶端發出的指令傳遞給目標控制器去執行。

　　調試客戶端 (Client) : 負責提供UI去操作調試伺服器，展示頁面資訊，駛入調試指令。

　目標控制器的幾種實現方法：

　　向目標頁面中加入一個指向調試伺服器的Script標籤，通過引入外部JS程式碼實現控制。這樣做最簡單且支援最廣泛，缺點是需要改動程式碼。

　　使用iFrame包裝目標頁面

　　使用混合應用包裝目標頁面

　　通過調試伺服器建立代理站點

　　（圖中顯示weinre調試器使用JS修改了Firefox中的console.log方法，將輸出結果發往調試伺服器，並最終在Chrome中的調試客戶端中顯示出來）

　　調試伺服器可以分為兩種：

　　開發機本地。可以是NodeJs、PHP的Server，或者桌面端瀏覽器的內置服務。

　　遠程。使用工具廠商提供的調試伺服器，無需在自己在本地開啟。

　調試客戶端分為以下幾種：

　　1.調試伺服器提供的網頁

　　2.瀏覽器插件

　　3.桌面端應用

　　4.命令行

　　5.典型工具集合

　　6.下面是筆者經過考察實踐後得到的常見測試調試工具的集合。

　　7.主要從以下角度進行分析：

　　8.調試伺服器類型

　　9.調試客戶端類型

　　10.目標頁面控制方式

　　11.目標範圍

　　12.功能特性

　推薦

　　Weinre無疑是最強大的JS模擬調試器，由於使用了Inspector的UI程式碼，使用起來很順手，而且支援各種Web場景。商用的Ghostlab和Adobe Edge Inspect也使用Weinre作為其調試功能，可見其地位。

　　GhostLab現在推出了Windows版，調試與同步功能兼具，應用面廣，是首推的綜合解決方案。但是它的Server在桌面端，並且使用代理站點，在公司的網路環境下使用受限。

　　官方調試器擁有最強大的功能，與桌面端基本相同，可以在開發初期使用，配合LiveStyle和Emmet實現同步快速開發。

　總結

　　移動Web開發本身的複雜性決定了我們不能找到一種完美的測試調試解決方案，但我們可以根據基本原理對工具進行分類，記錄整理之後，根據實際情況選取最優策略。

歡迎參加眾測：

https://wap.ztestin.com/site/register?usercode=FAAAQwMQGAAXAwQBA3QhExcDHAQDPjVaABMIQg%3D%3D