移動網頁版本開發、調試錦囊

呵呵說這個題目有點玄啊，趁閒下來的時候將我之前用過各類移動開發調試工具及辦法列出來方便你們一塊兒玩轉移動網頁版本開發（如下統稱爲m版本開發）。
以來列舉各類辦法各有優略，各有益處，不分前後，大概說一說

1. chrome等自帶的模擬器

記不得chrome從那個版本開始包含手機模擬器了，這對於進入網頁版本開發簡直就是下降了一個門檻，開發帶了了極大的遍歷，其中新版本更新之後包含網絡狀態模擬、設備選擇、ua，方便開發和調試（只能說很好很強大，我是一個chrome重度用戶），雖然chrome帶來了如此之多的開發遍歷，也依舊有不足，chrome在切換手機模擬狀態之後事件上作了兼容的，可是對於實際設備上的真實狀況模擬指定是作不到的，由於用戶手機上的瀏覽器五花八門，版本不一。chrome只是能快速的幫你作第一步驗證和杜絕絕大部門容易產生的錯誤。
 

2. css-debugger

這是一個經過在全部頁面元素添加outline的方式，繪製出當前頁面元素的盒子容器的大小，他的益處就是夠小，只須要短短108個字節（看下面的回覆會有更精悍的代碼）就能夠將頁面dom佔用大小盡收眼底，對於頁面構建的同窗有幫助，可是隻適合調整頁面，沒有圖形化操做工具，入門級佈局能夠試着使用和跟蹤調試你的佈局。
 


3. chrome、safari等利用手機鏈接usb進行本地調試

這種方式須要開啓設備上的safari、chrome的支持調試的功能，並鏈接到電腦，對應的開啓電腦版本的瀏覽器調試。它的弊端很明顯，就是單一瀏覽器只能調試本身的對應的瀏覽器，而且設備須要鏈接電腦（yy一下你有n多設備，不可能每一臺都拿來本身調試吧？），如下適宜下safari的調試截圖

 


4. adb調試

這個工具是最先的調試方式，筆者曾經廢了半天的力氣將調試環境搭建好了（自行尋找相關的文章太多了），可是第二次再也沒碰它，問題很明顯，對環境依賴，須要安裝不少東西，調試依舊須要usb鏈接，調試是在本地啓動一個server，這裏就不貼圖了。

5. weinre

相比於以上調試辦法的設備直連、瀏覽器要求、環境要求，weinre還算是要求比較少的，weinre是一個遠程調試工具，須要在調試的機器上安裝（依賴java），而後開始端口監聽，網上也有不少相似的教程. 而且對webkit的內核的瀏覽器所有能夠調試。固然他也有本身的侷限性，例如network請求和資源，性能調優等都沒法使用，而且多個終端同時訪問的時候會形成調試控制檯切換；惟一值得清醒的是設備能夠遠程調試（html、console）。
 

6. eclipse、xcode使用模擬器

雖然用過這兩個工具可是真心以爲不是搞移動端開發的不要用這個，調試起來很慢而且須要安裝和熟悉這麼大型的工具，固然能夠去百度的開放服務平臺（雖然這裏很不穩定，可是對於須要測試的平臺較多的項目能夠試試）

7. HTTP代理服務器

這個也有特定要求，須要在調試的服務器（開發者的機器上）安裝fiddler、Charles這類的軟件而後開啓代理，讓須要測試的機器設置http代理，經過手機和設備鏈接調試，使用成本較低，須要在統一網段的設備進行開發調試，適合於抓包和分析信息。

8. 配置hosts

若是你的機器刷成開發者模式（ios越獄），那麼請赤果果的將手機的host直接指向機器的ip進行本地開發，這種方式相比於上一種方式是不用安裝軟件設置http代理，前提是你足夠任性將手機刷了哈哈哈