移動端設(shè)備前端開發(fā)調(diào)試的方法技巧

時間：2022-05-28 10:15:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-28 10:15:01 來源：網(wǎng)絡(luò)營銷

由于之前做過大量有響應(yīng)式需求的項目，今年也配合Denis的微信機(jī)器人做了一些用于微信的移動端項目，在實習(xí)的時候，也有參與過一個針對移動端的游戲的部分開發(fā)，所以算是積累了一點移動端調(diào)試的經(jīng)驗，在這里分享一下。

通過移動端使用Web服務(wù)的比率越來越大，掌握移動端的前端開發(fā)和測試是非常有必要的，但本文只介紹與調(diào)試有關(guān)的內(nèi)容，至于其他移動端開發(fā)知識太多太大，我們在此就不一一的介紹了。

一、響應(yīng)式測試

響應(yīng)式現(xiàn)在基本是中小型項目的標(biāo)配了，先來談?wù)勴憫?yīng)式測試技巧。

1、基礎(chǔ)的響應(yīng)式測試

響應(yīng)式的測試特別簡單，通過改變視窗大?。ㄒ簿褪强s放你的瀏覽器）即可測試。當(dāng)然，你的CSS中Media Queries判斷條件設(shè)置時要使用max-width才行，如果使用max-device-width則會根據(jù)你設(shè)備的屏幕尺寸來判斷。

對于Chrome瀏覽器，你可以將Chrome DevTools放在右邊，這種布局方式尤其適合用在外接的大屏幕上，然后通過拖動DevTools快速測試響應(yīng)式的顯示效果。

優(yōu)點就是對于Chrome開發(fā)者可以快速查看響應(yīng)式變化效果。

缺點就是分辨率尺寸不會很精確，因為它的頁面寬度是添加了滾動條之后的寬度，這樣對Media Queries的臨界值效果不好測試。

對于Firefox瀏覽器，不愧是早期開發(fā)的必備神器，它早就內(nèi)置了響應(yīng)式測試工具，可以通過 Firefox 工具 -》Web 開發(fā)者 -》自適應(yīng)設(shè)計視圖啟用：

可以設(shè)置分辨率等參數(shù)，以及模擬touch事件、屏幕截圖等功能，可以隨意拖動。足夠簡單和流暢，很方便測試響應(yīng)式的變化效果等，對于基礎(chǔ)的響應(yīng)式測試以及臨界值變化情況測試，強(qiáng)烈推薦Firefox瀏覽器。

由于響應(yīng)式測試太簡單，于是有了一大堆的書簽欄JS工具或者Chrome擴(kuò)展，并且以很多交互特效、復(fù)雜的功能來吸引用戶，實際上使用起來，你可能需要依靠網(wǎng)絡(luò)才能使用，還會遇到切換縮放不夠流暢、刷新不方便等等問題，在這里不推薦（具體可查看億企邦《響應(yīng)式網(wǎng)站頁面的設(shè)計需求和設(shè)計流程》的相關(guān)介紹）。

2、Chrome模擬設(shè)備尺寸

如果你需要測試某種明確的機(jī)型，Chrome新版的Emulation就可以派上用場了，Emulation現(xiàn)在變成了一個手機(jī)圖標(biāo)，之前的Emulation面板被放在了DevTools的分裂視圖中了，如果你懷念以前的Emulation面板或者需要模擬地理位置、加速計等功能，在DevTools界面摁下ESC即可打開分裂視圖。

打開DevTools之后，點擊這個“手機(jī)圖標(biāo)”即可進(jìn)入Chrome手機(jī)模擬器：

在Device你可以選擇預(yù)置的設(shè)備，快速切換分辨率和屏幕有關(guān)參數(shù)。此外還可以設(shè)置分辨率比率，來模擬Retina或者更高級屏幕下的效果，這樣可以測試你的響應(yīng)式圖片是否被正確替換等，它甚至提供了網(wǎng)絡(luò)測試，來測試低網(wǎng)速情況下你的頁面加載情況。

慢網(wǎng)速的測試，往往需要用抓包工具（Charles等）來模擬，現(xiàn)在用Chrome也可以模擬了。

除此之外，Chrome的手機(jī)模擬器還提供了非常非常多的實用功能，比如模擬touch事件、捏等手勢操作、地理位置、加速計、Retina等等。

