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

標籤：

呵呵說這個題目有點玄啊，趁閑下來的時候將我以前用過各種移動開發調試工具及辦法列出來方便大家一起玩轉移動網頁版本開發（以下統稱為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. HTTPProxy 伺服器

這個也有特定要求，需要在調試的伺服器（開發人員的機器上）安裝fiddler、Charles這類的軟體然後開啟代理，讓需要測試的機器設定http代理，通過手機和裝置串連調試，使用成本較低，需要在統一網段的裝置進行開發調試，適合於抓包和分析資訊。

8. 配置hosts

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

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