移動端真機調試方法總結

最近要分析web頁面，在安卓和ios上的性能差別，除了操做系統自己不一樣以外，應該還多地方要探究的，第一步就是要在真機上分析。因此總結一下幾個方法。

Mac+iPhone+Lightning+Safari 瀏覽器

步驟：

1. 用：Lighting線將mac與iphone相連
2. iphone打開Web檢查器（設置->Safari->高級->Web檢查器）
3. iphone用safari打開要進行分析的頁面
4. mac打開safari瀏覽器（菜單->開發->對應的手機名稱->要調試的頁面），點擊即進入Safari Developer Tools，如圖：

5. 能夠見到的調試界面是這樣的

缺點：不能調試webView裏面的頁面

安卓手機+安卓數據線+電腦

步驟：

1. 用數據線將手機與電腦相連
2. 手機開啓use調試（安卓不一樣機型開啓的步驟不盡相同，不知道的百度一下）
3. 打開chrome，輸入chrome://inspect/#devices，勾選Discover USB devices
4. 用手機chrome打開要調試的網頁（若是是其餘webView頁面，須要在app配置啓動代碼，詳鍵官方教程）
5. 選擇你要調試的頁面進入

6. 能夠見到是這樣的調試界面

缺點：親測，mac中調試界面與小米6手機的界面常常不一樣步，操做很是不方便，還好控制檯仍是能正常看東西

weinre

步驟：

1. 能夠直接npm install weinre，而後啓動，打開管理界面便可
2. 直接安裝whistle，自帶了weinre。還能夠代理不一樣環境，具體教程見：avwo.github.io/whistle/rul…

缺點：能夠說是極簡主義了，步驟簡單、調試簡單、能調的也簡單（就是查查元素，看看控制檯，不能像chrome那些分析工具同樣)

vConsole+whistle

步驟：

1. 安裝 whistle 後打開面板，在 value 中新建 vConsole.js，而後到 github.com/Tencent/vCo… 拷貝代碼到 vConsole.js 中
2. 寫代理規則，如

https://baidu.com/ js://{vConsole.js}
複製代碼

這樣在手機看，就會有個控制檯出現，能看到 console.log 出來的東西，如圖：

缺點：功能有限，沒法看到dom結構等，只能看一些輸出

最後

• 這是一篇以前寫的博客，這裏是遷移了過來～～
• 瞭解更多內容，歡迎關注個人blog, 給我個star～
• 以爲內容有幫助能夠關注下個人公衆號 「前端Q」，一塊兒學習成長～～