移動端Web系列2 --- 調試

瀏覽器調試

• chrome（V35.0.1916.153）
  使用chrome deleloper tool模擬移動設備。注意，部分功能仍是與真機有差異，因此仍是建議開發完成後在真機中看一下效果。
  打開方法

  • 調出開發者工具（MAC: cmd+opt+i / WIN: F12）
  • 點擊show console（MAC: Esc）
  • 選擇Emulation，選擇須要的device/user Agent等參數

• Firefox (V30.0)
  我平時沒用FF開發。部分細節不是特別熟悉。
  好像這個沒有對手勢等的支持。

  打開方法：

  • 工具 - Web開發者 - 響應式設計視圖

• safari
  Develop - User Agent。
  我只在數據線鏈接 iphone 的調試的時候用的比較多。 這個下面會講到。

設備調試

• IOS設備遠程調試（MAC）

  • IOS中設置safari高級選項中開啓Web檢查器
  • IOS設備經過數據線鏈接MAC
  • IOS safari中打開頁面
  • 打開桌面版Safari，點擊開發菜單，選擇你調試的設備名，選擇調試的網頁
  • 可看到相似Web的調試界面。具體功能再本身琢磨好了

• Android設備遠程調試（MAC/PC）

  • 開啓系統設置中USB調試（開發人員選項）
  • 開啓桌面Chrome設置中的USB調試選項
  • 手機chrome瀏覽器中打開相應的網頁
  • 桌面Chrome可看到對應打開的頁面選項
  • 備註： 網上的ADB插件，貌似在最新版本chrome中能夠不用的

• 移動設置 UC瀏覽器

  • 參見官方文檔

模擬器

沒嘗試過。

其它

• 二維碼掃描，真機測試。可以使用插件生成二維碼。
• 同網絡中，ip地址訪問（注意引用資源路徑，也需作相應轉換）
• weinre,MIHTol等，如今基本不在使用了

寫在最後

還有更高效的方法的，歡迎繼續作補充。