這里的方法僅能作為基礎(chǔ)的響應(yīng)式測試，對于中小型、比較簡單的項目，完全足夠用了，對于稍微復(fù)雜的頁面，還是需要用虛擬機(jī)或者真機(jī)測試，這樣更加可靠（具體可查看億企邦《詳解移動端設(shè)備頁面尺寸設(shè)計原理》的相關(guān)介紹）。

二、基于Android的移動端前端開發(fā)調(diào)試

Android系統(tǒng)是份額最大的移動端設(shè)備操作系統(tǒng)：一方面，Android是Google開發(fā)的，瀏覽器等也是基于Blink內(nèi)核（早期版本基于Webkit），都是Google開發(fā)的，所以技術(shù)上應(yīng)該是沒有問題的；另一方面，Google無償開源Android系統(tǒng)，結(jié)果導(dǎo)致很多小廠商自己亂改Android系統(tǒng)，各種版本遍地生花，各種BUG層出不窮。

1、Android虛擬機(jī)測試

在電腦上安裝Android虛擬機(jī)，就可以用虛擬機(jī)打開進(jìn)行測試，一般推薦兩個：

（1）、Genymotion

Genymotion是一個很棒的Android虛擬機(jī)，但是首次安裝配置需要麻煩一些，由于基于VirtualBox內(nèi)核，所以要先安裝VirtualBox，然后需要注冊賬號Genymotion，可以免費使用，但是有功能限制，如果遇到重要的項目，臨時買一兩個月高端賬號也是OK的。

安裝完成，登陸之后，選擇Android版本和手機(jī)型號，即可下載對應(yīng)的虛擬機(jī)包，下載好的虛擬機(jī)會顯示在列表中，你可以選擇開啟。

安裝好的虛擬機(jī)與你Host本機(jī)處于一個局域網(wǎng)，這樣你就可以用BrowserSync之類的，開啟一個局域網(wǎng)IP本地服務(wù)器，在移動設(shè)備上同步測試了。

比較蛋疼的是，Genymotion虛擬機(jī)里面安裝APP好像比較麻煩，安裝Chrome不太方便，這樣不方便連接桌面版Chrome進(jìn)行調(diào)試，只能使用Weinre調(diào)試，如果你有Genymotion使用這方面的經(jīng)驗歡迎分享。

（2）、Parallels

Parallels是基于Mac平臺的虛擬機(jī)，使用它創(chuàng)建虛擬機(jī)的時候，可以直接下載Android系統(tǒng)并安裝，超級傻瓜的操作，但是超級好用。

沒錯，它還可以裝Chrome OS，只需要點擊一下等待下載即可。

其他虛擬機(jī)軟件應(yīng)該也可以實現(xiàn)，不如這兩種好用，如果這兩種你無法使用，可以自行搜索選擇其他方法嘗試。Win系統(tǒng)可以直接安裝Android SDK也可以通過虛擬機(jī)方式，這里不再贅述。

安裝完虛擬機(jī)，就可以用里面的瀏覽器打開網(wǎng)頁進(jìn)行測試了，虛擬機(jī)與本機(jī)處于一個局域網(wǎng)，可以用局域網(wǎng)IP來調(diào)試本地頁面。

虛擬機(jī)不是真機(jī)，但是要比直接用瀏覽器測試強(qiáng)一些，在桌面操作比較方便，還可以安裝多個版本測試。

2、Android真機(jī)調(diào)試

桌面端的前端開發(fā)調(diào)試非常簡單，因為有Firebug、Chrome DevTools等工具，直接右擊打開就可以看到元素的CSS，并且可以查看各種資源、修改運行調(diào)錯JS等，而移動端瀏覽器顯然沒法帶有這些功能，于是可以用數(shù)據(jù)線連接設(shè)備，然后用電腦上的Chrome DevTools來調(diào)試移動設(shè)備上的頁面。

首先，你的Chrome版本必須高于32，其次你的測試機(jī)Android系統(tǒng)高于4.0，測試機(jī)安裝Chrome for Android才可以使用Chrome遠(yuǎn)程調(diào)試這項功能。

先用數(shù)據(jù)線將Android測試機(jī)連接到電腦上，需要打開測試機(jī)上面“開發(fā)者選項”中的“USB調(diào)試”功能，在Android 4.2+ 系統(tǒng)上“開發(fā)者選項”默認(rèn)是隱藏的，所以你需要先開啟“開發(fā)者選項”（開啟方法：設(shè)置 -》 關(guān)于本機(jī) -》 猛擊版本號（Build number）多次即可開啟開發(fā)者選項），之后如果沒有開啟，或者沒有反應(yīng)，可能是你的版本問題或者點擊錯了，你可以嘗試把“關(guān)于本機(jī)”上所有的選項都猛擊幾次，就會開啟。

