由于之前做過大量有響應式需求的項目，今年也配合Denis的微信機器人做了一些用于微信的手機端項目，在實習的時候，也有參與過一個針對手機端的游戲的部分開發(fā)，所以算是積累了一點手機端調(diào)試的經(jīng)驗，在這里分享一下。
通過手機端使用Web服務的比率越來越大，掌握手機端的前端開發(fā)和測試是非常有必要的，但本文只介紹與調(diào)試有關的內(nèi)容，至于其他手機端開發(fā)知識太多太大，我們在此就不一一的介紹了。
一、響應式測試
響應式現(xiàn)在基本是中小型項目的標配了，先來談談響應式測試技巧。
1、基礎的響應式測試
響應式的測試特別簡單，通過改變視窗大小（也就是縮放你的瀏覽器）即可測試。當然，你的CSS中Media Queries判斷條件設置時要使用max-width才行，如果使用max-device-width則會根據(jù)你設備的屏幕尺寸來判斷。
對于Chrome瀏覽器，你可以將Chrome DevTools放在右邊，這種布局方式尤其適合用在外接的大屏幕上，然后通過拖動DevTools快速測試響應式的顯示效果。
優(yōu)點就是對于Chrome開發(fā)者可以快速查看響應式變化效果。
缺點就是分辨率尺寸不會很準確 ，因為它的頁面寬度是添加了滾動條之后的寬度，這樣對Media Queries的臨界值效果不好測試。
對于Firefox瀏覽器，不愧是早期開發(fā)的必備神器，它早就內(nèi)置了響應式測試工具，可以通過 Firefox 工具 -》Web 開發(fā)者 -》自適應設計視圖啟用：
可以設置分辨率等參數(shù)，以及模擬touch事件、屏幕截圖等功能，可以隨意拖動。足夠簡單和流暢，很方便測試響應式的變化效果等，對于基礎的響應式測試以及臨界值變化情況測試，強烈推薦Firefox瀏覽器。
由于響應式測試太簡單，于是有了一大堆的書簽欄JS工具或者Chrome擴展，并且以很多交互 、復雜的功能來吸引用戶，實際上使用起來，你可能需要依靠網(wǎng)絡才能使用，還會遇到切換縮放不夠流暢、刷新不方便等等問題，在這里不推薦（具體可查看鄭州seo公司老秦博客《響應式網(wǎng)站頁面的設計需求和設計流程》的相關介紹）。
2、Chrome模擬設備尺寸
如果你需要測試某種明確的機型，Chrome新版的Emulation就可以派上用場了，Emulation現(xiàn)在變成了一個手機圖標，之前的Emulation面板被放在了DevTools的分裂視圖中了，如果你懷念以前的Emulation面板或者需要模擬地理位置、加速計等功能，在DevTools界面摁下ESC即可打開分裂視圖。
打開DevTools之后，點擊這個“手機圖標”即可進入Chrome手機模擬器：
在Device你可以選擇預置的設備，快速切換分辨率和屏幕有關參數(shù)。此外還可以設置分辨率比率，來模擬Retina或者更專業(yè) 屏幕下的效果，這樣可以測試你的響應式圖片是否被正確替換等，它甚至提供了網(wǎng)絡測試，來測試低網(wǎng)速情況下你的頁面加載情況。
慢網(wǎng)速的測試，往往需要用抓包工具（Charles等）來模擬，現(xiàn)在用Chrome也可以模擬了。
除此之外，Chrome的手機模擬器還提供了非常非常多的實用功能，比如模擬touch事件、捏等手勢操作、地理位置、加速計、Retina等等。
這里的方法僅能作為基礎的響應式測試，對于中小型、比較簡單的項目，完全足夠用了，對于稍微復雜的頁面，還是需要用虛擬機或者真機測試，這樣更加可靠（具體可查看鄭州seo公司老秦博客《詳解手機端設備頁面尺寸設計原理》的相關介紹）。
二、基于Android的手機端前端開發(fā)調(diào)試
Android系統(tǒng)是份額更大 的手機端設備操作系統(tǒng)：一方面，Android是Google開發(fā)的，瀏覽器等也是基于Blink內(nèi)核（早期版本基于Webkit），都是Google開發(fā)的，所以技術上應該是沒有問題的；另一方面，Google無償開源Android系統(tǒng)，結果導致很多小廠商自己亂改Android系統(tǒng)，各種版本遍地生花，各種BUG層出不窮。
1、Android虛擬機測試
在電腦上安裝Android虛擬機，就可以用虛擬機打開進行測試，一般推薦兩個：
（1）、Genymotion
Genymotion是一個很棒的Android虛擬機，但是1次 安裝配置需要麻煩一些，由于基于VirtualBox內(nèi)核，所以要先安裝VirtualBox，然后需要注冊賬號Genymotion，可以免費使用，但是有功能限制，如果遇到重要的項目，臨時買一兩個月專業(yè) 賬號也是OK的。
安裝完成，登陸之后，選擇Android版本和手機型號，即可下載對應的虛擬機包，下載好的虛擬機會顯示在列表中，你可以選擇開啟。
安裝好的虛擬機與你Host本機處于一個局域網(wǎng)，這樣你就可以用BrowserSync之類的，開啟一個局域網(wǎng)IP本地服務器，在手機設備上同步測試了。
比較蛋疼的是，Genymotion虛擬機里面安裝APP好像比較麻煩，安裝Chrome不太方便，這樣不方便連接桌面版Chrome進行調(diào)試，只能使用Weinre調(diào)試，如果你有Genymotion使用這方面的經(jīng)驗歡迎分享。
（2）、Parallels
Parallels是基于Mac平臺的虛擬機，使用它創(chuàng)建虛擬機的時候，可以直接下載Android系統(tǒng)并安裝， 傻瓜的操作，但是 好用。
沒錯，它還可以裝Chrome OS，只需要點擊一下等待下載即可。
其他虛擬機軟件應該也可以實現(xiàn)，不如這兩種好用，如果這兩種你無法使用，可以自行搜索選擇其他方法嘗試。Win系統(tǒng)可以直接安裝Android SDK也可以通過虛擬機方式，這里不再贅述。
安裝完虛擬機，就可以用里面的瀏覽器打開網(wǎng)頁進行測試了，虛擬機與本機處于一個局域網(wǎng)，可以用局域網(wǎng)IP來調(diào)試本地頁面。
虛擬機不是真機，但是要比直接用瀏覽器測試強一些，在桌面操作比較方便，還可以安裝多個版本測試。
2、Android真機調(diào)試
桌面端的前端開發(fā)調(diào)試非常簡單，因為有Firebug、Chrome DevTools等工具，直接右擊打開就可以看到元素的CSS，并且可以查看各種資源、修改運行調(diào)錯JS等，而手機端瀏覽器顯然沒法帶有這些功能，于是可以用數(shù)據(jù)線連接設備，然后用電腦上的Chrome DevTools來調(diào)試手機設備上的頁面。
壹 先，你的Chrome版本需要 高于32，其次你的測試機Android系統(tǒng)高于4.0，測試機安裝Chrome for Android才可以使用Chrome遠程調(diào)試這項功能。
先用數(shù)據(jù)線將Android測試機連接到電腦上，需要打開測試機上面“開發(fā)者選項”中的“USB調(diào)試”功能，在Android 4.2 系統(tǒng)上“開發(fā)者選項”默認是隱藏的，所以你需要先開啟“開發(fā)者選項”（開啟方法：設置 -》 關于本機 -》 猛擊版本號（Build number）多次即可開啟開發(fā)者選項），之后如果沒有開啟，或者沒有反應，可能是你的版本問題或者點擊錯了，你可以嘗試把“關于本機”上擁有 的選項都猛擊幾次，就會開啟。
然后在桌面版Chrome打開chrome://inspect即可查找你的設備，在設備上的Chrome打開網(wǎng)頁，即可看到，然后就可以在桌面版Chrome DevTools調(diào)試手機設備上的頁面了。
此外，還可以直接在桌面版Chrome輸入URL在手機設備上打開，在本地用Nodejs或者其他功能開啟一個本地服務器，用端口轉(zhuǎn)接讓手機設備直接訪問本機localhost上的頁面，再配合LiveReload、BrowserSync之類的工具，自動刷新，測試簡直爽歪歪。
三、Android WebView前端開發(fā)調(diào)試
現(xiàn)在越來越多的手機端APP是WebView，因為開發(fā)方便，更新快捷，那么就會有調(diào)試WebView的需求，因為他們本身就是網(wǎng)頁。
1、基于Chrome的調(diào)試
在Android 4.4（KitKat）或者更新版，你可以使用DevTools來調(diào)試原生安卓應用中的WebVies內(nèi)容。
不過需要在你開發(fā)的應用中，添加有關代碼才可以啟用WebView的調(diào)試，這里比較有局限性，有興趣的朋友可以試下，這里不再贅述。
2、使用Weinre調(diào)試
Weinre是一個相當簡單好用的調(diào)試工具，它會在你本地創(chuàng)建一個監(jiān)聽服務器，并提供一個JavaScript，你只需要在需要測試的頁面中加載這段JS，就可以被Weinre監(jiān)聽到，在Inspect面板中調(diào)試你這個頁面。
目前Weinre也發(fā)布到NPM上了，Mac下具體使用方法如下（Win的同學請參加：遠程調(diào)試工具-weinre）：
壹 先安裝Weinre：
npm install -g weinre
安裝完成之后，要在本地開啟一個監(jiān)聽服務器，需要獲取本機的局域網(wǎng)地址：
Mac在終端執(zhí)行ipconfig getifaddr en0命令。
Win在命令行執(zhí)行ipconfig命令。
這時候拿到一個IP，就本例而言，我的IP為10.189.249.254，這時候執(zhí)行：
weinre --boundHost 10.189.249.254
開啟本地監(jiān)聽服務器。
這里有一個網(wǎng)址，就是Weinre的一些說明，我們可以打開看下：
這里更 重要的是箭頭所指的這個JS，我們需要把這個JS放到我們要調(diào)試的頁面中，這樣訪問頁面的時候，加載這個JS，就會被Weinre監(jiān)聽到進行控制。
小提示：這個JS后面的#anonymous起到一個標識作用，為了區(qū)別，我們可以將其修改成#test放到頁面中，這時候，我們的Inspect面板的地址就不是http://10.189.249.254:8080/client/#anonymous了，而是http://10.189.249.254:8080/client/#test。
當我們訪問頁面的時候，就會出現(xiàn)在監(jiān)聽列表中，如果有多個網(wǎng)頁，你可以從列表中選擇一個，然后就可以使用后面的Elements、Console 等面板來進行調(diào)試操作了：
Weinre非常靈活，只需要在頁面中加載這個JS，然后訪問即可，因此WebView可以用這種方法調(diào)試，一些低版本的Android、iOS也可以支持，Window Phone也是可以用的，在調(diào)試手機設備時你可能需要在本地搭建一個局域網(wǎng)IP的服務器，將設備與本機網(wǎng)絡連接成一個局域網(wǎng)，用手機設備訪問這個網(wǎng)頁即可。
當然Weinre也不是 的，相比Chrome的調(diào)試工具，它缺少JavaScript debug以及Profiles等常用功能，但是它兼容性強，可以實現(xiàn)基礎調(diào)試功能。
四、基于iOS的手機端前端開發(fā)調(diào)試
iPhone等一系列蘋果設備對前端還是相當友好的，性能夠好，Safari瀏覽器也是不錯，型號固定統(tǒng)一，問題也比較好解決，此外蘋果公司也提供了一系列開發(fā)者工具。
如上圖所示，Safari默認是隱藏開發(fā)選項的，在 次使用的時候，需要在Safari中選擇“偏好設置”-》“專業(yè) ”-》“在菜單欄中顯示開發(fā)選項”。
1、使用iOS Simulator調(diào)試開發(fā)
iOS Simulator是Xcode開發(fā)工具內(nèi)置的iOS模擬器，因此該功能僅能在Mac系統(tǒng)下使用，按照如下方式即可打開：
打開之后，你可以用模擬器里面的Safari打開需要調(diào)試的網(wǎng)頁，它可以直接打開本地localhost的頁面，無須任何設置，你可以選擇上面菜單中的“硬件”來模擬其他iOS設備，包括iPad等，如果你升級了你的OS X系統(tǒng)和Xcode 6，你還可以模擬iPhone 6和iPhone 6 Plus。
如果需要調(diào)試，打開桌面版的Safari，在“開發(fā)”中選擇要調(diào)試的頁面，即可打開Safari調(diào)試面板：
這樣就可以進行調(diào)試了，這里鄭州seo公司老秦給大家提供一個技巧：將URL粘貼到模擬器的地址欄時，用CMD V是無法粘貼進去的，如果想要粘貼，先摁下CMD V然后再用鼠標點擊一下地址欄，稍等會出現(xiàn)Paste按鈕，再用鼠標點擊一下這個按鈕即可粘貼進去。
2、iOS設備真機調(diào)試
模擬器已經(jīng)足夠強大方便了，但有些手勢操作測試以及更 真實的用戶體驗測試還是需要真機，Safari調(diào)試真機上的網(wǎng)頁也是非常簡單的。
壹 先需要在iPhone等設備上設置一下Safari瀏覽器，開啟調(diào)試功能，具體步驟：“設置”-》“Safari”-》“專業(yè) ”-》“Web 檢查器”。使用數(shù)據(jù)線連接電腦，在設備上用Safari瀏覽器打開需要調(diào)試的頁面，之后在桌面版的Safari開發(fā)選項中即可看到進行調(diào)試，跟用iOS Simulator一樣，只不過現(xiàn)在換成了真機。
但是調(diào)試本地網(wǎng)站，你可能要將手機與電腦連在一個局域網(wǎng)內(nèi)，然后開啟一個局域網(wǎng)IP的服務器進行調(diào)試，稍微麻煩。
此外Safari還可以調(diào)試在iOS上面的WebView，比如用調(diào)試PhoneGap打包的APP等，方法類似，這里還有個測試用APP，會iOS開發(fā)的朋友可以看下。
3、使用MIHTool進行遠程調(diào)試
MIHTool是國人開發(fā)的，基于Weinre，用于iOS設備的前端開發(fā)測試。
上面有提到Weinre大體的工作方式，即開啟一個服務器，然后將JS插入到頁面中，訪問進行調(diào)試。MIHTool將這個過程簡化了，它是一個 APP，可以直接安裝到你的iOS設備里面，然后內(nèi)置一個簡單的瀏覽器可以打開你的測試頁面，當它開啟時，會自動向頁面中插入Weinre的 JS，并告知Weinre控制臺URL等信息，讓你可以訪問進行調(diào)試。
除此之外，它還提供了很多方便調(diào)試的功能，有興趣的朋友可以看下官方網(wǎng)站的介紹和Debugging web content on iOS，感覺就是丑了一些，如果能請設計師或者交互設計一下，會好得多。
4、手機設備在線測試
手機端設備如此之多，小公司或者團隊，沒有這么多資金和精力購買如此多的測試設備進行測試，于是就有人買了這些設備，連接起來，提供在線調(diào)試服務。
例如用不同的設備訪問你的網(wǎng)站，并截圖：
甚至可以讓你遠程控制一臺機器，進行測試操作：
BrowserStack就提供這種服務，它可以實時在線調(diào)試，也可以截屏、測試響應式等等。
此外，Keynote也提供這種服務，當然這里的Keynote不是Mac上的幻燈片APP，它提供更加真實的Mobile測試，我簡單的試了一下，果然比較卡，應該是真機測試：
五、其他手機端調(diào)試方法和技巧
接下來，再跟大家介紹幾種其他手機端調(diào)試方法和技巧：
1、BrowserSync同步操作
BrowserSync是多終端測試工具，在沒有使用這個BrowserSync之前的原始的測試流程一般是這樣的：先把本地的網(wǎng)頁上傳到遠程服務器（因為好多設備都要去訪問一個固定的地址），然后將網(wǎng)址輸入到各個測試機的測試瀏覽器里面手動打開(或者使用瀏覽器插件等，生成二維碼掃一下），然后手機開始下載頁面，需要等待下載，觀看效果進行測試，每個測試機都要操作一遍，測試其他網(wǎng)頁的時候，每個測試機重新輸入網(wǎng)址、刷新；如果代碼有修改，需要重新上傳服務器進行刷新。
而BrowserSync這個工具，可以用你局域網(wǎng)IP創(chuàng)建一個本地服務器，生成一個類似http://10.189.249.135:3002的URL，這樣擁有 與你電腦處在一個局域網(wǎng)的設備，都可以訪問到你本地的頁面。
建議使用無線路由器搭建一個無線局域網(wǎng)，擁有 設備都連入這個無線局域網(wǎng)，Win系統(tǒng)電腦用軟件開啟Wifi共享也是可以的，Mac就比較悲劇了，只有在插網(wǎng)線的時候，可以開啟Wifi共享功能。
BrowserSync還會監(jiān)聽文件變動，當監(jiān)聽的文件發(fā)生變動，會自動刷新?lián)碛?連接本地服務器的頁面，BrowserSync更 主要的功能是同步，同步一切操作，當你在某個瀏覽器中觸發(fā)的操作，會在擁有 測試瀏覽器中同步操作，例如在電腦上滾動頁面，擁有 手機都會滾動頁面；電腦上更換了URL測試另一個頁面，擁有 手機都跳轉(zhuǎn)到另一個頁面。
應用BrowserSync工具之后的新版測試流程就變成這樣了：用BrowserSync 開啟本地服務器，擁有 測試設備連接到局域網(wǎng)中，依次打開 http://10.189.249.135:3002/（BrowserSync創(chuàng)建的本地服務器地址），在一臺設備操作，觀察其他設備的情況，修改了CSS、HTML或者JS代碼，保存一下，自動在擁有 設備自動刷新。
BrowserSync的使用非常簡單，在要創(chuàng)建服務器的目錄下面執(zhí)行：browser-sync start --server --files="*"命令即可，表示創(chuàng)建一個服務器并監(jiān)聽該目錄下的文件變動，它也有提供Grunt和Gulp插件，更多的用法移步BrowserSync官方文檔，這里不再贅述。
BrowserSync的原理大體是這樣的，它會在HTML頁面里面插入JS，然后監(jiān)聽頁面操作，所以當你滾動頁面或者跳轉(zhuǎn)新頁面，BrowserSync可以捕獲到這個操作，通過Socket.io向擁有 Client的JS發(fā)出操作指示，其他設備也會隨之scroll或者location.href跳轉(zhuǎn)等，實在太巧妙。
此外，兩個BrowserSync的小提示：BrowserSync默認請求index.html，如果你的目錄里面沒有這個文件夾，會返回Cannot GET /，這時候你需要定向 具體的目錄、文件。
在開啟BrowserSync的命令中，--files="*"表示要監(jiān)聽變動的文件，如果你定向 了--files="css/*.css"就表示只監(jiān)聽css/下的擁有 css文件變動，如果遇到修改代碼沒有自動刷新的問題，可能是你監(jiān)聽的路徑和文件有問題，對于CSS的修改，它會采用無刷新注入的方式，JS和HTML的修改，它會采用刷新的方式。
2、Charles代理應用
Charles是Mac系統(tǒng)下面的抓包、代理工具。如果你電腦是Win系統(tǒng)，可以使用Fiddler實現(xiàn)本節(jié)要介紹的技巧。
使用場景舉例：當我們在本地開發(fā)時使用內(nèi)網(wǎng)登陸功能（需要同域），往往需要綁定Host，比如將本機127.0.0.1綁定為www.mahaixiang.cn。這樣我們訪問本地服務器時使用www.mahaixiang.cn，才可以正常使用“登陸”等等服務（需要用到Cookie）。
那我們用手機端設備測試這個頁面的時候，也需要修改手機端設備上的Host，因此Android需要root，iPhone需要越獄，而且每次都要開啟，極為不方便，這時候，我們就可以使用Charles這里抓包工具做一個代理。
當打開Charles時，它會自動在本機開啟一個代理服務，默認接口為8888，這時候，我們設置同局域網(wǎng)內(nèi)的手機設備的代理為本機局域網(wǎng) IP，即可通過Charles轉(zhuǎn)發(fā)請求，在手機設備上訪問電腦可以訪問的內(nèi)容，基本原理如下圖：
通過這個代理服務，手機設備的請求被轉(zhuǎn)移到到電腦上發(fā)送出去，并將電腦得到的響應返回給手機設備，其他同類問題（想用手機訪問只有電腦才能訪問的內(nèi)容）均可用這種方式解決，此外，因為經(jīng)過Charles代理，因此可以使用Charles的查看有關請求和響應、做本地資源映射等等功能，來簡化開發(fā)和調(diào)試BUG。
提供一個Charles的小技巧：Charles只提供了全局監(jiān)聽和Firefox監(jiān)聽，但我常用的是Chrome瀏覽器，我只想監(jiān)聽Chrome瀏覽器中某個頁面的請求信息，也可以通過設置代理來解決，這里使用SwitchySharp代理插件（GAE 翻墻必備），增加一個新的情景模式，綁定本地Charles代理。
這樣當我們想抓包某個頁面時，只需要打開Charles并勾掉 Proxy-》Mac OS X Proxy和Mozilla Firefox Proxy，之后再在SwitchySharp中勾選這個情景模式，即可清爽的只監(jiān)聽Chrome瀏覽器發(fā)送的請求了。
關于Charles的使用，可以自行搜索教程，F(xiàn)iddler同樣原理，不再贅述。
六、回顧總結
由于篇幅較長，更 后我們在一起來回顧總結一些要點：
1、手機端前端重構項目開發(fā)流程更佳 實踐
新建項目相關文件，然后應用BrowserSync等工具（可以配合 Grunt等）啟動本地服務器，在Chrome中啟用Emulation來模擬iPhone等設備的尺寸，進行編碼開發(fā)，這樣就可以無刷新、比較直觀的看到手機上的效果。
開發(fā)基本完成，將測試機、虛擬機等打開聯(lián)入局域網(wǎng)，輸入本地服務器地址，開始測試，對文件的修改實時刷新在擁有 設備中，即時看到效果。
對于有點復雜的BUG或者問題，使用Safari或者Chrome連接虛擬機或者真機進行調(diào)試。
2、不同測試場景下需要用到的技術和工具
響應式測試：Chrome DevTools面板右側(cè)拉伸快速查看效果；Firefox響應式工具進一步調(diào)整；Chrome Emulation精細測試。
Android設備測試：使用Android虛擬機；高版本Android測試機，使用Chrome連接調(diào)試，Android 4.4 的WebView修改APP源代碼，也可以用Chrome調(diào)試。
低版本系統(tǒng)和其他 手機以及WebView：統(tǒng)統(tǒng)可以用Weinre來解決。
iOS設備測試：使用Xcode自帶iOS模擬器，使用Safari調(diào)試；WebView也可以被電腦上Safari調(diào)試；測試機連接電腦，也可以用Safari調(diào)試；MIHTool可以在iOS設備上使用，提供類似Weinre的調(diào)試功能（具體可查看鄭州seo公司老秦博客《APP在IOS與Android系統(tǒng)界面設計規(guī)范》的相關介紹）。
測試多種設備：BrowserStack和Keynote。
使用BrowserSync可以創(chuàng)建本地局域網(wǎng)IP服務器，并同步操作、監(jiān)聽刷新，極大減少測試操作，提高測試效率。
當手機端設備無法訪問某項資源時，使用Charles做代理，通過電腦去訪問。
鄭州seo公司老秦博客點評：
手機互聯(lián)網(wǎng)時代，瀏覽器發(fā)展的趨勢、瀏覽器調(diào)試工具發(fā)展的未來一定是基于手機端調(diào)試的便利性、遠程調(diào)試的廣泛支持，我可以大膽預測支持多終端跨設備跨瀏覽器的遠程調(diào)試工具將會越來越多。
版權聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
