移動端前端開發調試

經過移動端使用 Web 服務的比率愈來愈大，例如淘寶今年雙十一，移動端交易份額就達到 42.6%。因而可知，掌握移動端的前端開發和測試是很是有必要的。

本文只介紹與調試有關的內容，至於其餘移動端開發知識（技巧、坑）太多太大，推薦 Mars 移動前端開發知識庫。這個項目好久沒有大動靜了，歡迎你們猛烈關注，不要讓它「太監」了。

因爲本文還會不斷更新、補充、修正，故在此給出原文鏈接，以便查看最新版本：http://yujiangshui.com/multidevice-frontend-debug/

響應式測試

響應式如今基本是中小型項目的標配了，先來談談響應式測試技巧。

基礎的響應式測試

響應式的測試特別簡單，經過改變視窗大小（也就是縮放你的瀏覽器）便可測試。固然，你的 CSS 中 Media Queries 判斷條件設置時要使用 max-width 才行，若是使用 max-device-width 則會根據你設備的屏幕尺寸來判斷。區別詳情請看 這裏。

對於 Chrome 瀏覽器，你能夠將 Chrome DevTools 放在右邊，這種佈局方式尤爲適合用在外接的大屏幕上。而後經過拖動 DevTools 快速測試響應式的顯示效果：

優勢就是對於 Chrome 開發者能夠快速查看響應式變化效果。缺點就是分辨率尺寸不會很精確，由於它的頁面寬度是添加了滾動條以後的寬度，這樣對 Media Queries 的臨界值效果很差測試。

對於 Firefox 瀏覽器，不愧是早期開發的必備神器，它早就內置了響應式測試工具，能夠經過 Firefox 工具 -》Web 開發者 -》自適應設計視圖 啓用：

能夠設置分辨率等參數，以及模擬 touch 事件、屏幕截圖等功能，能夠隨意拖動。足夠簡單和流暢，很方便測試響應式的變化效果等。對於基礎的響應式測試以及臨界值變化狀況測試，強烈推薦 Firefox 瀏覽器。

因爲響應式測試太簡單，因而有了一大堆的書籤欄 JS 工具或者 Chrome 擴展，而且以不少交互特效、複雜的功能來吸引用戶。實際上使用起來，你可能須要依靠網絡才能使用，還會遇到切換縮放不夠流暢、刷新不方便等等問題，在這裏不推薦。

Chrome 模擬設備尺寸

若是你須要測試某種明確的機型，Chrome 新版的 Emulation 就能夠派上用場了。Emulation 如今變成了一個手機圖標（），以前的 Emulation 面板被放在了 DevTools 的分裂視圖中了，若是你懷念之前的 Emulation 面板或者須要模擬地理位置、加速計等功能，在 DevTools 界面摁下 ESC 便可打開分裂視圖。打開 DevTools 以後，點擊這個「手機圖標」便可進入 Chrome 手機模擬器：

在 Device 你能夠選擇預置的設備，快速切換分辨率和屏幕有關參數。此外還能夠設置分辨率比率，來模擬 Retina 或者更高級屏幕下的效果，這樣能夠測試你的響應式圖片是否被正確替換等。它甚至提供了網絡測試，來測試低網速狀況下你的頁面加載狀況。慢網速的測試，每每須要用抓包工具（Charles 等）來模擬，如今用 Chrome 也能夠模擬了。

除此以外，Chrome 的手機模擬器還提供了很是很是多的實用功能，好比模擬 touch 事件、捏等手勢操做、地理位置、加速計、Retina 等等，詳情請見 官方文檔，英文很差的朋友能夠看個人 翻譯版本。節約篇幅，這裏再也不贅述。

這裏的方法僅能做爲基礎的響應式測試，對於中小型、比較簡單的項目，徹底足夠用了，對於稍微複雜的頁面，仍是須要用虛擬機或者真機測試，這樣更加可靠。

基於 Android 的移動端前端開發調試

