9102了，你還不會移動端真機除錯？

劉小夕發表於2019-03-22
除錯

移動端除錯困難

很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行除錯，沒有問題後，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏視覺化的介面。不似在PC端，我們能直觀的去改變樣式，或者是進行斷點除錯。有時，在移動端我們不得不借助於alert來除錯，但是這樣的除錯方法效率極其低下，很多時候，都是靠經驗，或者是靠排除法。甚至，我們不得不歸結為是瀏覽器的實現問題。

那麼，有什麼什麼方法，能夠讓我們除錯移動端的適配的時候，像除錯PC端一樣直觀呢？本文旨在為你提供移動端的除錯方法，希望能夠為你開啟新的一扇門。

本文會給出三種真機除錯方法，你可以選擇自己最喜歡的一款~

移動端真機除錯方法

  1. chrome真機除錯
  2. weinre除錯
  3. spy-debugger除錯

簡單說明一下每一種方式的優缺點：

第一種: chrome真機除錯，有一個很大的侷限性就是，第一次使用chrome://inspect/#devices時，其實chrome需要下載一些工具才能支援，這些工具國內網是無法訪問的，需要翻牆。但是最大的優點是: 簡單快捷。

第二種: weinre除錯方式，安裝和適用不復雜，適用於全平臺的除錯，即任何手機的任何瀏覽器皆可以除錯，不過需要手機和電腦在同一個網段下。

第三種:spy-debugger，安裝稍微複雜一點，spy-debugger整合了weinre，不過還增加了抓包工具，使用最為方便。

下面我們開始具體介紹如何使用這三種除錯方法：

1.chrome真機除錯

手機端下載好chrome瀏覽器，使用USB連線到PC，開啟手機的USB除錯模式。 然後在PC端開啟chrome瀏覽器，在位址列輸入: chrome://inspect. 勾選"discovery usb device"。然後在手機端瀏覽網頁，就可以看到如下的頁面，點選inspect，進行除錯。(鑑於我的工作電腦是加了域的，因為並不能使用這個方式，如果有和我一樣情況的童鞋，可以考慮使用另外兩種除錯方式)

clipboard.png

2.wenire真機除錯

Weinre(WebInspector Remote)是一款基於Web Inspector(Webkit)的遠端除錯工具，藉助於網路，可以在PC上直接除錯執行在移動裝置上的遠端頁面。

clipboard.png

本地伺服器: 可以使用http-server、tomcat等,也可以使用編譯器整合的服務

weinre安裝

全域性安裝: npm install –g weinre

區域性安裝: npm install weinre

啟動: weinre --httpPort 8090 --boundHost -all-

如果是區域性安裝的話，需要在前面加上 node_modules/.bin/

相信前端的童鞋都會用npm包管理工具，對於這個工具，我就不展開了，如果沒有安裝npm的，自行安裝。

weinew啟動引數說明:

  • httpPort: 設定Wninre使用的埠號，預設是8080
  • boundHost: [hostname | Ip | -all-]: 預設是 ‘localhost’.
  • debug [true | false] : 這個選項與–verbose類似， 會輸出更多的資訊。預設為false。
  • readTimeout [seconds] : Server傳送資訊到Target/Client的超時時間， 預設為5s。
  • deathTimeout [seconds] : 預設為3倍的readTimeout， 如果頁面超過這個時間都沒有任何響應， 那麼就會斷開連線。

8080埠使用情況較多，所以我選擇了指定8090埠。

啟動了weinre之後，我們在瀏覽器中輸入localhost:8090.顯示如下介面，表示已經啟動成功。

clipboard.png

點選debug client user interface，進入除錯頁面。

clipboard.png

當前的targets中內容為空。

現在，我們需要做另外一點操作，在我們要除錯的頁面中，增加一個指令碼。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>
複製程式碼

記住將localhost換成你的IP地址.

然後，我們在本地啟動一個伺服器，可以是IDE整合的伺服器，或者是http-server,我使用的是http-server.啟動之後，我們在手機端訪問要除錯的網頁。然後就會發現targets下面增加了記錄。

這時，我們就可以點選Elements進行除錯。

clipboard.png

修改樣式時，會在手機端即時生效，並且也可以檢視控制檯資訊，唯一一點就是，不能進行斷點除錯。

最後，在除錯結束之後，別忘記刪除嵌入的script。

除了這種方法之後，還介紹了在手機端儲存一段Js程式碼，在需要除錯某個頁面時，點選執行JS,但是現在瀏覽器為了安全起見，已經不再支援此方法。預設的方法是搜尋，而非執行，所以不可取。

3.spy-debugger真機除錯

最後，再介紹一下spy-debugger方法。用這個方法，我們不再需要自己增加和刪除指令碼。

Spy-debugger內部整合了weinre，通過代理的方式攔截所有html自動注入weinre所需的js程式碼。簡化了weinre需要給每個除錯的頁面新增js程式碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js程式碼。讓頁面除錯更加方便。

特性:

  1. 頁面除錯＋抓包
  2. 操作簡單
  3. 支援HTTPS。
  4. spy-debugger內部整合了weinre、node-mitmproxy、AnyProxy。
  5. 自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。
  6. 可以配合其它代理工具一起使用(預設使用AnyProxy)

Spydebugger安裝與使用

  1. 安裝: 全域性安裝 npm install –g spy-debugger

  2. 啟動: spy-debugger

  3. 設定手機的HTTP代理

    代理的地址為 PC的IP地址 ，代理的埠為spy-debugger的啟動埠(預設埠為：9888)預設埠是 9888。

    如果要指定埠: spy-debugger –p 8888

    Android設定步驟:設定 - WLAN - 長按選中網路 - 修改網路 - 高階 - 代理設定 - 手動

    iOS設定代理步驟：設定 - 無線區域網 - 選中網路 - HTTP代理手動

  4. 手機安裝證照(node-mitmproxy CA根證照)

    第一步：生成證照：

    生成CA根證照，根證照生成在 /Users/XXX/node-mitmproxy/ 目錄下(Mac)。

    spy-debugger initCA
複製程式碼

    第二步：安裝證照：

    把node-mitmproxy資料夾下的 node-mitmproxy.ca.crt 傳到手機上，點選安裝即可。

    Spy-debugger啟動介面，同樣，在手機端重新整理頁面之後，targets中會有記錄

clipboard.png

以我曾經做的京東遊戲的頁面展示一下效果，當我們在手機上選中一個元素時，可以在電腦上看到相應的資訊，這樣我們就可以看出有可能是什麼樣式不相容導致了UI的異常了，同樣，還可以在控制檯中看到JS的log資訊，對於移動端除錯來說非常有幫助。

clipboard.png
]

總結:

  1. chrome inspect應用場景有限
  2. weinre安裝簡單，使用過程中需要增加和刪除script，如果除錯頁面很多的情況下，不適用。
  3. spy-debugger安裝略複雜，但是使用過程非常愉快。

9102了，你還不會移動端真機除錯？

謝謝您花費寶貴的時間閱讀本文，如果本文給了您一點幫助或者是啟發，那麼不要吝嗇你的贊和Star哈，您的肯定是我前進的最大動力。github.com/YvetteLau/B…

歡迎關注小姐姐的微信公眾號：前端宇宙。

9102了，你還不會移動端真機除錯？

相關文章