一侵俗、簡介

移動端調(diào)試一直都是一個痛點亲配，因為移動終端對于我們來說是一個黑盒构灸，它無法像PC端一樣，我們可以通過F12很方便的調(diào)出開發(fā)者工具笋额。在開發(fā)中經(jīng)常會遇到同樣一份代碼在某個型號的手機上運行出現(xiàn)錯誤元暴，其他手機都好好的，開發(fā)的時候Chrome上也沒有報錯兄猩。如果沒有調(diào)試工具這種情況下我們就很難定位問題茉盏，接下來的主題就是介紹如何使用spy-debugger + Charles進行移動端調(diào)試。

二枢冤、安裝

全局安裝 spy-debugger

npm install spy-debugger -g

三援岩、spy-debugger證書

其實spy-debugger的代理是基于node-mitmproxy模塊實現(xiàn)的，這里安裝的證書其實是node-mitmproxy的證書掏导，標題寫spy-debugger證書是為了和Charels證書區(qū)分開來避免混淆。

電腦安裝證書

第1步：在命令行中執(zhí)行spy-debugger啟動spy-debugger服務羽峰，啟動成功后趟咆，檢查你的用戶目錄（home目錄），會發(fā)現(xiàn)多了一個node-mitmproxy文件夾梅屉，這個文件夾內(nèi)放的就是代理需要的證書值纱。

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

一、簡介

移動端調(diào)試一直都是一個痛點坯汤，因為移動終端對于我們來說是一個黑盒虐唠，它無法像PC端一樣，我們可以通過F12很方便的調(diào)出開發(fā)者工具惰聂。在開發(fā)中經(jīng)常會遇到同樣一份代碼在某個型號的手機上運行出現(xiàn)錯誤疆偿，其他手機都好好的，開發(fā)的時候Chrome上也沒有報錯搓幌。如果沒有調(diào)試工具這種情況下我們就很難定位問題杆故，接下來的主題就是介紹如何使用spy-debugger + Charles進行移動端調(diào)試。

二溉愁、安裝

全局安裝 spy-debugger

npm install spy-debugger -g

三处铛、spy-debugger證書

其實spy-debugger的代理是基于node-mitmproxy模塊實現(xiàn)的，這里安裝的證書其實是node-mitmproxy的證書拐揭，標題寫spy-debugger證書是為了和Charels證書區(qū)分開來避免混淆。

電腦安裝證書

第1步：在命令行中執(zhí)行spy-debugger啟動spy-debugger服務堂污，啟動成功后，檢查你的用戶目錄（home目錄）息楔，會發(fā)現(xiàn)多了一個node-mitmproxy文件夾寝贡，這個文件夾內(nèi)放的就是代理需要的證書。

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

第2步：在啟動spy-debugger服務的電腦上安裝證書值依，雙擊node-mitmproxy.ca.crt文件愿险，選擇登錄之后確認

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

[圖片上傳失敗...(image-371ccd-1649767641726)]

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

出現(xiàn)這個+號表示證書已經(jīng)安裝成功
[圖片上傳失敗...(image-920960-1649767792500)]

IOS手機安裝證書

第1步：首先需要將node-mitmproxy.ca.crt上傳到手機上颇蜡，可以通過live-server 在node-mitmproxy.ca.crt文件所在的目錄下啟動這個服務。如果你還沒有l(wèi)ive-server命令辆亏，可以通過以下命令進行安裝：

npm install live-server -g

在/Users/dongxin/node-mitmproxy目錄下執(zhí)行l(wèi)ive-server命令

第2步：在手機瀏覽器上訪問這個服務，輸入我電腦的IP地址和端口進行訪問扮叨，??手機和電腦必須是連接同一個WiFi網(wǎng)絡才可以訪問彻磁。

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

[圖片上傳失敗...(image-6dc129-1649767641726)]

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

輸入手機鎖屏密碼累提，選擇安裝

[圖片上傳失敗...(image-44fab8-1649767641726)]

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

[圖片上傳失敗...(image-ac74f4-1649767641726)]

Android手機安裝證書

安卓端的設置簡單很多磁浇，直接

點擊更多設置—>找到對應網(wǎng)絡—>點擊右箭頭進入—>代理—>手動—>輸入IP和port

之后打開相應的h5頁面置吓，此時如果有彈窗提示是否信任，選擇信任即可

此時骑科，spy-debugger的前期準備工作就已經(jīng)全部完成了

四构拳、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步：根據(jù)提示在手機上配置Wi-Fi網(wǎng)絡代理泄朴，在手機上點擊 設置 > 無線局域網(wǎng)

