調試移動網頁的幾種方法

在調試移動網頁時，一般開發時會直接使用 chrome 來模擬移動設備。

但畢竟跟真實環境仍是有差異，不少問題仍是須要到真實設備上才能發現。

如下會列舉幾種我在開發過程當中用到過的幾種調試方式，就當作個總結吧。

Safari

首先是最簡單的調試方法，一般在調試 ios 網頁上的問題時，最經常使用的就是用手機鏈接到電腦，打開 safari ，就能夠調試手機上 safari 所打開的網頁了。

具體的路徑是：

safari -> develop -> xxx 的iphone -> 打開的網頁

點擊以後會出現 safari 的控制檯，能夠在這裏查看網絡請求、console 輸出、dom 結構、樣式和打斷點等。

使用 safari 比較常見的問題就是，在 menu bar 上會找不到develop這個 menu。若是看不到這個 menu 的話，須要在

safari -> preferences -> Advanced

這個彈出框的最下面有一行

Show Develop menu in menu bar

把這個勾選上就能夠了。

Charles

一般狀況下，Safari 能夠解決大部分調試問題，可是一些網絡請求相關的問題，仍是用 Charles 會比較方便。

這裏簡單的說一下怎麼在 mac 上使用 Charles 查看移動設備上的網絡請求。

安裝 Charles

要使用 Charles，首先你要有個 Charles。

能夠去官網下載試用版，有錢的話，建議直接買個 license 用正式版，畢竟花錢買個舒心。

若是捨不得花這個錢，去網上搜一搜各類破解版本也是有的。

配置 http 代理

按照這個路徑

Proxy -> Proxy Setting

打開 Proxy Setting 的彈窗

1. 配置 Port 爲 8888
2. 勾選 Enable transparent HTTP proxying
3. 勾選 SOCKS Proxy，把下面的 Port 設置成 8889
4. 勾選 Enable HTTP proxying over SOCKS
5. 勾選 Include default HTTP ports
6. 點擊 OK 保存配置

配置 ssl 代理

按照這個路徑

Proxy -> SSL Proxying Setting

打開 SSL Proxying 的彈窗

1. 點擊Add
2. Host填 *，Port填443
3. 點擊OK 保存端口設置
4. 再點擊OK保存 SSL 設置

在本地安裝 ssl 證書

按照這個路徑

Help -> SSL Proxying -> Install Charles Root Certificate

在本地安裝信任證書，並選擇Trust

在移動設備配置信任證書

按照這個路徑

Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device for Remote Browser

點擊以後會彈出個對話框：

把這裏的地址輸入到手機的瀏覽器中，就會自動下載/安裝一個信任證書到手機中。在一些版本的 iOS 設備中，還須要到

設置 -> 通用 -> 描述文件

中點擊一下信任

在移動設備中配置代理

按照這個路徑

設置 -> Wifi(點擊網絡名稱右側的感嘆號) -> Http 代理

來到這個界面

把代理的 ip 地址和端口號填進去就能夠了。

ip 地址就是使用 Charles 的主機在當前網絡中的 ip 地址，若是不清楚的話，能夠在 Charles 中按照如下的路徑查看

Help -> Local Address

點擊以後會出現一個彈窗

其中 en0表示的就是本機在網絡中的地址，也就是要在移動設備中填入的 ip 地址。

端口號填配置 http 代理這裏配置的端口號就能夠了。

完成以上的配置，就能夠在 Charles 中查看到移動設備中的網絡請求了。

iOS WebKit Debug Proxy

除了 Charles 外，最近又發現了一款相似的代理工具，而且是開源的，項目地址可見ios-webkit-debug-proxy。

具體的原理跟 Charles 相似，配置方法相對來講要比 Charles 簡單一些，直接按照項目文檔中的描述一步步來就能夠了，這裏就再也不描述了。

相較於 Charles ，這個工具更先進的一點是能夠指定 chrome devtools 做爲調試工具，可是須要額外安裝另外一個工具remotedebug-ios-webkit-adapter。