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

排版：suny

在日常項目中的開發(fā)中，接觸移動端開發(fā)的小伙伴們免不了要和移動端調(diào)試打交道。本文總結(jié)了常用的移動端調(diào)試方法，歡迎大家學(xué)習(xí)和補充。

01

谷歌瀏覽器

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

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

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

02

安卓手機調(diào)試

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

2. 微信中打開網(wǎng)址：?http://debugtbs.qq.com，選擇允許tbs調(diào)試，如下圖：

3.在谷歌瀏覽器中輸入chrome://inspect/#devices, 用usb連接手機，便可以看到我們當前手機中訪問的頁面，點擊即可彈出調(diào)試頁面,與pc端頁面一樣，我們同樣可以打斷點，查看網(wǎng)絡(luò)請求等。初次連接，需要保證我們的電腦可以訪問 chrome-devtools-frontend.appspot.com，chrometophone.appspot.com兩個網(wǎng)址，否則顯示的頁面會為空白，在此給大家安利一個神器，http://ping.chinaz.com

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

03

iphone調(diào)試

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

04

spy-debugger

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

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

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

05

調(diào)試方法

1、安裝spy-debugger

sudo?npm?install spy-debugger?-g

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

3、手機開啟網(wǎng)絡(luò)代理，ip為pc的ip，端口號默認為98884、https頁面需手機安裝證書5、命令行輸入spy-debugger 此時，界面如下：

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

06

調(diào)試抓包工具

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

END

往期推薦01

Web前端安全的那些事兒

02

Vue項目優(yōu)化

03

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

嗨，你“在看”嗎？

總結(jié)

以上是生活随笔為你收集整理的phpcms移动端和pc端_移动端调试大法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。