第3步：點擊你當前所連接的WiFi網(wǎng)絡

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

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

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

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

Android手機安裝證書

第1步：點擊Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后會彈出一個對話框锭亏，告訴你手機要設置的代理IP地址和端口慧瘤，??注意：手機和電腦必須連接同一個WiFi才可以固该。

第2步：根據(jù)提示在手機上配置Wi-Fi網(wǎng)絡代理糖儡，在手機上點擊 設置 > 無線局域網(wǎng)

第3步：點擊你當前所連接的WiFi網(wǎng)絡

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

第5步：在瀏覽器輸入chls.pro/ssl 玉工，下載證書

第6步：手機設置 > wlan > 高級設置 > 從存儲設備安裝(安裝證書) > 找到證書后點擊安裝

此時遵班，Charles所有的準備工作都完成了潮改，接下來我們就可以啟動spy-debugger進行移動端H5調(diào)試了汇在。

五、啟動spy-debugger

第1步：啟動命令

也可以使用-e參數(shù)設置Charles作為外部代理服務

啟動spy-debugger服務亩鬼，并設置外部代理為Charles的服務

spy-debugger -e http://127.0.0.1:8888

上述命令表示啟動spy-debugger調(diào)試服務阿蝶，并將所有的資源請求都轉發(fā)到Charles的代理服務上赡磅。其實我們打開Charles程序的時候，它實際上是在本地啟動了一個http的服務冶匹。

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