Android 系統是份額最大的移動端設備操做系統。一方面，Android 是 Google 開發的，瀏覽器等也是基於 Blink 內核（早期版本基於 Webkit ），都是 Google 開發的，因此技術上應該是沒有問題的。另外一方面，Google 無償開源 Android 系統，結果致使不少小廠商本身亂改 Android 系統，各類版本遍地生花，各類 BUG 層出不窮。

Android 虛擬機測試

在電腦上安裝 Android 虛擬機，就能夠用虛擬機打開進行測試。通常推薦兩個：

Genymotion

Genymotion是一個很棒的 Android 虛擬機。可是首次安裝配置須要麻煩一些。因爲基於 VirtualBox 內核，因此要先安裝 VirtualBox，而後須要註冊帳號 Genymotion，能夠無償使用，可是有功能限制。若是遇到重要的項目，臨時買一兩個月高端帳號也是 OK 的。

安裝完成，登錄以後，選擇 Android 版本和手機型號，便可下載對應的虛擬機包，下載好的虛擬機會顯示在列表中，你能夠選擇開啓。

安裝好的虛擬機與你 Host 本機處於一個局域網，這樣你就能夠用 BrowserSync 之類的，開啓一個局域網 IP 本地服務器，在移動設備上同步測試了。關於 BrowserSync，若是你沒接觸過，下面有講。

比較蛋疼的是，Genymotion 虛擬機裏面安裝 APP 好像比較麻煩，安裝 Chrome 不太方便，這樣不方便鏈接桌面版 Chrome 進行調試，只能使用 Weinre 調試。若是你有 Genymotion 使用這方面的經驗歡迎分享。

Parallels

Parallels 是基於 Mac 平臺的虛擬機，使用它建立虛擬機的時候，能夠直接下載 Android 系統並安裝，超級傻瓜的操做，可是超級好用。

沒錯，它還能夠裝 Chrome OS，只須要點擊一下等待下載便可。

其餘虛擬機軟件應該也能夠實現，不如這兩種好用，若是這兩種你沒法使用，能夠自行搜索選擇其餘方法嘗試。Win 系統能夠直接安裝 Android SDK 也能夠經過虛擬機方式，這裏再也不贅述。

安裝完虛擬機，就能夠用裏面的瀏覽器打開網頁進行測試了，虛擬機與本機處於一個局域網，能夠用局域網 IP 來調試本地頁面。

虛擬機不是真機，可是要比直接用瀏覽器測試強一些，在桌面操做比較方便，還能夠安裝多個版本測試。

Android 真機調試

桌面端的前端開發調試很是簡單，由於有 Firebug、Chrome DevTools 等工具，直接右擊打開就能夠看到元素的 CSS，而且能夠查看各類資源、修改運行調錯 JS 等。而移動端瀏覽器顯然無法帶有這些功能，因而能夠用數據線鏈接設備，而後用電腦上的 Chrome DevTools 來調試移動設備上的頁面。

首先，你的 Chrome 版本必須高於 32。其次你的測試機 Android 系統高於 4.0，測試機安裝 Chrome for Android 纔可使用 Chrome 遠程調試這項功能。

先用數據線將 Android 測試機鏈接到電腦上。須要打開測試機上面「開發者選項」中的 「USB 調試」功能。在 Android 4.2+ 系統上「開發者選項」默認是隱藏的，因此你須要先開啓「開發者選項」（開啓方法：設置 -》 關於本機 -》 猛擊版本號（Build number）屢次 便可開啓開發者選項）。以後若是沒有開啓，或者沒有反應，多是你的版本問題或者點擊錯了，你能夠嘗試把 關於本機 上全部的選項都猛擊幾回，就會開啓。

而後在桌面版 Chrome 打開 chrome://inspect 便可查找你的設備，在設備上的 Chrome 打開網頁，便可看到，而後就能夠在桌面版 Chrome DevTools 調試移動設備上的頁面了。

