摘要：簡(jiǎn)介移動(dòng)端調(diào)試一直都是一個(gè)痛點(diǎn)，因?yàn)橐苿?dòng)終端對(duì)于我們來(lái)說(shuō)是一個(gè)黑盒，它無(wú)法像端一樣，我們可以通過(guò)很方便的調(diào)出開(kāi)發(fā)者工具。如果沒(méi)有調(diào)試工具這種情況下我們就很難定位問(wèn)題，接下來(lái)的主題就是介紹如何使用進(jìn)行移動(dòng)端調(diào)試。

? 移動(dòng)端調(diào)試一直都是一個(gè)痛點(diǎn)，因?yàn)橐苿?dòng)終端對(duì)于我們來(lái)說(shuō)是一個(gè)黑盒，它無(wú)法像PC端一樣，我們可以通過(guò)F12很方便的調(diào)出開(kāi)發(fā)者工具。在開(kāi)發(fā)中經(jīng)常會(huì)遇到同樣一份代碼在某個(gè)型號(hào)的手機(jī)上運(yùn)行出現(xiàn)錯(cuò)誤，其他手機(jī)都好好的，開(kāi)發(fā)的時(shí)候Chrome上也沒(méi)有報(bào)錯(cuò)。如果沒(méi)有調(diào)試工具這種情況下我們就很難定位問(wèn)題，接下來(lái)的主題就是介紹如何使用spy-debugger + Charles進(jìn)行移動(dòng)端調(diào)試。

第1步：全局安裝 spy-debugger

npm install spy-debugger -g

其實(shí)spy-debugger的代理是基于node-mitmproxy模塊實(shí)現(xiàn)的，這里安裝的證書(shū)其實(shí)是node-mitmproxy的證書(shū)，標(biāo)題寫(xiě)spy-debugger證書(shū)是為了和Charels證書(shū)區(qū)分開(kāi)來(lái)避免混淆。

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

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

第2步：在啟動(dòng)spy-debugger服務(wù)的電腦上安裝證書(shū)，雙擊node-mitmproxy.ca.crt文件

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

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

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

第1步：首先需要將node-mitmproxy.ca.crt上傳到手機(jī)上，可以通過(guò)live-server 在node-mitmproxy.ca.crt文件所在的目錄下啟動(dòng)這個(gè)服務(wù)。如果你還沒(méi)有live-server命令，可以通過(guò)以下命令進(jìn)行安裝：

npm i -g live-server

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

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

點(diǎn)擊node-mitmproxy.ca.crt文件進(jìn)行下載安裝

第3步：在手機(jī)的 設(shè)置 > 通用 > 描述文件與設(shè)備管理 找到node-mitmproxy CA 證書(shū)，并點(diǎn)擊安裝

輸入手機(jī)鎖屏密碼：

選擇安裝

第4步：在手機(jī)的 設(shè)置 > 通用 > 關(guān)于本機(jī) > 證書(shū)信任設(shè)置 將 node-mitmproxy CA 打開(kāi)

此時(shí)，spy-debugger的前期準(zhǔn)備工作就已經(jīng)全部完成了

這里簡(jiǎn)單介紹一下Charles的證書(shū)安裝，如果你已經(jīng)是Charles的老手了，可以直接跳過(guò)。Charles如果不安裝證書(shū)的話是無(wú)法抓https的請(qǐng)求的。

第1步：點(diǎn)擊Charles的Help > SSL Proxying > Install Charles Root Cetificate 然后就會(huì)彈出證書(shū)安裝頁(yè)面，將Charles的證書(shū)設(shè)置為始終信任即可：

第2步：點(diǎn)擊Charles的Proxy > Access Control Settings 進(jìn)行配置讓手機(jī)連接代理時(shí)，不需要點(diǎn)允許連接確認(rèn)操作。

上述配置，表示允許任意IP的設(shè)備連接該代理服務(wù)，不會(huì)有允許連接確認(rèn)對(duì)話框。

第1步：點(diǎn)擊Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后會(huì)彈出一個(gè)對(duì)話框，告訴你手機(jī)要設(shè)置的代理IP地址和端口，??注意：手機(jī)和電腦必須連接同一個(gè)WiFi才可以。

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

第3步：點(diǎn)擊你當(dāng)前所連接的WiFi網(wǎng)絡(luò)

第4步：向下滑動(dòng)，點(diǎn)擊配置代理，選擇手動(dòng)，服務(wù)器和端口輸入Charles對(duì)話顯示的IP和端口號(hào)，配置好后，記得點(diǎn)擊存儲(chǔ)。

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

第6步：在手機(jī)的 設(shè)置 > 通用 > 描述文件與設(shè)備管理 找到Charles Proxy CA 證書(shū)，點(diǎn)擊安裝

第7步：在手機(jī)的 設(shè)置 > 通用 > 關(guān)于本機(jī) > 證書(shū)信任設(shè)置 將 Charles Proxy CA 打開(kāi)

此時(shí)，Charles所有的準(zhǔn)備工作都完成了，接下來(lái)我們就可以啟動(dòng)spy-debugger進(jìn)行移動(dòng)端H5調(diào)試了。

第1步：啟動(dòng)命令

spy-debugger -e http://127.0.0.1:8888  // 啟動(dòng)spy-debugger服務(wù)，并設(shè)置外部代理為Charles的服務(wù)

上述命令表示啟動(dòng)spy-debugger調(diào)試服務(wù)，并將所有的資源請(qǐng)求都轉(zhuǎn)發(fā)到Charles的代理服務(wù)上。其實(shí)我們打開(kāi)Charles程序的時(shí)候，它實(shí)際上是在本地啟動(dòng)了一個(gè)http的服務(wù)，監(jiān)聽(tīng)在8888端口上。

第2步：在手機(jī)上設(shè)置代理服務(wù)器和端口為spy-debugger的IP和端口:

第3步：在瀏覽器打開(kāi)http://127.0.0.1:59365/client/

第4步：在京東App里隨便找一個(gè)H5頁(yè)面打開(kāi)，或者在手機(jī)瀏覽器上打開(kāi) https://m.jd.com/

第5步：此時(shí)在瀏覽器上的Remote選項(xiàng)卡上就可以看到，連接的終端了

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

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

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

OK，到這里spy-debugger + Charles進(jìn)行移動(dòng)端調(diào)試的接入流程就介紹完了，更多關(guān)于spy-debugger的功能和使用方法，可以參考spy-debuger的官方README