第3步：在瀏覽器打開[http://127.0.0.1:63214/client](http://127.0.0.1:59365/client/)

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

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

第6步：我們可以在Elements選項上進行頁面元素的選擇和調(diào)試谤狡，可以發(fā)現(xiàn)我們鼠標放到元素上墓懂，手機端上會實時看到選中效果

第7步：我們還可以在Console選項卡下查看代碼輸出的console信息霉囚，我們也可以這里輸入頁面要執(zhí)行的代碼

第8步：此時我們發(fā)現(xiàn)所有的請求都被轉發(fā)到了Charles上

## 六、weinre簡介

Weinre是單詞縮寫榜跌，全稱是網(wǎng)頁遠程審查（Web Inspector Remote）钓葫，可以在PC上調(diào)試運行在移動端上的頁面票顾。

### 操作界面

#### 1.Remote面板

[圖片上傳失敗...(image-ba7c89-1649767641726)] 

targets：所有代理的頁面库物，綠色標識表示正在被調(diào)試的頁面

clients：所有調(diào)試的終端贷帮，支持多個撵枢，比如同時用chrome和firefox調(diào)試

server properties：代理服務的參數(shù)信息

#### 2.Elements面板

[圖片上傳失敗...(image-69979f-1649767641726)] 

A：查看，修改潜必，刪除Dom元素磁滚，目前還不能增加DOM元素。
B：查看维雇，修改晒他，刪除Dom元素屬性陨仅，目前不支持增加DOM元素屬性。
C：查看触徐，修改锌介，刪除猾警，增加 CSS屬性发皿。

#### 3.Resources面板

[圖片上傳失敗...(image-3a6da4-1649767641726)] 

查看，修改惶室，刪除localStorage/sessionStorage玄货。
測試發(fā)現(xiàn)：不能刪除松捉，修改，增加可柿？复斥？械媒？

#### 4.Network面板

[圖片上傳失敗...(image-ed62cc-1649767641726)] 

查看XHR請求信息，雖然該面板中有各種網(wǎng)絡請求的類型键俱，但是目前只能查看XHR請求記錄世分。

#### 5.Timeline面板

[圖片上傳失敗...(image-c8be67-1649767641726)] 

查看target中觸發(fā)的事件時間信息（觸發(fā)事件）臭埋。目前只支持兩種事件：setTimeout/setInterval和用戶指定的事件（通過在事件處理函數(shù)中調(diào)用console.markTimeline('tag')函數(shù)指定）

#### 6.Console面板

[圖片上傳失敗...(image-d285-1649767641726)] 

用來執(zhí)行JS語句和表達式，以及展示console的方法輸出畅蹂。

## 七液斜、spy-debugger命令

#### 端口

(默認端口：9888)

spy-debugger -p 8888

#### 設置外部代理（默認使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888

spy-debugger內(nèi)置AnyProxy提供抓包功能少漆，但是也可通過設置外部代理和其它抓包代理工具一起使用硼被，如：Charles嚷硫、Fiddler。

#### 設置頁面內(nèi)容為可編輯模式

該功能使頁面內(nèi)容修改更加直觀方便脆贵。 (默認： false)

spy-debugger -w true

內(nèi)部實現(xiàn)原理：在需要調(diào)試的頁面內(nèi)注入代碼：`document.body.contentEditable=true`卖氨。暫不支持使用了iscroll框架的頁面鞋怀。

#### 是否允許weinre監(jiān)控iframe加載的頁面

(默認： false)

spy-debugger -i true

#### 是否只攔截瀏覽器發(fā)起的https請求

(默認： true)

spy-debugger -b false有些瀏覽器發(fā)出的connect請求沒有正確的攜帶userAgent密似，這個判斷有時候會出錯残腌，如UC瀏覽器。這個時候需要設置為false蟆盹。大多數(shù)情況建議啟用默認配置：true逾滥，由于目前大量App應用自身（非WebView）發(fā)出的請求會使用到SSL pinning技術败匹，自定義的證書將不能通過app的證書校驗掀亩。

#### 是否允許HTTP緩存

(默認： false)

spy-debugger -c true

到這里spy-debugger + Charles進行移動端調(diào)試的接入流程就介紹完了槽棍，更多關于spy-debugger的功能和使用方法，可以參考spy-debuger的[官方文檔](https://www.npmjs.com/package/spy-debugger)


第2步：在啟動spy-debugger服務的電腦上安裝證書缆巧，雙擊[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件盅蝗，選擇登錄之后確認

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

[圖片上傳失敗...(image-b9570d-1649767613088)] 

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

出現(xiàn)這個+號表示證書已經(jīng)安裝成功

[圖片上傳失敗...(image-c6f398-1649767613088)] 

### IOS手機安裝證書

第1步：首先需要將[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt上傳到手機上墩莫，可以通過live-server 在[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件所在的目錄下啟動這個服務逞敷。如果你還沒有l(wèi)ive-server命令推捐，可以通過以下命令進行安裝：

`npm install live-server -g`

在/Users/dongxin/node-mitmproxy目錄下執(zhí)行l(wèi)ive-server命令

第2步：在手機瀏覽器上訪問這個服務，輸入我電腦的IP地址和端口進行訪問堪簿，??手機和電腦必須是連接同一個WiFi網(wǎng)絡才可以訪問椭更。

點擊[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件進行下載安裝

[圖片上傳失敗...(image-9ee3e8-1649767613088)] 

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

輸入手機鎖屏密碼，選擇安裝

[圖片上傳失敗...(image-a9c5e-1649767613088)] 

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

[圖片上傳失敗...(image-f93318-1649767613088)] 

### Android手機安裝證書

安卓端的設置簡單很多叽奥，直接

點擊更多設置—>找到對應網(wǎng)絡—>點擊右箭頭進入—>代理—>手動—>輸入IP和port

之后打開相應的h5頁面朝氓，此時如果有彈窗提示是否信任主届，選擇信任即可

此時岂膳，spy-debugger的前期準備工作就已經(jīng)全部完成了

## 四谈截、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步：根據(jù)提示在手機上配置Wi-Fi網(wǎng)絡代理炸卑，在手機上點擊 設置 > 無線局域網(wǎng)

第3步：點擊你當前所連接的WiFi網(wǎng)絡

第4步：向下滑動盖文，點擊配置代理五续，選擇手動疙驾，服務器和端口輸入Charles對話顯示的IP和端口號，配置好后函荣，記得點擊存儲傻挂。

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

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

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

### Android手機安裝證書

第1步：點擊Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后會彈出一個對話框电禀，告訴你手機要設置的代理IP地址和端口鞭呕，??注意：手機和電腦必須連接同一個WiFi才可以葫松。

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

第3步：點擊你當前所連接的WiFi網(wǎng)絡

第4步：向下滑動咕娄，點擊配置代理圣勒，選擇手動，服務器和端口輸入Charles對話顯示的IP和端口號挚歧，配置好后滑负，記得點擊存儲矮慕。

第5步：在瀏覽器輸入chls.pro/ssl 啄骇，下載證書

第6步：手機設置 > wlan > 高級設置 > 從存儲設備安裝(安裝證書) > 找到證書后點擊安裝

此時缸夹，Charles所有的準備工作都完成了明未，接下來我們就可以啟動spy-debugger進行移動端H5調(diào)試了。

## 五趟妥、啟動spy-debugger

第1步：啟動命令

也可以使用-e參數(shù)設置Charles作為外部代理服務

啟動spy-debugger服務猫态，并設置外部代理為Charles的服務

spy-debugger -e [http://127.0.0.1:8888](http://127.0.0.1:8888/)

上述命令表示啟動spy-debugger調(diào)試服務，并將所有的資源請求都轉發(fā)到Charles的代理服務上披摄。其實我們打開Charles程序的時候亲雪，它實際上是在本地啟動了一個http的服務。

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

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

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

第5步：此時在瀏覽器上的Remote選項卡上就可以看到义辕，連接的終端了

第6步：我們可以在Elements選項上進行頁面元素的選擇和調(diào)試，可以發(fā)現(xiàn)我們鼠標放到元素上寓盗，手機端上會實時看到選中效果

第7步：我們還可以在Console選項卡下查看代碼輸出的console信息，我們也可以這里輸入頁面要執(zhí)行的代碼

第8步：此時我們發(fā)現(xiàn)所有的請求都被轉發(fā)到了Charles上

六傀蚌、weinre簡介

Weinre是單詞縮寫基显，全稱是網(wǎng)頁遠程審查（Web Inspector Remote），可以在PC上調(diào)試運行在移動端上的頁面善炫。

操作界面

1.Remote面板

[圖片上傳失敗...(image-d2cefd-1649767613088)]

targets：所有代理的頁面撩幽，綠色標識表示正在被調(diào)試的頁面

clients：所有調(diào)試的終端，支持多個箩艺，比如同時用chrome和firefox調(diào)試

server properties：代理服務的參數(shù)信息

2.Elements面板

[圖片上傳失敗...(image-15a58e-1649767613088)]

A：查看窜醉，修改宪萄，刪除Dom元素，目前還不能增加DOM元素榨惰。
B：查看拜英，修改，刪除Dom元素屬性读串，目前不支持增加DOM元素屬性聊记。
C：查看撒妈，修改恢暖，刪除，增加 CSS屬性狰右。

3.Resources面板

[圖片上傳失敗...(image-3c4370-1649767613088)]

查看杰捂，修改，刪除localStorage/sessionStorage棋蚌。
測試發(fā)現(xiàn)：不能刪除指孤，修改筋岛，增加？？鸣峭？

4.Network面板

[圖片上傳失敗...(image-3df029-1649767613088)]

查看XHR請求信息，雖然該面板中有各種網(wǎng)絡請求的類型蹭秋，但是目前只能查看XHR請求記錄凿将。

5.Timeline面板

[圖片上傳失敗...(image-4d63c1-1649767613088)]

查看target中觸發(fā)的事件時間信息（觸發(fā)事件）。目前只支持兩種事件：setTimeout/setInterval和用戶指定的事件（通過在事件處理函數(shù)中調(diào)用console.markTimeline('tag')函數(shù)指定）

6.Console面板

[圖片上傳失敗...(image-bdb7bc-1649767613088)]

用來執(zhí)行JS語句和表達式颊埃，以及展示console的方法輸出蔬充。

七、spy-debugger命令

端口

(默認端口：9888)

spy-debugger -p 8888

設置外部代理（默認使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888

spy-debugger內(nèi)置AnyProxy提供抓包功能班利，但是也可通過設置外部代理和其它抓包代理工具一起使用饥漫，如：Charles、Fiddler罗标。

設置頁面內(nèi)容為可編輯模式

該功能使頁面內(nèi)容修改更加直觀方便庸队。 (默認： false)

spy-debugger -w true

內(nèi)部實現(xiàn)原理：在需要調(diào)試的頁面內(nèi)注入代碼：document.body.contentEditable=true。暫不支持使用了iscroll框架的頁面闯割。

是否允許weinre監(jiān)控iframe加載的頁面

(默認： false)

spy-debugger -i true

是否只攔截瀏覽器發(fā)起的https請求

(默認： true)

spy-debugger -b false有些瀏覽器發(fā)出的connect請求沒有正確的攜帶userAgent皿哨，這個判斷有時候會出錯，如UC瀏覽器纽谒。這個時候需要設置為false证膨。大多數(shù)情況建議啟用默認配置：true，由于目前大量App應用自身（非WebView）發(fā)出的請求會使用到SSL pinning技術鼓黔，自定義的證書將不能通過app的證書校驗央勒。

是否允許HTTP緩存

(默認： false)

spy-debugger -c true

到這里spy-debugger + Charles進行移動端調(diào)試的接入流程就介紹完了不见，更多關于spy-debugger的功能和使用方法，可以參考spy-debuger的官方文檔