原文出處： 盛瀚欽
本文主要列舉了調試本地網頁、查看測試環境網頁的各種方法，涵蓋了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 後，瀏覽器可以訪問位於測試環境的網頁，但微信卻只能訪問位於正式環境的網頁。
設置步驟：
記住自動分配的 IP
設置對應設備的靜態 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 協助開發
移動調試
可以在微信中查看位於測試環境的網頁
確保本機和移動設備在同一局域網網段中
將移動設備的網絡代理配置到：http://\*\*.\*\*.\*\*.\*\*（ PC或Mac 的IP），端口： 9973
iOS： 設置 – 無線局域網 – 選中網絡 – HTTP代理手動
Android： 設置 – WLAN – 長按選中網絡 – 修改網絡 – 高級 – 代理設置 – 手動
PS：在小溪裏的電腦上並沒有像官網宣傳的那樣可以審查元素
在小溪裏所在的公司裏面，設置網絡代理的步驟：
連接 Wifi
彈出驗證窗口，輸入公司賬戶
設置網絡代理
PS：連接 Wifi後，要確保沒有設置網絡代理，這樣纔可以彈出驗證窗口。
QQ技術交流羣290551701 http://cxy.liuzhihengseo.com/554.html