­

移動web真機調試方案

  • 2019 年 10 月 4 日
  • 筆記

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/CSXIAOYAOJIANXIAN/article/details/100552960

移動web真機調試方案

文章目錄

Write By CS逍遙劍仙 我的主頁: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

對於前端開發來說，在pc端使用chrome等瀏覽器的開發者工具簡直是好用到爆，Chrome手機模擬器可以幫助開發調試移動端web頁面，然而在真機內調試起移動端web頁面的時候就顯得無從下手。目前已經有不少移動端的真機調試工具，本人在綜合使用後推薦以下兩類調試方案：chrome/safari真機調試 和 spy-debugger調試。

1. Chrome手機模擬器

Chrome手機模擬器適合簡單移動網頁調試，支持模擬觸摸事件，還能夠模擬各種移動設備的user-agent和屏幕大小，是移動端web開發的主要調試方式。下面提供一些常用的user-agent：

QQ Android：

Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043128 Safari/537.36 V1_AND_SQ_7.0.0_676_YYB_D PA QQ/7.0.0.3135 NetType/4G WebP/0.3.0 Pixel/1080

QQ iOS：

Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 QQ/6.7.1.416 V1_IPH_SQ_6.7.1_1_APP_A Pixel/750 Core/UIWebView NetType/4G QBWebViewType/1

微信 Android：

Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043220 Safari/537.36 MicroMessenger/6.5.7.1041 NetType/4G Language/zh_CN

微信 iOS：

Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 MicroMessenger/6.5.6 NetType/4G Language/zh_CN

支付寶：

Mozilla/5.0 (Linux; U; Android 4.2.1; zh-cn; HUAWEI G610-T00 Build/HuaweiG610-T00)   AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30   AlipayDefined(nt:WIFI,ws:360|640|1.5) AliApp(AP/9.0.1.073001) AlipayClient/9.0.1.073001 GCanvas/1.4.2.15

2. Chrome/Safari真機調試

移動端開發，當然是優先真機調試，真機調試更加順暢，支持js斷點調試以及絕大多數Chrome DevTools一樣的調試功能（不支持Chrome擴展）。

2.1 Android + chrome

手機端安裝Chrome瀏覽器，使用USB連接到PC，同時打開手機的USB調試模式。 然後在PC端打開chrome瀏覽器，地址欄中輸入: chrome://inspect，選中"Discover USB devices"選項，打開頁面進行調試。

注意：

  1. 部分安卓手機開發者模式的打開方式比較隱蔽：設置 > 關於手機 > 內部版本號，連續點擊七次，退回上一級菜單，才能看到"開發者模式"
  2. 安卓手機還可以打開微信App的webview的debug模式，只需要在微信里訪問http://debugx5.qq.com，在打開的頁面里將調試模式打開並重啟微信即可，然後打開chrome://inspect、翻牆、連接手機就可以調試了

2.2 iOS + Safari

iPhone和Mac自帶Safari瀏覽器，但同樣要使用USB連接到PC，然後分別對Mac和iPhone進行如下設置：

  • Mac瀏覽器設置：Safari -> 偏好設置 -> 高級 -> 勾選"在菜單欄中顯示開發"
  • iPhone 設置：設置 -> Safari -> 高級 -> 打開 Web 檢查器

通過手機的 Safari 來打開 H5 頁面，然後將Mac上的Safari瀏覽器打開，選擇開發 -> iPhone，就出現調試界面了，在iPhone上也能斷點調試js了。

注意： Mac上可以使用Simulator模擬器（需要先安裝Xcode），可以模擬調試多個版本iPhone手機，還可以配合Safari來調試頁面，此模擬器的完成度幾乎可以替代真機。

3. spy-debugger調試

然而，很多場景下Chrome/Safari的真機調試有局限性，例如：在微信或其他App/瀏覽器中打開的頁面，由於不能直接在 chrome/safari 中打開，因此不能直接使用瀏覽器真機調試工具。

市面上的工具有不少，weinre、vConsole等等，實際使用下來還是更推薦spy-debugger，spy-debugger是一站式頁面調試、抓包工具，可以遠程調試任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等），支持HTTP/HTTPS，無需USB連接設備。github地址：https://github.com/wuchangming/spy-debugger。

spy-debugger內部集成了weinre，通過代理的方式攔截所有html自動注入weinre所需的js代碼，簡化了weinre需要給每個調試的頁面添加js代碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼，讓頁面調試更加方便，且支持HTTPS。

安裝和使用方式官方文檔已經寫的非常詳細，此處不再贅述：https://github.com/wuchangming/spy-debugger/blob/master/README.md

4. 總結

針對上述移動web的調試方案，進行簡單總結：

  1. 大部分不涉及真機調試的情況優先使用Chrome手機模擬器進行開發調試。
  2. 需要真機調試時優先使用真機+瀏覽器開發工具進行調試。
  3. Chrome/Safari真機調試應用場景受限時可以使用spy-debugger進行調試抓包。

VirMach 便宜 VPS

QNews

QNews