移動端 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瀏覽器上開啟的網頁，還需要翻牆，但是卻無法檢視安卓裝置上國產廠商封裝的瀏覽器，如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後，要確保沒有設定網路代理，這樣才可以彈出驗證視窗。

---

小溪裡的個人前端部落格

http://xiaoxi.li