移動端網頁調試

時間 2019-11-06

標籤移動網頁調試欄目無線简体版

原文原文鏈接

自2019.05.22日離職以來，本身在家浪了兩天。而後發現，浪也該浪夠了，該收心找下工做了。因而屁顛屁顛的拿起了《在你身邊爲你設計》這本書看了一下午，看到移動端調試這裏，略有感覺，因而提取了下內容。javascript

還有還有，有哪位大佬推薦下前端開發的工做嗎，base廣州啊，不勝感激～關於我請戳blog下的resume.png😄前端

在這個5g到來的時代，移動互聯網繼續橫行，前端的開發工做和移動端更加緊密了，可是移動端調試着實讓人尷尬。化解尷尬的方法介紹下下面這幾種，有補充的歡迎留言👏java

使用Chrome Develop Tool調試

做爲一個前端開發工程師，沒下載個谷歌瀏覽器都很差意思說本身是混這行的了。在移動開發的過程當中，咱們是可使用桌面瀏覽器（推薦谷歌）進行調試的。儘管移動端網頁與桌面端網頁有諸多差別，可是說到底它仍是一個在瀏覽器裏瀏覽的HTML網頁，因此最經常使用的仍是在桌面藉助Chrome調試器。git

Chrome自帶的Developer Tool對於調試移動端網頁來講很是方便，能夠經過調整下表所示的幾個屬性來調整頁面。github

屬性名	功能
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菜單開發欄下選擇當前手機運行的頁面便可。post

優勢：能夠徹底在真機設備上調試網頁，不管是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>
複製代碼