然后在桌面版Chrome打開chrome://inspect即可查找你的設(shè)備，在設(shè)備上的Chrome打開網(wǎng)頁，即可看到，然后就可以在桌面版Chrome DevTools調(diào)試移動設(shè)備上的頁面了。

此外，還可以直接在桌面版Chrome輸入URL在移動設(shè)備上打開，在本地用Nodejs或者其他功能開啟一個本地服務(wù)器，用端口轉(zhuǎn)接讓移動設(shè)備直接訪問本機(jī)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)試原生安卓應(yīng)用中的WebVies內(nèi)容。

不過需要在你開發(fā)的應(yīng)用中，添加有關(guān)代碼才可以啟用WebView的調(diào)試，這里比較有局限性，有興趣的朋友可以試下，這里不再贅述。

2、使用Weinre調(diào)試

Weinre是一個相當(dāng)簡單好用的調(diào)試工具，它會在你本地創(chuàng)建一個監(jiān)聽服務(wù)器，并提供一個JavaScript，你只需要在需要測試的頁面中加載這段JS，就可以被Weinre監(jiān)聽到，在Inspect面板中調(diào)試你這個頁面。

目前Weinre也發(fā)布到NPM上了，Mac下具體使用方法如下（Win的同學(xué)請參加：遠(yuǎn)程調(diào)試工具-weinre）：

首先安裝Weinre：

npm install -g weinre

安裝完成之后，要在本地開啟一個監(jiān)聽服務(wù)器，需要獲取本機(jī)的局域網(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ù)器。

這里有一個網(wǎng)址，就是Weinre的一些說明，我們可以打開看下：

這里最重要的是箭頭所指的這個JS，我們需要把這個JS放到我們要調(diào)試的頁面中，這樣訪問頁面的時候，加載這個JS，就會被Weinre監(jiān)聽到進(jìn)行控制。

小提示：這個JS后面的#anonymous起到一個標(biāo)識作用，為了區(qū)別，我們可以將其修改成#test放到頁面中，這時候，我們的Inspect面板的地址就不是http://10.189.249.254:8080/client/#anonymous了，而是http://10.189.249.254:8080/client/#test。

當(dāng)我們訪問頁面的時候，就會出現(xiàn)在監(jiān)聽列表中，如果有多個網(wǎng)頁，你可以從列表中選擇一個，然后就可以使用后面的Elements、Console 等面板來進(jìn)行調(diào)試操作了：

Weinre非常靈活，只需要在頁面中加載這個JS，然后訪問即可，因此WebView可以用這種方法調(diào)試，一些低版本的Android、iOS也可以支持，Window Phone也是可以用的，在調(diào)試移動設(shè)備時你可能需要在本地搭建一個局域網(wǎng)IP的服務(wù)器，將設(shè)備與本機(jī)網(wǎng)絡(luò)連接成一個局域網(wǎng)，用移動設(shè)備訪問這個網(wǎng)頁即可。

當(dāng)然Weinre也不是萬能的，相比Chrome的調(diào)試工具，它缺少JavaScript debug以及Profiles等常用功能，但是它兼容性強(qiáng)，可以實現(xiàn)基礎(chǔ)調(diào)試功能。

四、基于iOS的移動端前端開發(fā)調(diào)試

iPhone等一系列蘋果設(shè)備對前端還是相當(dāng)友好的，性能夠好，Safari瀏覽器也是不錯，型號固定統(tǒng)一，問題也比較好解決，此外蘋果公司也提供了一系列開發(fā)者工具。

如上圖所示，Safari默認(rèn)是隱藏開發(fā)選項的，在第一次使用的時候，需要在Safari中選擇“偏好設(shè)置”-》“高級”-》“在菜單欄中顯示開發(fā)選項”。

1、使用iOS Simulator調(diào)試開發(fā)

iOS Simulator是Xcode開發(fā)工具內(nèi)置的iOS模擬器，因此該功能僅能在Mac系統(tǒng)下使用，按照如下方式即可打開：

打開之后，你可以用模擬器里面的Safari打開需要調(diào)試的網(wǎng)頁，它可以直接打開本地localhost的頁面，無須任何設(shè)置，你可以選擇上面菜單中的“硬件”來模擬其他iOS設(shè)備，包括iPad等，如果你升級了你的OS X系統(tǒng)和Xcode 6，你還可以模擬iPhone 6和iPhone 6 Plus。

