成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

spy-debugger + Charles 移動端調(diào)試

nihao / 1449人閱讀

摘要:簡介移動端調(diào)試一直都是一個痛點,因為移動終端對于我們來說是一個黑盒,它無法像端一樣,我們可以通過很方便的調(diào)出開發(fā)者工具。如果沒有調(diào)試工具這種情況下我們就很難定位問題,接下來的主題就是介紹如何使用進行移動端調(diào)試。

簡介

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

安裝

第1步:全局安裝 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服務(wù),啟動成功后,檢查你的用戶目錄(home目錄),會發(fā)現(xiàn)多了一個node-mitmproxy文件夾,這個文件夾內(nèi)放的就是代理需要的證書。

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

第2步:在啟動spy-debugger服務(wù)的電腦上安裝證書,雙擊node-mitmproxy.ca.crt文件

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

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

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

IOS手機安裝證書

第1步:首先需要將node-mitmproxy.ca.crt上傳到手機上,可以通過live-servernode-mitmproxy.ca.crt文件所在的目錄下啟動這個服務(wù)。如果你還沒有live-server命令,可以通過以下命令進行安裝:

npm i -g live-server

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

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

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

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

輸入手機鎖屏密碼

選擇安裝

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

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

Charles 證書

這里簡單介紹一下Charles的證書安裝,如果你已經(jīng)是Charles的老手了,可以直接跳過。Charles如果不安裝證書的話是無法抓https的請求的。

電腦安裝證書

第1步:點擊Charles的Help > SSL Proxying > Install Charles Root Cetificate 然后就會彈出證書安裝頁面,將Charles的證書設(shè)置為始終信任即可:

第2步:點擊Charles的Proxy > Access Control Settings 進行配置讓手機連接代理時,不需要點允許連接確認操作。

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

IOS手機安裝證書

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

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

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

第4步:向下滑動,點擊配置代理,選擇手動,服務(wù)器和端口輸入Charles對話顯示的IP和端口號,配置好后,記得點擊存儲。

第5步:Safari瀏覽器輸入chls.pro/ssl ,下載并安裝證書

第6步:在手機的 設(shè)置 > 通用 > 描述文件與設(shè)備管理 找到Charles Proxy CA 證書,點擊安裝

第7步:在手機的 設(shè)置 > 通用 > 關(guān)于本機 > 證書信任設(shè)置Charles Proxy CA 打開

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

啟動spy-debugger

第1步:啟動命令

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

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

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

第3步:在瀏覽器打開http://127.0.0.1:59365/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)所有的請求都被轉(zhuǎn)發(fā)到了Charles上

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104640.html

相關(guān)文章

  • spy-debugger + Charles 移動調(diào)試

    摘要:簡介移動端調(diào)試一直都是一個痛點,因為移動終端對于我們來說是一個黑盒,它無法像端一樣,我們可以通過很方便的調(diào)出開發(fā)者工具。如果沒有調(diào)試工具這種情況下我們就很難定位問題,接下來的主題就是介紹如何使用進行移動端調(diào)試。 簡介 ? 移動端調(diào)試一直都是一個痛點,因為移動終端對于我們來說是一個黑盒,它無法像PC端一樣,我們可以通過F12很方便的調(diào)出開發(fā)者工具。在開發(fā)中經(jīng)常會遇到同樣一份...

    fevin 評論0 收藏0
  • 9102了,你還不會移動真機調(diào)試?

    摘要:移動端調(diào)試困難很多時候,我們在進行移動端開發(fā)時,都是先在端使用手機模擬器進行調(diào)試,沒有問題后,我們才會在手機端的瀏覽器進行測試,這個時候,如果沒有出現(xiàn)問題,皆大歡喜。 移動端調(diào)試困難 很多時候,我們在進行移動端開發(fā)時,都是先在PC端使用手機模擬器進行調(diào)試,沒有問題后,我們才會在手機端的瀏覽器進行測試,這個時候,如果沒有出現(xiàn)問題,皆大歡喜。但是一旦出現(xiàn)問題,我們就很難解決,因為缺乏可視化...

    lushan 評論0 收藏0
  • 我的webview調(diào)試工具

    摘要:詳見調(diào)試調(diào)試瀏覽器頁面在設(shè)置高級里檢查器打開連接隨便打開一個頁面在開發(fā)的選項中,可以檢查到打開的頁面,點開就可以對該頁面進行進一步的調(diào)試。 本人工作平臺mac,以下全部針對mac平臺 Charles http抓包 proxy>proxy settings 設(shè)置代理端口 手機設(shè)置代理連到端口上 手機里的所有請求都能被charles抓到 https抓包 proxy>SSL proxy...

    jaysun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<