移動端真機調試大法

在平常項目中的開發中，接觸移動端開發的小夥伴們免不了要和移動端調試打交道，本文特在此總結下經常使用的移動端調試，歡迎小夥伴補充。

谷歌瀏覽器

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

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

經過谷歌瀏覽器，就能夠知足咱們大部分需求，可是實際開發中，因爲各類機型的問題，真機調試也成爲了前端的必修課。

安卓手機調試

因爲安卓系統的便利性，咱們能夠方便的在電腦端調試真機，包括微信端頁面，步驟以下：

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便可。

iphone 調試

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

spy-debugger

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

1. 頁面調試＋抓包
2. 操做簡單，無需USB鏈接設備
3. 支持HTTPS。
4. spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。
5. 自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不形成任何影響。
6. 能夠配合其它代理工具一塊兒使用(默認使用AnyProxy) (設置外部代理)

調試方法

1. 安裝spy-debugger；

sudo npm install spy-debugger -g

1. 手機和PC保持在同一網絡下.
2. 手機開啓網絡代理，ip爲pc的ip，端口號默認爲9888.
3. https頁面需手機安裝證書
4. 命令行輸入

spy-debugger

此時界面以下：

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

教程詳細地址

調試抓包工具

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