如果需要調(diào)試，打開桌面版的Safari，在“開發(fā)”中選擇要調(diào)試的頁面，即可打開Safari調(diào)試面板：

這樣就可以進(jìn)行調(diào)試了，這里億企邦給大家提供一個技巧：將URL粘貼到模擬器的地址欄時，用CMD + V是無法粘貼進(jìn)去的，如果想要粘貼，先摁下CMD + V然后再用鼠標(biāo)點擊一下地址欄，稍等會出現(xiàn)Paste按鈕，再用鼠標(biāo)點擊一下這個按鈕即可粘貼進(jìn)去。

2、iOS設(shè)備真機(jī)調(diào)試

模擬器已經(jīng)足夠強(qiáng)大方便了，但有些手勢操作測試以及最真實的用戶體驗測試還是需要真機(jī)，Safari調(diào)試真機(jī)上的網(wǎng)頁也是非常簡單的。

首先需要在iPhone等設(shè)備上設(shè)置一下Safari瀏覽器，開啟調(diào)試功能，具體步驟：“設(shè)置”-》“Safari”-》“高級”-》“Web 檢查器”。使用數(shù)據(jù)線連接電腦，在設(shè)備上用Safari瀏覽器打開需要調(diào)試的頁面，之后在桌面版的Safari開發(fā)選項中即可看到進(jìn)行調(diào)試，跟用iOS Simulator一樣，只不過現(xiàn)在換成了真機(jī)。

但是調(diào)試本地網(wǎng)站，你可能要將手機(jī)與電腦連在一個局域網(wǎng)內(nèi)，然后開啟一個局域網(wǎng)IP的服務(wù)器進(jìn)行調(diào)試，稍微麻煩。

此外Safari還可以調(diào)試在iOS上面的WebView，比如用調(diào)試PhoneGap打包的APP等，方法類似，這里還有個測試用APP，會iOS開發(fā)的朋友可以看下。

3、使用MIHTool進(jìn)行遠(yuǎn)程調(diào)試

MIHTool是國人開發(fā)的，基于Weinre，用于iOS設(shè)備的前端開發(fā)測試。

上面有提到Weinre大體的工作方式，即開啟一個服務(wù)器，然后將JS插入到頁面中，訪問進(jìn)行調(diào)試。MIHTool將這個過程簡化了，它是一個 APP，可以直接安裝到你的iOS設(shè)備里面，然后內(nèi)置一個簡單的瀏覽器可以打開你的測試頁面，當(dāng)它開啟時，會自動向頁面中插入Weinre的 JS，并告知Weinre控制臺URL等信息，讓你可以訪問進(jìn)行調(diào)試。

除此之外，它還提供了很多方便調(diào)試的功能，有興趣的朋友可以看下官方網(wǎng)站的介紹和Debugging web content on iOS，感覺就是丑了一些，如果能請設(shè)計師或者交互設(shè)計一下，會好得多。

4、移動設(shè)備在線測試

移動端設(shè)備如此之多，小公司或者團(tuán)隊，沒有這么多資金和精力購買如此多的測試設(shè)備進(jìn)行測試，于是就有人買了這些設(shè)備，連接起來，提供在線調(diào)試服務(wù)。

例如用不同的設(shè)備訪問你的網(wǎng)站，并截圖：

甚至可以讓你遠(yuǎn)程控制一臺機(jī)器，進(jìn)行測試操作：

BrowserStack就提供這種服務(wù)，它可以實時在線調(diào)試，也可以截屏、測試響應(yīng)式等等。

此外，Keynote也提供這種服務(wù)，當(dāng)然這里的Keynote不是Mac上的幻燈片APP，它提供更加真實的Mobile測試，我簡單的試了一下，果然比較卡，應(yīng)該是真機(jī)測試：

五、其他移動端調(diào)試方法和技巧

接下來，再跟大家介紹幾種其他移動端調(diào)試方法和技巧：

1、BrowserSync同步操作