此外，還能夠直接在桌面版 Chrome 輸入 URL 在移動設備上打開；在本地用 Nodejs 或者其餘功能開啓一個本地服務器，用端口轉接讓移動設備直接訪問本機 localhost 上的頁面，再配合 LiveReload、BrowserSync 之類的工具，自動刷新，測試簡直爽歪歪。

更多細節再也不贅述，能夠查看 Remote Debugging 官方文檔 或者個人 翻譯版本。

Android WebView 前端開發調試

如今愈來愈多的移動端 APP 是 WebView，由於開發方便，更新快捷。那麼就會有調試 WebView 的需求，由於他們自己就是網頁。

基於 Chrome 的調試

在 Android 4.4（KitKat）或者更新版，你可使用 DevTools 來調試原生安卓應用中的 WebVies 內容。

不過須要在你開發的應用中，添加有關代碼才能夠啓用 WebView 的調試，這裏比較有侷限性，有興趣的朋友能夠參照 官方文檔 或者個人 翻譯版本 試下，這裏再也不贅述。

使用 Weinre 調試

Weinre 是一個至關簡單好用的調試工具。它會在你本地建立一個監聽服務器，並提供一個 JavaScript，你只須要在須要測試的頁面中加載這段 JS，就能夠被 Weinre 監聽到，在 Inspect 面板中調試你這個頁面。

目前 Weinre 也發佈到 NPM 上了，Mac 下具體使用方法以下（ Win 的同窗請參加：遠程調試工具-weinre）：

首先安裝 Weinre：

npm install -g weinre 

安裝完成以後，要在本地開啓一個監聽服務器，須要獲取本機的局域網地址：

• Mac 在終端執行 ipconfig getifaddr en0 命令。
• Win 在命令行執行 ipconfig 命令。

這時候拿到一個 IP，就本例而言，個人 IP 爲 10.189.249.254，這時候執行：

weinre --boundHost 10.189.249.254 

開啓本地監聽服務器。

這裏有一個網址，就是 Weinre 的一些說明，咱們能夠打開看下：

這裏最重要的是箭頭所指的 <script src="http://10.189.249.254:8080/target/target-script-min.js#anonymous"></script> 這個 JS，咱們須要把這個 JS 放到咱們要調試的頁面中，這樣訪問頁面的時候，加載這個 JS，就會被 Weinre 監聽到進行控制。

小提示：這個 JS 後面的 #anonymous 起到一個標識做用，爲了區別，咱們能夠將其修改爲 #test 放到頁面中。這時候，咱們的 Inspect 面板的地址就不是 http://10.189.249.254:8080/client/#anonymous 了，而是 http://10.189.249.254:8080/client/#test。

當咱們訪問頁面的時候，就會出如今監聽列表中，若是有多個網頁，你能夠從列表中選擇一個。而後就可使用後面的 Elements、Console 等面板來進行調試操做了：

Weinre 很是靈活，只須要在頁面中加載這個 JS，而後訪問便可，所以 WebView 能夠用這種方法調試，一些低版本的 Android、iOS 也能夠支持，Window Phone 也是能夠用的。在調試移動設備時你可能須要在本地搭建一個局域網 IP 的服務器，將設備與本機網絡鏈接成一個局域網，用移動設備訪問這個網頁便可。

固然 Weinre 也不是萬能的，相比 Chrome 的調試工具，它缺乏 JavaScript debug 以及 Profiles 等經常使用功能，可是它兼容性強，能夠實現基礎調試功能。

基於 iOS 的移動端前端開發調試

iPhone 等一系列蘋果設備對前端仍是至關友好的，性可以好，Safari 瀏覽器也是不錯，型號固定統一，問題也比較好解決，此外蘋果公司也提供了一系列開發者工具。

Safari 默認是隱藏開發選項的，在第一次使用的時候，須要在 Safari 中選擇 「偏好設置」-》「高級」-》「在菜單欄中顯示開發選項」：

使用 iOS Simulator 調試開發

