[[406894]]

簡短的概括：

移動端調(diào)試痛點(項目常用)

在移動端開發(fā)時，都是先在PC端使用手機模擬器進行調(diào)試，沒有問題后，我們才會在手機端的瀏覽器進行測試。這個時候，一旦出現(xiàn)問題，我們就很難解決，因為缺乏可視化的界面。很多時候，都是靠經(jīng)驗，或者是靠排除法。甚至，我們不得不歸結為是瀏覽器的實現(xiàn)問題。

移動開發(fā)的重中之重就是掌握調(diào)試技巧，修 Bug 于無形。

一、谷歌瀏覽器手機模式 - 大眾調(diào)試

谷歌瀏覽器是我們前端開發(fā)中必不可少的利器。調(diào)樣式、打斷點、看網(wǎng)絡請求、看性能等，基本上你能想到的，谷歌都能滿足你。

在移動端調(diào)試方面也是一樣，我們可以利用谷歌瀏覽器的手機模式，如下圖, 點擊這個右側(cè)紅框手機按鈕，便可以切換為手機模式，同時我們還可以在左側(cè)紅框內(nèi)點擊下拉箭頭，選擇不同的手機模式，還可選擇responsive模式自定義寬高。

與此同時我們還可以自定義設備，修改瀏覽器的ua，用來調(diào)試哪些只允許微信訪問的頁面，如下圖：

通過谷歌瀏覽器，就可以滿足我們大部分需求，但是實際開發(fā)中，由于各種機型的問題，真機調(diào)試也成為了前端的必修課。

*特點：大眾調(diào)試工具，但是不能模擬真機問題。

二、Mac+IOS+Safari- 進階調(diào)試

如果手上有一臺 Mac 電腦和一部蘋果手機，離解決 bug 只差這操作了。

1､瀏覽器設置：Safari - 偏好設置 - 高級 - 勾選「在菜單欄中顯示開發(fā)」菜單。

2､iphone 設置：設置 - Safari - 高級 - 打開 Web 檢查器。

3､通過手機的 Safari 來打開 H5 頁面，我們通過瀏覽器開發(fā)選項可以看到：

4､通過這種方式成功解決問題。

*特點：不能調(diào)試webView里面的頁面。

三、Chrome+Android- 進階調(diào)試

1､打開 Android 手機 設置 > 開發(fā)者選項 > USB調(diào)試。

2､通過數(shù)據(jù)線連接你的電腦和 Android 手機，會彈出如下界面，點擊 確定。

3､Chrome 中輸入：chrome://inspect，進入調(diào)試頁面。

4､可以見到是這樣的調(diào)試界面

*特點：控制臺能正?？错撁妗?/p>

四、spy-debugger- 進階調(diào)試

spy-debugger：移動端調(diào)試的利器，便捷的遠程調(diào)試手機頁面、抓包工具。

spy-debugger是一站式頁面調(diào)試、抓包工具。遠程調(diào)試任何手機瀏覽器頁面，任何手機移動端webview(如：微信，HybridApp等)。支持HTTP/HTTPS，無需USB連接設備。spy-debugger的特性包括：

頁面調(diào)試+抓包

操作簡單，無需USB連接設備

支持HTTPS

spy-debugger內(nèi)部集成了weinre、node-mitmproxy、AnyProxy

自動忽略原生App發(fā)起的https請求，只攔截webview發(fā)起的https請求，對使用了SSL pinning技術的原生App不造成任何影響。

可以配合其它代理工具一起使用(默認使用AnyProxy) (設置外部代理)

調(diào)試方法(重要)

1、安裝spy-debugger

sudo npm install spy-debugger -g

2、手機和PC保持在同一網(wǎng)絡下

3、手機開啟網(wǎng)絡代理，ip為pc的ip，端口號默認為98884、https頁面需手機安裝證書5、命令行輸入

spy-debugger

此時，界面如下：

此時我們便可以在elements，resources，console等進行我們的調(diào)試了。同時我們還可以運用spy-debugger自帶的anyproxy進行抓包，如下圖：

五、charles 抓包工具- 進階調(diào)試

1､Charles是什么

Charles中文名叫青花瓷，它是一個HTTP代理服務器，HTTP監(jiān)視器，反轉(zhuǎn)代理服務器。通過成為電腦或者瀏覽器的代理，然后截取請求和請求結果達到分析抓包的目的。Charles是一款基于java開發(fā)的跨平臺抓包軟件，可在Mac、Linux、Windows下使用，可以抓取電腦和手機上的http、https請求，是前端開發(fā)的一個利器。

特點：跨平臺，半免費。

2､Charles工作原理

Charles 安裝與配置

1､Charles的安裝

Charles官網(wǎng)：https://www.charlesproxy.com

頁面詳解

2、Charles代理設置

3、Charles訪問控制

4、客戶端-MacOS快捷代理設置

應用場景

當MacOS客戶端與運行Charles軟件工具的電腦是同一臺電腦時，可以通過快捷代理設置方式來進行設置。

操作步驟：打開Charles工具后，選擇“Proxy” 菜單中的"macOS Proxy"選項。

5、客戶端-IOS手機代理設置

1)在IOS手機中選擇“設置” - “無線局域網(wǎng)”

2)點擊已連接的無線網(wǎng)絡名稱

3)在HTTP代理的配置代理中選擇“手動”

4)輸入服務器IP地址及端點，點擊“存儲”

如圖：

六、調(diào)試工具- 場景分析

既然移動端調(diào)試有這么多種方案，那在實際操作中，我們該如何取舍?

場景分析

1､Safari：iPhone 調(diào)試利器，查錯改樣式首選;

2､iOS 模擬器：不需要真機，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁面;

3､Charles：Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡請求，分析數(shù)據(jù)情況;

4､Fiddler：適合 Windows 平臺，與 Charles 類似，查看、控制網(wǎng)絡請求，分析數(shù)據(jù)情況;

5､Spy-Debugger：移動端調(diào)試的利器，便捷的遠程調(diào)試手機頁面、抓包工具;

6､Whistle：基于 Node 實現(xiàn)的跨平臺 Web 調(diào)試代理工具;

7､Chrome Remote Devices：依賴 Chrome 來進行遠程調(diào)試，適合安卓手機遠程調(diào)試靜態(tài)頁;

8､localhost 轉(zhuǎn) ip：真機調(diào)試，適合遠程調(diào)試靜態(tài)頁面;

9､vConsole：內(nèi)置于項目，打印移動端日志，查看網(wǎng)絡請求以及查看 Cookie 和 Storage;

總結：

工欲善其事必先利其器，沒有好的調(diào)試工具或方法，移動端真機下的 debug 簡直是前端的噩夢。但是有了這些好用的方法，各位優(yōu)秀的前端大佬，修復個小 bug 還是 so easy 的。