移動端 Web 網頁調試技巧

原文出處： 盛瀚欽   

本文主要列舉了調試本地網頁、查看測試環境網頁的各類方法，涵蓋了PC、iPad、移動端的調試技巧。

本文的不足之處在於，小溪裏暫時尚未找到調試位於微信中和安卓各國產瀏覽器上的網頁。

相關設備概念：

• PC ：主要指以 Windows 系統爲表明的臺式機或筆記本，其一般爲 1 倍屏
• MacBook ：主要指 MacBook Pro Retina，其爲 2 倍屏，但 Mackbook Air爲 1 倍屏
• iPad ：主要指以 iPad Air Retina 和 iPad Mini Retina 爲表明的，其爲 2 倍屏，且按1024 x 768的「寬高」渲染網頁。這裏 iPad Pro Retina 是按1366 x 1024的「寬高」渲染網頁，在CSS的媒體查詢中能夠按「筆記本」的斷點來設置
• 移動端：主要是指手機。
  • iPhone 5s 及如下設備：按320的「寬」渲染網頁，其爲 2 倍屏幕
  • 常規安卓設備：一般分辨率爲1080 x 1920，按360的「寬」渲染網頁，其爲 3 倍屏幕
  • iPhone 6：分辨率爲750 x 1344，按375的「寬」渲染網頁，其爲 2 倍屏幕
  • iPhone 6 plus：實際分辨率爲1242 x 2208，按414的「寬」渲染網頁，其爲 3 倍屏幕。PS：貌似 iPhone 6 plus 實際顯示器上渲染後的分辨率爲1080 x 1920。

本地開發網頁

主要針對前端工程師，測試工程師也能夠學習使用。

前端在開發移動端網頁時，一般使用 localhost 在本地訪問網頁，在除本機外的設備上都須要換成 IP 訪問。

• ifconfig ： OS X 系統上查看網絡信息的命名，在Macbook Pro上 en0 表明 Wifi，因此能夠用ifconfig en0直接查看 Wifi 的信息。
• ipconfig ：Windows 系統上查看網絡信息的命令。

Chrome Emulation 即時「仿真」調試網頁

Chrome Emulation 使用的當前 Chrome 版本的 Webkit或 Blink 渲染的網頁，跟iPhone 或安卓設備上的瀏覽器上渲染出的網頁效果可能存在差別，如安卓 UC 瀏覽器就存在各類各樣的小 bug。

• 審查元素：右擊或使用快捷鍵(Mac：command + option + i)
• 調出 Emulation：再審查元素後，點擊對應的圖標或者使用快捷鍵（Mac：command + option + m）

吐槽
PC或Mac鏈接安卓設備，想用 Chrome 審查元素查看安卓設備上Chrome瀏覽器上打開的網頁，還須要FQ，可是卻沒法查看安卓設備上國產廠商封裝的瀏覽器，如UC瀏覽器、QQ瀏覽器。

Safari 即便調試網頁

「響應式設計模式」
Safari 在 「開發」菜單中有「響應式設計模式」，裏面有常見的 iOS 設備，如 iPhone 4s 、 iPhone 5s 、 iPhone 6s 、iPhone 6s plus 、 iPad mini 4 、 iPad Air 2 、 iPad Pro等。
固然，這裏的 Safari 的內核應該仍是基於當前系統的，與 iOS 設備上各自的 Safari 上可能還存在着差別。
超級棒的審查元素
在 Safari 上不只能夠調試瀏覽器自己打開的網頁，還能打開下文中提到的 Xcode Simulator打開的網頁，甚至能夠打開用 USB 鏈接的 iPhone/iPad。

Xcode Simulator 模擬器

Xcode Simulator 是能夠模擬各版本 iOS 系統的各類設備，比 Safari 更棒的地方在於它模擬了各類 iOS 系統上的 Safari，所以能夠復現各類奇葩 bug。

• 系統涵蓋了從 iOS 8.0 到 iOS 9.2 的各個版本、tvOS 、 watchOS
• 設備涵蓋了 iPhone 、 iPad 、tvOS 、 Apple Watch 、 Apple TV

小溪裏推薦下載 iOS 8.1，由於自帶的最新 iOS 模擬器在運行時可能會卡。

訪問測試環境的網頁

主要針對測試工程師，前端工程師學習起來也是 so easy 的。

靜態IP

原理簡析：靜態 IP 其實重心是在移動設備設置特定 DNS，而特定 DNS 是與測試環境有關係的。
不足之處：在iPad 及 移動端上配置靜態 IP 後，瀏覽器能夠訪問位於測試環境的網頁，但微信卻只能訪問位於正式環境的網頁。

設置步驟：

1. 記住自動分配的 IP
2. 設置對應設備的靜態 IP
   • iOS：設置 – 無線局域網 – 選中網絡 – IP地址 – 靜態
   • Android：設置 – WLAN – 長按選中網絡 – 修改網絡 – 高級 – 靜態 IP

網絡代理

原理簡析：在 PC 或Mac 上已經設置成功了測試環境，而移動設備經過網絡代理訪問 PC 或 Mac 上的網絡設置，就能夠訪問測試環境了，不管是瀏覽器仍是微信。

設置代理的常見方式（具體請自行百度）

• Fiddler 代理，只適用於windows系統
• Charles 代理，適用於OS X系統（即Mac電腦）
• 微信web開發者工具（如下簡稱「微信工具」），適用於windows和Mac

微信web開發者工具

官網地址

• 使用本身的微信號來調試微信網頁受權
• 調試、檢驗頁面的 JS-SDK 相關功能與權限，模擬大部分 SDK 的輸入和輸出
• 使用基於 weinre 的移動調試功能
• 利用集成的 Chrome DevTools 協助開發

移動調試
能夠在微信中查看位於測試環境的網頁

1. 確保本機和移動設備在同一局域網網段中
2. 將移動設備的網絡代理配置到：http://\*\*.\*\*.\*\*.\*\*（ PC或Mac 的IP），端口： 9973
   • iOS： 設置 – 無線局域網 – 選中網絡 – HTTP代理手動
   • Android： 設置 – WLAN – 長按選中網絡 – 修改網絡 – 高級 – 代理設置 – 手動
3. 重啓微信，並在微信中訪問網頁

PS：在小溪裏的電腦上並無像官網宣傳的那樣能夠審查元素

在小溪裏所在的公司裏面，設置網絡代理的步驟：

1. 鏈接 Wifi
2. 彈出驗證窗口，輸入公司帳戶
3. 設置網絡代理

PS：鏈接 Wifi後，要確保沒有設置網絡代理，這樣才能夠彈出驗證窗口。

QQ技術交流羣290551701  http://cxy.liuzhihengseo.com/554.html