移動端所有瀏覽器頁面調試方法

通常在移動端頁面調試時，除了移動端chrome和safiri,幾乎對其他瀏覽器無法調試。在測試過程中，通常解決兼容性佔了大部分時間，對那些手機廠商自帶瀏覽器和第三方瀏覽器深惡痛絕，爲什麼不使用統一標準。

spy-debugger 移動端瀏覽器調試工具

頁面調試、抓包工具。遠程調試任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，無需USB連接設備。

1.安裝

需要安裝node，在這不做介紹了，然後安裝 spy-debbugger 依賴包到全局環境。（這裏使用了npm,yarn也不錯）

npm install spy-debugger -g

2.PC端運行

打開終端運行

spy-debugger

當出現下圖所示即表示在PC端運行成功，記住IP和node-mitmproxy啓動端口，後面需要使用，上圖這個樣子就成功啓動了，瀏覽器打開 http://127.0.0.1:65443，後續調試的的功能都在這個頁面上操作。

3. 設置手機端HTTP代理

首先電腦和手機保持在一個網絡下，或連接同一個wifi。然後到手機端設置所連wifi的代理。進入wlan列表，

長按或者點擊最右的箭頭（IOS是i符號），進入當前wifi詳情頁

手機滑到最下面有個代理，點開選擇爲手動

然後連接電腦端的代理，就下圖中的 將第2步中的IP和端口分別填入主機名和端口

4.手機端下載並安裝證書（首次使用安裝）

手機端第三方瀏覽器輸入 http://s.xxx （不要用自帶瀏覽器和微信瀏覽器），下載證書到本地。

安卓端安裝證書的兩種方式：

其一：設置——WiFi——高級設置——安裝證書

其二：設置——更多設置——系統安全——從存儲設備安裝證書

IOS端安裝證書的方式看下面鏈接就行：

https://www.jianshu.com/p/d31...

5.用手機瀏覽器訪問你要調試的頁面即可

下圖就是用手機端瀏覽器打開頁面，targets會顯示監聽到打開的頁面。

菜單欄的 Elements 、Resources、Network、Timeline、Console和chrome的開發工具項類似。

體驗肯定沒PC端瀏覽器的好，但能夠滿足大部分調試的需求。