資訊專欄INFORMATION COLUMN
摘要：簡介移動端調試一直都是一個痛點，因為移動終端對于我們來說是一個黑盒，它無法像端一樣，我們可以通過很方便的調出開發者工具。如果沒有調試工具這種情況下我們就很難定位問題，接下來的主題就是介紹如何使用進行移動端調試。
簡介
? 移動端調試一直都是一個痛點，因為移動終端對于我們來說是一個黑盒，它無法像PC端一樣，我們可以通過F12很方便的調出開發者工具。在開發中經常會遇到同樣一份代碼在某個型號的手機上運行出現錯誤，其他手機都好好的，開發的時候Chrome上也沒有報錯。如果沒有調試工具這種情況下我們就很難定位問題，接下來的主題就是介紹如何使用spy-debugger + Charles進行移動端調試。
安裝第1步：全局安裝 spy-debugger
npm install spy-debugger -gspy-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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104640.html
摘要：簡介移動端調試一直都是一個痛點，因為移動終端對于我們來說是一個黑盒，它無法像端一樣，我們可以通過很方便的調出開發者工具。如果沒有調試工具這種情況下我們就很難定位問題，接下來的主題就是介紹如何使用進行移動端調試。 簡介 ? 移動端調試一直都是一個痛點，因為移動終端對于我們來說是一個黑盒，它無法像PC端一樣，我們可以通過F12很方便的調出開發者工具。在開發中經常會遇到同樣一份...
摘要：移動端調試困難很多時候，我們在進行移動端開發時，都是先在端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。 移動端調試困難 很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化...
摘要：詳見調試調試瀏覽器頁面在設置高級里檢查器打開連接隨便打開一個頁面在開發的選項中，可以檢查到打開的頁面，點開就可以對該頁面進行進一步的調試。 本人工作平臺mac，以下全部針對mac平臺 Charles http抓包 proxy>proxy settings 設置代理端口 手機設置代理連到端口上 手機里的所有請求都能被charles抓到 https抓包 proxy>SSL proxy...
閱讀 2975·2021-11-24 10:22
閱讀 3044·2021-11-23 10:10
閱讀 1353·2021-09-28 09:35
閱讀 1752·2019-08-29 13:16
閱讀 1395·2019-08-26 13:29
閱讀 2782·2019-08-26 10:27
閱讀 678·2019-08-26 10:09
閱讀 1436·2019-08-23 18:05