iOS Simulator 是 Xcode 開發工具內置的 iOS 模擬器，所以該功能僅能在 Mac 系統下使用。按照以下方式便可打開：

打開以後，你能夠用模擬器裏面的 Safari 打開須要調試的網頁。它能夠直接打開本地 localhost 的頁面，無須任何設置。你能夠選擇上面菜單中的「硬件」來模擬其餘 iOS 設備，包括 iPad 等。若是你升級了你的 OS X 系統和 Xcode 6，你還能夠模擬 iPhone 6 和 iPhone 6 Plus。

若是須要調試，打開桌面版的 Safari，在「開發」中選擇要調試的頁面，便可打開 Safari 調試面板：

這樣就能夠進行調試了。這裏提供一個技巧：將 URL 粘貼到模擬器的地址欄時，用 CMD + V 是沒法粘貼進去的。若是想要粘貼，先摁下 CMD + V 而後再用鼠標點擊一下地址欄，稍等會出現 Paste 按鈕，再用鼠標點擊一下這個按鈕便可粘貼進去。

iOS 設備真機調試

模擬器已經足夠強大方便了，但有些手勢操做測試以及最真實的用戶體驗測試仍是須要真機。Safari 調試真機上的網頁也是很是簡單的。

首先須要在 iPhone 等設備上設置一下 Safari 瀏覽器，開啓調試功能。具體步驟：「設置」-》「Safari」-》「高級」-》「Web 檢查器」。使用數據線鏈接電腦，在設備上用 Safari 瀏覽器打開須要調試的頁面，以後在桌面版的 Safari 開發選項中便可看到進行調試，跟用 iOS Simulator 同樣，只不過如今換成了真機。

可是調試本地網站，你可能要將手機與電腦連在一個局域網內，而後開啓一個局域網 IP 的服務器進行調試，稍微麻煩。

此外 Safari 還能夠調試在 iOS 上面的 WebView，好比用調試 PhoneGap 打包的 APP 等，方法相似，這裏 還有個測試用 APP，會 iOS 開發的朋友能夠看下。

使用 MIHTool 進行遠程調試

MIHTool 是國人 聽秦 開發的，基於 Weinre，用於 iOS 設備的前端開發測試。

上面有提到 Weinre 大致的工做方式，即開啓一個服務器，而後將 JS 插入到頁面中，訪問進行調試。MIHTool 將這個過程簡化了，它是一個 APP，能夠直接安裝到你的 iOS 設備裏面，而後內置一個簡單的瀏覽器能夠打開你的測試頁面，當它開啓時，會自動向頁面中插入 Weinre 的 JS，並告知 Weinre 控制檯 URL 等信息，讓你能夠訪問進行調試。

它還提供了一個公共的 Weinre 調試服務，生成相似 http://i.mihtool.com/dev/client/#AwAj 這樣的連接，打開便可調試，很是方便，就是有些卡。

除此以外，它還提供了不少方便調試的功能，有興趣的朋友能夠看下 官方網站的介紹 和 Debugging web content on iOS。感受就是醜了一些，若是能請設計師或者交互設計一下，會好得多。

移動設備在線測試

移動端設備如此之多，小公司或者團隊，沒有這麼多資金和精力購買如此多的測試設備進行測試。因而就有人買了這些設備，鏈接起來，提供在線調試服務。

例如用不一樣的設備訪問你的網站，並截圖：

甚至可讓你遠程控制一臺機器，進行測試操做：

BrowserStack 就提供這種服務，它能夠實時在線調試，也能夠 截屏、測試響應式 等等。

此外 Keynote 也提供這種服務，固然這裏的 Keynote 不是 Mac 上的幻燈片 APP。它提供更加真實的 Mobile 測試，我簡單的試了一下，果真比較卡，應該是真機測試：

其餘移動端調試方法和技巧

BrowserSync 同步操做

BrowserSync 是我最愛的多終端測試工具。在沒有使用這個BrowserSync 以前的原始的測試流程通常是這樣的：

