spy-debugger + Charles 移動端調試

簡介

​ 移動端調試一直都是一個痛點，由於移動終端對於咱們來講是一個黑盒，它沒法像PC端同樣，咱們能夠經過F12很方便的調出開發者工具。在開發中常常會遇到一樣一份代碼在某個型號的手機上運行出現錯誤，其餘手機都好好的，開發的時候Chrome上也沒有報錯。若是沒有調試工具這種狀況下咱們就很難定位問題，接下來的主題就是介紹如何使用spy-debugger + Charles進行移動端調試。

安裝

第1步：全局安裝 spy-debugger

npm install spy-debugger -g

spy-debugger 證書

其實spy-debugger的代理是基於node-mitmproxy模塊實現的，這裏安裝的證書實際上是node-mitmproxy的證書，標題寫spy-debugger證書是爲了和Charels證書區分開來避免混淆。

電腦安裝證書

第1步：在命令行中執行spy-debugger啓動spy-debugger服務，啓動成功後，檢查你的用戶目錄（home目錄），會發現多了一個node-mitmproxy文件夾，這個文件夾內放的就是代理須要的證書。

我Mac電腦完整的路徑是：/Users/jameswain/node-mitmproxy

第2步：在啓動spy-debugger服務的電腦上安裝證書，雙擊node-mitmproxy.ca.crt文件

第3步：雙擊node-mitmproxy CA 選擇爲 始終信任

第4步：輸入你電腦的用戶密碼

出現這個+號表示證書已經安裝成功

IOS手機安裝證書

第1步：首先須要將node-mitmproxy.ca.crt上傳到手機上，能夠經過live-server 在node-mitmproxy.ca.crt文件所在的目錄下啓動這個服務。若是你尚未live-server命令，能夠經過如下命令進行安裝：

npm i -g live-server

在/Users/jameswain/node-mitmproxy目錄下執行live-server命令

第2步：在手機瀏覽器上訪問這個服務，輸入我電腦的IP地址和端口進行訪問，⚠️手機和電腦必須是鏈接同一個WiFi網絡才能夠訪問。

點擊node-mitmproxy.ca.crt文件進行下載安裝

第3步：在手機的 設置 > 通用 > 描述文件與設備管理 找到node-mitmproxy CA 證書，並點擊安裝

輸入手機鎖屏密碼：

選擇安裝

第4步：在手機的 設置 > 通用 > 關於本機 > 證書信任設置 將 node-mitmproxy CA 打開

此時，spy-debugger的前期準備工做就已經所有完成了

Charles 證書

這裏簡單介紹一下Charles的證書安裝，若是你已是Charles的老手了，能夠直接跳過。Charles若是不安裝證書的話是沒法抓https的請求的。

電腦安裝證書

第1步：點擊Charles的Help > SSL Proxying > Install Charles Root Cetificate 而後就會彈出證書安裝頁面，將Charles的證書設置爲始終信任便可：

第2步：點擊Charles的Proxy > Access Control Settings 進行配置讓手機鏈接代理時，不須要點容許鏈接確認操做。

上述配置，表示容許任意IP的設備鏈接該代理服務，不會有容許鏈接確認對話框。

IOS手機安裝證書

第1步：點擊Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 而後會彈出一個對話框，告訴你手機要設置的代理IP地址和端口，⚠️注意：手機和電腦必須鏈接同一個WiFi才能夠。

第2步：根據提示在手機上配置Wi-Fi網絡代理，在手機上點擊設置 > 無線局域網

第3步：點擊你當前所鏈接的WiFi網絡

第4步：向下滑動，點擊配置代理，選擇手動，服務器和端口輸入Charles對話顯示的IP和端口號，配置好後，記得點擊存儲。

第5步：在Safari瀏覽器輸入chls.pro/ssl ，下載並安裝證書

第6步：在手機的 設置 > 通用 > 描述文件與設備管理 找到Charles Proxy CA 證書，點擊安裝

第7步：在手機的 設置 > 通用 > 關於本機 > 證書信任設置 將 Charles Proxy CA 打開

此時，Charles全部的準備工做都完成了，接下來咱們就能夠啓動spy-debugger進行移動端H5調試了。

啓動spy-debugger

第1步：啓動命令

spy-debugger -e http://127.0.0.1:8888  // 啓動spy-debugger服務，並設置外部代理爲Charles的服務

上述命令表示啓動spy-debugger調試服務，並將全部的資源請求都轉發到Charles的代理服務上。其實咱們打開Charles程序的時候，它其實是在本地啓動了一個http的服務，監聽在8888端口上。

第2步：在手機上設置代理服務器和端口爲spy-debugger的IP和端口:

第3步：在瀏覽器打開http://127.0.0.1:59365/client/

第4步：在京東App裏隨便找一個H5頁面打開，或者在手機瀏覽器上打開 https://m.jd.com/

第5步：此時在瀏覽器上的Remote選項卡上就能夠看到，鏈接的終端了

第6步：咱們能夠在Elements選項上進行頁面元素的選擇和調試，能夠發現咱們鼠標放到元素上，手機端上會實時看到選中效果

第7步：咱們還能夠在Console選項卡下查看代碼輸出的console信息，咱們也能夠這裏輸入頁面要執行的代碼

第8步：此時咱們發現全部的請求都被轉發到了Charles上

OK，到這裏spy-debugger + Charles進行移動端調試的接入流程就介紹完了，更多關於spy-debugger的功能和使用方法，能夠參考spy-debuger的官方README