原文出處： 盛瀚欽
本文主要列舉了除錯本地網頁、檢視測試環境網頁的各種方法，涵蓋了pc、ipad、移動端的除錯技巧。
主要針對前端工程師，測試工程師也可以學習使用。前端在開發移動端網頁時，通常使用
localhost在本地訪問網頁，在除本機外的裝置上都需要換成ip訪問。
chrome emulation使用的當前chrome版本的webkit或blink渲染的網頁，跟iphone或安卓裝置上的瀏覽器上渲染出的網頁效果可能存在差異，如安卓 uc 瀏覽器就存在各種各樣的小 bug。
吐槽
pc或mac連線安卓裝置，想用chrome審查元素檢視安卓裝置上chrome瀏覽器上開啟的網頁，還需要fq，但是卻無法檢視安卓裝置上國產廠商封裝的瀏覽器，如uc瀏覽器、qq瀏覽器。
「響應式設計模式」
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是可以模擬各版本 ios 系統的各種裝置，比safari更棒的地方在於它模擬了各種 ios 系統上的 safari，因此可以復現各種奇葩 bug。
主要針對測試工程師，前端工程師學習起來也是 so easy 的。設定步驟：
記住自動分配的 ip
設定對應裝置的靜態 ip
android：設定 – wlan – 長按選中網路 – 修改網路 – 高階 – 靜態 ip
官網位址
除錯、檢驗頁面的 js-sdk 相關功能與許可權，模擬大部分 sdk 的輸入和輸出
使用基於 weinre 的移動除錯功能
利用整合的 chrome devtools 協助開發
移動除錯確保本機和移動裝置在同一區域網網段中
將移動裝置的網路**配置到：http://\*\*.\*\*.\*\*.\*\*（ pc或mac 的ip），埠： 9973
ps：在小溪裡的電腦上並沒有像官網宣傳的那樣可以審查元素
在小溪裡所在的公司裡面，設定網路**的步驟：
連線 wifi
彈出驗證視窗，輸入公司賬戶
設定網路**
ps：連線 wifi後，要確保沒有設定網路**，這樣才可以彈出驗證視窗。
qq技術***290551701
移動WEB手機端除錯
在我們做移動端web開發的時候肯定會遇到相容性問題，比如某些時候在某些奇葩手機上就是有問題。為此我在網上尋找了一些辦法，比如遠端除錯什麼的，但覺得都很麻煩。在這裡我向大家介紹一種比較簡單快捷的辦法。我們這裡用到一款叫 js mobile console 的外掛程式 github位址 它的使用方法非常...
移動端web設計尺寸 乾貨 web網頁設計尺寸規範
在建站 時，你需要先對網頁設計尺寸有所了解。不同瀏覽器 不同終端裝置的流行尺寸也不一樣，就pc端網頁設計尺寸而言，目前比較常見的解析度是1920 1080，1366 768。手機端網頁設計尺寸則比較多樣，尺寸繁多，包括ios和安卓。通常情況下，內容區為750px或960px或者1080px的，一般不...
移動端 網頁布局
固定寬度布局 為網頁設定乙個固定的寬度，通常以 px 做為長度單位，常見於 pc 端網頁。流式布局 為網頁設定乙個相對的寬度，通常以百分比做為長度單位。柵格化布局 將網頁寬度人為的劃分成均等的長度，然後排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。響應式布局...