先把本地的網頁上傳到遠程服務器（由於好多設備都要去訪問一個固定的地址），而後將網址輸入到各個測試機的測試瀏覽器裏面手動打開(或者使用瀏覽器插件等，生成二維碼掃一下）。而後手機開始下載頁面，須要等待下載。觀看效果進行測試，每一個測試機都要操做一遍。測試其餘網頁的時候，每一個測試機從新輸入網址、刷新。若是代碼有修改，須要從新上傳服務器進行刷新。

而 BrowserSync 這個工具，能夠用你局域網 IP 建立一個本地服務器，生成一個相似 http://10.189.249.135:3002的 URL，這樣全部與你電腦處在一個局域網的設備，均可以訪問到你本地的頁面。

建議使用無線路由器搭建一個無線局域網，全部設備都連入這個無線局域網。Win 系統電腦用軟件開啓 Wifi 共享也是能夠的，Mac 就比較悲劇了，只有在插網線的時候，能夠開啓 Wifi 共享功能。

BrowserSync 還會監聽文件變更，當監聽的文件發生變更，會自動刷新全部鏈接本地服務器的頁面。BrowserSync 最主要的功能是同步，同步一切操做，當你在某個瀏覽器中觸發的操做，會在全部測試瀏覽器中同步操做，例如在電腦上滾動頁面，全部手機都會滾動頁面；電腦上更換了 URL 測試另外一個頁面，全部手機都跳轉到另外一個頁面。

應用 BrowserSync 工具以後的新版測試流程就變成這樣了：

用 BrowserSync 開啓本地服務器，全部測試設備鏈接到局域網中，依次打開 http://10.189.249.135:3002/（BrowserSync 建立的本地服務器地址）。在一臺設備操做，觀察其餘設備的狀況，修改了 CSS、HTML 或者 JS 代碼，保存一下，自動在全部設備自動刷新。

BrowserSync 的使用很是簡單，在要建立服務器的目錄下面執行：browser-sync start --server --files="*" 命令便可，表示建立一個服務器並監聽該目錄下的文件變更。它也有提供 Grunt 和 Gulp 插件，更多的用法移步BrowserSync 官方文檔，這裏再也不贅述。

BrowserSync 的原理大致是這樣的，它會在 HTML 頁面裏面插入 JS，而後監聽頁面操做。因此當你滾動頁面或者跳轉新頁面，BrowserSync 能夠捕獲到這個操做，經過 Socket.io 向全部 Client 的 JS 發出操做指示，其餘設備也會隨之 scroll 或者 location.href 跳轉等，實在太巧妙。

此外，兩個 BrowserSync 的小提示：

• BrowserSync 默認請求 index.html，若是你的目錄裏面沒有這個文件夾，會返回 Cannot GET /，這時候你須要指定具體的目錄、文件。
• 在開啓 BrowserSync 的命令中，--files="*" 表示要監聽變更的文件。若是你指定了 --files="css/*.css" 就表示只監聽 css/ 下的全部 css 文件變更。若是遇到修改代碼沒有自動刷新的問題，多是你監聽的路徑和文件有問題。對於 CSS 的修改，它會採用無刷新注入的方式，JS 和 HTML 的修改，它會採用刷新的方式。

Charles 代理應用

Charles 是 Mac 系統下面的抓包、代理工具。若是你電腦是 Win 系統，可使用 Fiddler 實現本節要介紹的技巧。

使用場景舉例：當咱們在本地開發時使用內網登錄功能（須要同域），每每須要綁定 Host，好比將本機 127.0.0.1綁定爲 xx.xx.com。這樣咱們訪問本地服務器時使用 xx.xx.com，才能夠正常使用 登錄 等等服務（須要用到 Cookie）。

那咱們用移動端設備測試這個頁面的時候，也須要修改移動端設備上的 Host。所以 Android 須要 root，iPhone 須要越獄，並且每次都要開啓，極爲不方便。這時候，咱們就可使用 Charles 這裏抓包工具作一個代理。

當打開 Charles 時，它會自動在本機開啓一個代理服務，默認接口爲 8888。這時候，咱們設置同局域網內的移動設備的代理爲本機局域網 IP，便可經過 Charles 轉發請求，在移動設備上訪問電腦能夠訪問的內容。基本原理以下圖：

經過這個代理服務，移動設備的請求被轉移到到電腦上發送出去，並將電腦獲得的響應返回給移動設備。其餘同類問題（想用手機訪問只有電腦才能訪問的內容）都可用這種方式解決。此外，由於通過 Charles 代理，所以可使用 Charles 的查看有關請求和響應、作本地資源映射等等功能，來簡化開發和調試 BUG。

啓用方法詳情請見：iOS開發工具——網絡封包分析工具Charles 中的 截取iPhone上的網絡封包 一節，這裏再也不贅述。

提供一個 Charles 的小技巧：Charles 只提供了全局監聽和 Firefox 監聽，但我經常使用的是 Chrome 瀏覽器，我只想監聽 Chrome 瀏覽器中某個頁面的請求信息，也能夠經過設置代理來解決。這裏使用 SwitchySharp 代理插件（GAE FQ必備），增長一個新的情景模式，綁定本地 Charles 代理。

這樣當咱們想抓包某個頁面時，只須要打開 Charles 並勾掉 Proxy-》Mac OS X Proxy 和Mozilla Firefox Proxy，以後再在 SwitchySharp 中勾選這個情景模式，便可清爽的只監聽 Chrome 瀏覽器發送的請求了。

關於 Charles 的使用，能夠自行搜索教程，Fiddler 一樣原理，再也不贅述。

回顧總結與擴展閱讀

移動端前端重構項目開發流程最佳實踐

新建項目相關文件，而後應用 BrowserSync 等工具（能夠配合 Grunt 等）啓動本地服務器。在 Chrome 中啓用 Emulation 來模擬 iPhone 等設備的尺寸，進行編碼開發。這樣就能夠無刷新、比較直觀的看到手機上的效果。

開發基本完成，將測試機、虛擬機等打開聯入局域網，輸入本地服務器地址，開始測試。對文件的修改實時刷新在全部設備中，即時看到效果。

對於有點複雜的 BUG 或者問題，使用 Safari 或者 Chrome 鏈接虛擬機或者真機進行調試。

不一樣測試場景下須要用到的技術和工具

• 響應式測試：Chrome DevTools 面板右側拉伸快速查看效果；Firefox 響應式工具進一步調整；Chrome Emulation 精細測試。
• Android 設備測試：使用 Android 虛擬機；高版本 Android 測試機，使用 Chrome 鏈接調試。Android 4.4+ 的 WebView 修改 APP 源代碼，也能夠用 Chrome 調試。
• 低版本系統和其餘品牌手機以及 WebView：通通能夠用 Weinre 來解決。
• iOS 設備測試：使用 Xcode 自帶 iOS 模擬器，使用 Safari 調試；WebView 也能夠被電腦上 Safari 調試；測試機鏈接電腦，也能夠用 Safari 調試；MIHTool 能夠在 iOS 設備上使用，提供相似 Weinre 的調試功能。
• 測試多種設備：BrowserStack 和 Keynote。
• 使用 BrowserSync 能夠建立本地局域網 IP 服務器，並同步操做、監聽刷新，極大減小測試操做，提升測試效率。
• 當移動端設備沒法訪問某項資源時，使用 Charles 作代理，經過電腦去訪問。

擴展閱讀與資料參考

• Remote Debugging on Android with Chrome（翻譯版本）
• Device Mode & Mobile Emulation（翻譯版本）
• About Safari Web Inspector
• A Concise Guide to Remote Debugging on iOS, Android, and Windows Phone
• 各類 真機遠程調試 方法 彙總
• 瀏覽器遠程調試
• weinre - Running
• BrowserSync
• Charles