移動端網頁除錯

call_me_R發表於2019-05-26

在家屁顛屁顛的拿起了《在你身邊為你設計》這本書看了一下午，看到移動端除錯這裡，略有感受，於是提取了下內容。

在這個5g到來的時代，移動網際網路繼續橫行，前端的開發工作和移動端更加緊密了，但是移動端除錯著實讓人尷尬。化解尷尬的方法介紹下下面這幾種，有補充的歡迎留言?

使用Chrome Develop Tool除錯

作為一個前端開發工程師，沒下載個谷歌瀏覽器都不好意思說自己是混這行的了。在移動開發的過程中，我們是可以使用桌面瀏覽器（推薦谷歌）進行除錯的。儘管移動端網頁與桌面端網頁有諸多差異，但是說到底它還是一個在瀏覽器裡瀏覽的HTML網頁，所以最常用的還是在桌面藉助Chrome偵錯程式。

Chrome自帶的Developer Tool對於除錯移動端網頁來說非常方便，可以通過調整下表所示的幾個屬性來調整頁面。

屬性名	功能
User Agent	設定當前模擬裝置的使用者代理(UA)
Device metrices	設定頁面的大小，預設值是模擬設定的大小
Emulate touch events	模擬觸控式螢幕事件
Fit in window	頁面大小是否會根據視窗大小進行適配

優點：無須額外的成本，方便快捷。

缺點：僅僅用來模擬，並不能完全代表移動裝置的真實狀況。

使用IOS Safari + Mac OS Safari配合除錯

這個方法對用MAC來辦公的夥伴就比較友好了～

Apple允許開發者通過資料線連線的方式，在Mac OS的Safari裡面除錯iOS裝置上的網頁。但是這種方法在使用前，需要簡單設定以下內容：

在iOS裝置上，開啟Safari的Web檢查器，選擇設定 -> Safari -> 高階 -> Web檢查器命令。（用到JavaScript的話，順便在Web檢查器同級上開啟吧）
在計算機上的Safari啟用開發選單，選擇偏好設定 -> 高階 -> 在選單欄中顯示'開發'選單命令。

當需要除錯手機頁面的時候，將裝置與計算機通過資料線連線後，在Safari選單開發欄下選擇當前手機執行的頁面即可。

優點：可以完全在真機裝置上除錯網頁，無論是HTML和CSS，還是指令碼和請求，都和在桌面瀏覽器一樣，最重要的是當前除錯的是在真實環境下的頁面。

缺點：必須是iOS + Mac OS的組合，只能除錯iOS裝置的頁面，不適用於Andriod裝置。

使用Android Chrome + 桌面Chrome配合除錯

嗯～Apple那麼強勢，我安卓表示不服，也要來自己的一套。

Google Chrome DevTools通過USB資料線直接除錯手機上的網頁。

只需要準備下面幾個步驟：

在Andriod"開發者"選項裡開啟USB除錯模式。
插上USB資料線。
在Chrome選單裡選擇"工具"選項，繼續選擇檢查裝置選項，即可列出所有連線的裝置。

優點：簡單、跨平臺

缺點：只支援Android 4+

使用Weinre遠端除錯

Weinre的github倉庫地址是github.com/nupthale/we…，在其README.md裡面有詳細的介紹。

Weinre來源於Web Inspector Remote，是一個遠端頁面除錯工具，功能和Firebug、WebKit Inspector類似，可以幫助我們在PC端遠端除錯執行在移動裝置瀏覽器內的Web頁面或應用，能夠即時除錯DOM元素、CSS樣式和JavaScript等。

Weinre為了能夠同步桌面的除錯客戶端和移動裝置上的除錯目的，需要你搭建一個除錯伺服器(Debug Server)，通過這臺除錯伺服器，可以在除錯目標(Debug Target)和桌面除錯客戶端(Debug Client)之間建立一個同步的連線。詳細的搭建見Weinre倉庫的README.md介紹。囧，步驟有點多，不想碼字了?

優點：同時支援iOS裝置和Android裝置，並且能直接對手機上的頁面進行除錯，無須安裝客戶端。

缺點：需要對HTML頁面有改動的許可權，因為是遠端連線的原因，可能網路連線速度會影響除錯的響應。

當看到優點是不是很激動，在真機上可以除錯iOS和Android裝置的網頁耶✌️

使用vConsole除錯

由騰訊出品的vConsole除錯工具，在除錯移動端的時候非常有效，而且其使用方法也是簡單。

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
複製程式碼