移動端真機調試方法總結

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

Mac+iPhone+Lightning+Safari 瀏覽器

步驟:前端

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

GitHub

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

GitHub

缺點:不能調試webView裏面的頁面ios

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

步驟:git

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

GitHub

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

GitHub

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

weinre

步驟:web

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

GitHub

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

vConsole+whistle

步驟:npm

  1. 安裝 whistle 後打開面板,在 value 中新建 vConsole.js,而後到 github.com/Tencent/vCo… 拷貝代碼到 vConsole.js 中
  2. 寫代理規則,如
https://baidu.com/ js://{vConsole.js}
複製代碼

這樣在手機看,就會有個控制檯出現,能看到 console.log 出來的東西,如圖:瀏覽器

GitHub

缺點:功能有限,沒法看到dom結構等,只能看一些輸出app

最後

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