文章：樊秀寶(北京中心—小易F8技術小組)

排版：suny

在日常項目中的開發中，接觸移動端開發的小伙伴們免不了要和移動端調試打交道。本文總結了常用的移動端調試方法，歡迎大家學習和補充。

01

谷歌瀏覽器

谷歌瀏覽器是我們前端開發中必不可少的利器。跳樣式、打斷點、看網絡請求、看性能等，基本上你能想到的，谷歌都能滿足你。在移動端調試方面也是一樣，我們可以利用谷歌瀏覽器的手機模式，如下圖, 點擊這個右側紅框手機按鈕，便可以切換為手機模式，同時我們還可以在左側紅框內點擊下拉箭頭，選擇不同的手機模式，還可選擇responsive模式自定義寬高。

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

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

02

安卓手機調試

由于安卓系統的便利性，我們可以方便的在電腦端調試真機，包括微信端頁面，步驟如下：1.?手機打開開發者選項，選擇允許usb調試(由于安卓機型較多，具體開啟方法不一一闡述了)

2. 微信中打開網址：?http://debugtbs.qq.com，選擇允許tbs調試，如下圖：

3.在谷歌瀏覽器中輸入chrome://inspect/#devices, 用usb連接手機，便可以看到我們當前手機中訪問的頁面，點擊即可彈出調試頁面,與pc端頁面一樣，我們同樣可以打斷點，查看網絡請求等。

初次連接，需要保證我們的電腦可以訪問 chrome-devtools-frontend.appspot.com，chrometophone.appspot.com兩個網址，否則顯示的頁面會為空白，在此給大家安利一個神器，http://ping.chinaz.com

輸入我們的網站，點擊ping檢測，等待一段時間，即可在下面列表中展示多地ip ping我們網址的列表，找出哪些可以ping的通的，然后修改本地host即可。

03

iphone調試

針對蘋果手機，我們可以優先在iphone用safari訪問，打開safari的web檢查開關，連接電腦即可看到我們手機上訪問的頁面，不過調試沒有chrome方便。

04

spy-debugger

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

• 頁面調試＋抓包
• 操作簡單，無需USB連接設備
• 支持HTTPS
• spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy
• 自動忽略原生App發起的https請求，只攔截webview發起的https請求，對使用了SSL pinning技術的原生App不造成任何影響。

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

05

調試方法

1、安裝spy-debugger

sudo?npm?install spy-debugger?-g

2、手機和PC保持在同一網絡下

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

spy-debugger

此時，界面如下：

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

06

調試抓包工具

推薦mac端charles、window端Fiddler進行抓包，我們可以抓取各種網絡請求，同時還能動態修改請求，且用本地文件替換網絡文件，方便本地代碼調試線上代碼，具體教程可自行搜索。

END

往期推薦01

Web前端安全的那些事兒

02

Vue項目優化

03

你可能不知道的前端小技巧

嗨，你“在看”嗎？