BrowserSync是多終端測試工具，在沒有使用這個BrowserSync之前的原始的測試流程一般是這樣的：先把本地的網(wǎng)頁上傳到遠(yuǎn)程服務(wù)器（因為好多設(shè)備都要去訪問一個固定的地址），然后將網(wǎng)址輸入到各個測試機(jī)的測試瀏覽器里面手動打開(或者使用瀏覽器插件等，生成二維碼掃一下），然后手機(jī)開始下載頁面，需要等待下載，觀看效果進(jìn)行測試，每個測試機(jī)都要操作一遍，測試其他網(wǎng)頁的時候，每個測試機(jī)重新輸入網(wǎng)址、刷新；如果代碼有修改，需要重新上傳服務(wù)器進(jìn)行刷新。

而BrowserSync這個工具，可以用你局域網(wǎng)IP創(chuàng)建一個本地服務(wù)器，生成一個類似http://10.189.249.135:3002的URL，這樣所有與你電腦處在一個局域網(wǎng)的設(shè)備，都可以訪問到你本地的頁面。

建議使用無線路由器搭建一個無線局域網(wǎng)，所有設(shè)備都連入這個無線局域網(wǎng)，Win系統(tǒng)電腦用軟件開啟Wifi共享也是可以的，Mac就比較悲劇了，只有在插網(wǎng)線的時候，可以開啟Wifi共享功能。

BrowserSync還會監(jiān)聽文件變動，當(dāng)監(jiān)聽的文件發(fā)生變動，會自動刷新所有連接本地服務(wù)器的頁面，BrowserSync最主要的功能是同步，同步一切操作，當(dāng)你在某個瀏覽器中觸發(fā)的操作，會在所有測試瀏覽器中同步操作，例如在電腦上滾動頁面，所有手機(jī)都會滾動頁面；電腦上更換了URL測試另一個頁面，所有手機(jī)都跳轉(zhuǎn)到另一個頁面。

應(yīng)用BrowserSync工具之后的新版測試流程就變成這樣了：用BrowserSync 開啟本地服務(wù)器，所有測試設(shè)備連接到局域網(wǎng)中，依次打開 http://10.189.249.135:3002/（BrowserSync創(chuàng)建的本地服務(wù)器地址），在一臺設(shè)備操作，觀察其他設(shè)備的情況，修改了CSS、HTML或者JS代碼，保存一下，自動在所有設(shè)備自動刷新。

BrowserSync的使用非常簡單，在要創(chuàng)建服務(wù)器的目錄下面執(zhí)行：browser-sync start --server --files="*"命令即可，表示創(chuàng)建一個服務(wù)器并監(jiān)聽該目錄下的文件變動，它也有提供Grunt和Gulp插件，更多的用法移步BrowserSync官方文檔，這里不再贅述。

BrowserSync的原理大體是這樣的，它會在HTML頁面里面插入JS，然后監(jiān)聽頁面操作，所以當(dāng)你滾動頁面或者跳轉(zhuǎn)新頁面，BrowserSync可以捕獲到這個操作，通過Socket.io向所有Client的JS發(fā)出操作指示，其他設(shè)備也會隨之scroll或者location.href跳轉(zhuǎn)等，實在太巧妙。

此外，兩個BrowserSync的小提示：BrowserSync默認(rèn)請求index.html，如果你的目錄里面沒有這個文件夾，會返回Cannot GET /，這時候你需要指定具體的目錄、文件。

在開啟BrowserSync的命令中，--files="*"表示要監(jiān)聽變動的文件，如果你指定了--files="css/*.css"就表示只監(jiān)聽css/下的所有css文件變動，如果遇到修改代碼沒有自動刷新的問題，可能是你監(jiān)聽的路徑和文件有問題，對于CSS的修改，它會采用無刷新注入的方式，JS和HTML的修改，它會采用刷新的方式。

2、Charles代理應(yīng)用

Charles是Mac系統(tǒng)下面的抓包、代理工具。如果你電腦是Win系統(tǒng)，可以使用Fiddler實現(xiàn)本節(jié)要介紹的技巧。

使用場景舉例：當(dāng)我們在本地開發(fā)時使用內(nèi)網(wǎng)登陸功能（需要同域），往往需要綁定Host，比如將本機(jī)127.0.0.1綁定為www.mahaixiang.cn。這樣我們訪問本地服務(wù)器時使用www.mahaixiang.cn，才可以正常使用“登陸”等等服務(wù)（需要用到Cookie）。

那我們用移動端設(shè)備測試這個頁面的時候，也需要修改移動端設(shè)備上的Host，因此Android需要root，iPhone需要越獄，而且每次都要開啟，極為不方便，這時候，我們就可以使用Charles這里抓包工具做一個代理。

當(dāng)打開Charles時，它會自動在本機(jī)開啟一個代理服務(wù)，默認(rèn)接口為8888，這時候，我們設(shè)置同局域網(wǎng)內(nèi)的移動設(shè)備的代理為本機(jī)局域網(wǎng) IP，即可通過Charles轉(zhuǎn)發(fā)請求，在移動設(shè)備上訪問電腦可以訪問的內(nèi)容，基本原理如下圖：

通過這個代理服務(wù)，移動設(shè)備的請求被轉(zhuǎn)移到到電腦上發(fā)送出去，并將電腦得到的響應(yīng)返回給移動設(shè)備，其他同類問題（想用手機(jī)訪問只有電腦才能訪問的內(nèi)容）均可用這種方式解決，此外，因為經(jīng)過Charles代理，因此可以使用Charles的查看有關(guān)請求和響應(yīng)、做本地資源映射等等功能，來簡化開發(fā)和調(diào)試BUG。

提供一個Charles的小技巧：Charles只提供了全局監(jiān)聽和Firefox監(jiān)聽，但我常用的是Chrome瀏覽器，我只想監(jiān)聽Chrome瀏覽器中某個頁面的請求信息，也可以通過設(shè)置代理來解決，這里使用SwitchySharp代理插件（GAE 翻墻必備），增加一個新的情景模式，綁定本地Charles代理。

這樣當(dāng)我們想抓包某個頁面時，只需要打開Charles并勾掉 Proxy-》Mac OS X Proxy和Mozilla Firefox Proxy，之后再在SwitchySharp中勾選這個情景模式，即可清爽的只監(jiān)聽Chrome瀏覽器發(fā)送的請求了。

關(guān)于Charles的使用，可以自行搜索教程，F(xiàn)iddler同樣原理，不再贅述。

六、回顧總結(jié)

由于篇幅較長，最后我們在一起來回顧總結(jié)一些要點：

1、移動端前端重構(gòu)項目開發(fā)流程最佳實踐

新建項目相關(guān)文件，然后應(yīng)用BrowserSync等工具（可以配合 Grunt等）啟動本地服務(wù)器，在Chrome中啟用Emulation來模擬iPhone等設(shè)備的尺寸，進(jìn)行編碼開發(fā)，這樣就可以無刷新、比較直觀的看到手機(jī)上的效果。

開發(fā)基本完成，將測試機(jī)、虛擬機(jī)等打開聯(lián)入局域網(wǎng)，輸入本地服務(wù)器地址，開始測試，對文件的修改實時刷新在所有設(shè)備中，即時看到效果。

對于有點復(fù)雜的BUG或者問題，使用Safari或者Chrome連接虛擬機(jī)或者真機(jī)進(jìn)行調(diào)試。

2、不同測試場景下需要用到的技術(shù)和工具

響應(yīng)式測試：Chrome DevTools面板右側(cè)拉伸快速查看效果；Firefox響應(yīng)式工具進(jìn)一步調(diào)整；Chrome Emulation精細(xì)測試。

Android設(shè)備測試：使用Android虛擬機(jī)；高版本Android測試機(jī)，使用Chrome連接調(diào)試，Android 4.4+的WebView修改APP源代碼，也可以用Chrome調(diào)試。

低版本系統(tǒng)和其他品牌手機(jī)以及WebView：統(tǒng)統(tǒng)可以用Weinre來解決。

iOS設(shè)備測試：使用Xcode自帶iOS模擬器，使用Safari調(diào)試；WebView也可以被電腦上Safari調(diào)試；測試機(jī)連接電腦，也可以用Safari調(diào)試；MIHTool可以在iOS設(shè)備上使用，提供類似Weinre的調(diào)試功能（具體可查看億企邦《APP在IOS與Android系統(tǒng)界面設(shè)計規(guī)范》的相關(guān)介紹）。

測試多種設(shè)備：BrowserStack和Keynote。

使用BrowserSync可以創(chuàng)建本地局域網(wǎng)IP服務(wù)器，并同步操作、監(jiān)聽刷新，極大減少測試操作，提高測試效率。

當(dāng)移動端設(shè)備無法訪問某項資源時，使用Charles做代理，通過電腦去訪問。

億企邦點評：

移動互聯(lián)網(wǎng)時代，瀏覽器發(fā)展的趨勢、瀏覽器調(diào)試工具發(fā)展的未來一定是基于移動端調(diào)試的便利性、遠(yuǎn)程調(diào)試的廣泛支持，我可以大膽預(yù)測支持多終端跨設(shè)備跨瀏覽器的遠(yuǎn)程調(diào)試工具將會越來越多。