轉自：http://yujiangshui.com/multidevice-frontend-debug/
通過移動端使用 Web 服務的比率越來越大，例如淘寶今年雙十一，移動端交易份額就達到 42.6%。由此可見，掌握移動端的前端開發和測試是非常有必要的。
由於之前做過大量有響應式需求的項目；今年（2014）年初也配合 Denis 的 微信機器人 做了一些用於微信的移動端項目；在淘寶 UED 實習的時候，也有參與過一個針對移動端的游戲的部分開發。所以算是積累了一點移動端調試的經驗，在這里分享一下。
本文只介紹與調試有關的內容，至於其他移動端開發知識（技巧、坑）太多太大，推薦 Mars 移動前端開發知識庫。這個項目很久沒有大動靜了，歡迎大家猛烈關注，不要讓它“太監”了。
由於本文較長，如果沒有太多時間和精力查看，建議跳轉到 不同測試場景下需要用到的技術和工具 一節，找到適合自己測試需求的場景，再查閱相關章節。
響應式測試
響應式現在基本是中小型項目的標配了，先來談談響應式測試技巧。
基礎的響應式測試
響應式的測試特別簡單，通過改變視窗大小（也就是縮放你的瀏覽器）即可測試。當然，你的 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 等常用功能，但是它兼容性強，可以實現基礎調試功能。
基於 Chrome 的測試是雞肋的
Chrome 功能很強大，調試很方便，提供了很多調試功能。但是前提是安裝 Android 版本的 Chrome 瀏覽器，才可以連接調試。
之所以說它雞肋，是因為並不是所有用戶都使用 Chrome 瀏覽器，這一點尤其體現在國內。國內用戶大都使用 UC 瀏覽器、百度瀏覽器以及 QQ 手機瀏覽器等等（數據報告），而這些瀏覽器通常使用的是 WebView，或者自己改造的內核。而 Chrome 作為最強大的瀏覽器，在它上面測試通過並不表示在當前 Android 的內置瀏覽器正常，通常內置瀏覽器功能會比較弱。
此外國內用戶也有一定的比例使用微信、手機 QQ 等的內置瀏覽器來訪問網頁，使用的是 WebView 借用原生瀏覽器（有待進一步測試考證）。也有人測試說如果安裝了 QQ 手機瀏覽器，那么微信、手機 QQ 里面的瀏覽器就使用 QQ 手機瀏覽器的內核。這些都造成了 Android 下面移動端調試的難度和復雜度。
因此，你需要分析你的用戶使用份額，然后進行測試，而不能僅僅在最新版測試 Chrome。從這一點來看，Weinre 是最折中實用的測試方案。
基於 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 開發的朋友可以看下。
提示：iOS 系統版本 8+ 的設備，需要使用 Safari 7.1+ 調試，老版本 Safari 會無法識別。你可以將 OS X 更新到 10.9.5，或者升級到 Yosemite。具體可以看 這里。
使用 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 測試，我簡單的試了一下，果然比較卡，應該是真機測試：
其他移動端調試方法和技巧
UC 瀏覽器測試
UC 瀏覽器是國內使用份額最大的移動端瀏覽器，值得高興的是，它專門提供了開發版方便開發者連接調試。
當然配置起來稍微麻煩，但總比沒有強的多。
配置和開發文檔官方已經非常詳細了，這里不再贅述，請移步官方網站。
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 翻牆必備），增加一個新的情景模式，綁定本地 Charles 代理。
這樣當我們想抓包某個頁面時，只需要打開 Charles 並勾掉 Proxy-》Mac OS X Proxy 和 Mozilla Firefox Proxy，之后再在 SwitchySharp 中勾選這個情景模式，即可清爽的只監聽 Chrome 瀏覽器發送的請求了。
關於 Charles 的使用，可以自行搜索教程，Fiddler 同樣原理，不再贅述。
使用 Ghostlab 等集成測試工具
Ghostlab 是一個帶着美觀界面的集成的測試工具。大體功能相當於 Weinre + BrowserSync，帶有簡潔美觀的界面，用鼠標拖動操作，簡單幾個點擊即可啟動一個本地局域網 IP 服務器，會監聽網頁的終端，並同步各種操作。當點擊Inspect 的時候，會打開 Weinre 進行調試。
帶有界面使其使用十分簡單，不需要執行命令，也有很多額外的參數來輔助調試。因此這個軟件是收費的，而且只針對 Mac 平台。
更具體的可以看下 Ghostlab 官方網站，有一段介紹視頻簡潔明了的介紹了有關功能。
同類的產品還有 Adobe Edge InspectCC 和 GapDebug 功能類似各有特點，這里不再贅述。
回顧總結與擴展閱讀
移動端前端重構項目開發流程最佳實踐
新建項目相關文件，然后應用 BrowserSync 等工具（可以配合 Grunt 等）啟動本地服務器。在 Chrome 中啟用 Emulation 來模擬 iPhone 等設備的尺寸，進行編碼開發。這樣就可以無刷新、比較直觀的看到手機上的效果。
開發基本完成，將測試機、虛擬機等打開聯入局域網，輸入本地服務器地址，開始測試。對文件的修改實時刷新在所有設備中，即時看到效果。
對於有點復雜的 BUG 或者有關問題，使用 Safari 或者 Chrome 連接虛擬機或者真機進行調試。分析用戶瀏覽器使用習慣，針對相關瀏覽器等進行測試。
不同測試場景下需要用到的技術和工具
- 響應式測試：Chrome DevTools 面板右側拉伸快速查看效果；Firefox 響應式工具進一步調整；Chrome Emulation 精細測試。
- Android 設備測試：使用 Android 虛擬機；優先使用 Weinre 測試，分析用戶瀏覽器使用份額，有針對的進行測試。高版本 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 做代理，通過電腦去訪問。