原文連結
之前有分享過一篇《如何在移動裝置上調試網頁》，感謝 xyyjk 留言推薦BrowserSync這個工具，自己也花了點時間研究了一下，還是很好上手的。比起之前介紹的方法更加友善（之前的方法已經過時）。BrowserSync可以實時同步更新CSS、JS檔案，此外最關鍵的是全平台支援，即你可以在手機QQ浏覽器、微信浏覽器裡面調試。今天就介紹一下這個工具的用法（以下針對Mac OSX）。
一、安裝
其實官網已經有很好的 Get Started來介紹如何安裝。我現在是結合Gulp來用的，在Gulp下更友善一點。官方也有BrowserSync for Gulp的插件，并有明确文檔說明如何與Gulp整合。
1、安裝開發依賴
在終端裡輸入：
$ npm install browser-sync gulp --save-dev
如果安裝報錯請加sudo：
$ sudo npm install browser-sync gulp --save-dev
2、編輯gulpfile.js
如果項目下沒有gulpfile.js檔案請建立。先來看一下項目的目錄結構，bin檔案夾是最終釋出的目錄，我們把它當作BrowserSync代理伺服器啟動的根目錄：
gulpfile.js檔案代碼：
var gulp = require('gulp');
var browserSync = require('browser-sync');
// Static server
gulp.task('browser-sync', function() {
browserSync({
server: {
//指定伺服器啟動根目錄
baseDir: "./bin"
}
});
//監聽任何檔案變化，實時重新整理頁面
gulp.watch("./bin/**/*.*").on('change', browserSync.reload);
});
二、啟動
打開終端輸入：
$ gulp browser-sync
此時浏覽器會自動打開http://localhost:3000的頁面，我們會發現這個頁面正是指向./bin目錄下的index.html，這與我們在gulpfile.js中的設定相符。我們在index.html中有一個藍色邊框的box，并輸出浏覽器的UA：
BrowserSync啟動後終端界面會有兩個端口提示，分别是:3000的項目頁面，和:3001的BrowserSync的UI界面，并且每個端口都有供本地（localhost）和外部（區域網路IP）通路的URL：
因為我們把BrowserSync的reload加到了gulp的watch裡，是以隻要./bin下面的檔案發生變化所有通路local URL或External URL的用戶端（client）都會自動重新整理。
接下來我們把手機和電腦要連接配接在同一個無線區域網路裡，我們可以直接通過微信掃碼通路External的URL，如本例中的http://192.168.0.141:3000。此時手機顯示如下：
三、調試
我們在PC的浏覽器中打開http://localhost:3001，這個端口為3001的URL是BrowserSync的操作界面：
界面操作簡潔易懂。我們着重關注的是Remote Debug這一項，預設它的所有選項都是關閉的。我們開啟
Remote Debugger (weinre)
這一項，然後點選出現的紅色字：Access remote debugger (opens in a new tab)，就會打開weinre的控制台界面：
這個界面上會列出目前連接配接在BrowserSync上的用戶端，我們可以選擇一個目标（target）來調試，因為我們的微信浏覽器通路的是外部連結，即http://192.168.0.141:3000，是以我們點選圖中Targets下的第一個link。點選後link會變為綠色，表示目前已經可以對這個用戶端進行調試了。此時我們點到頂端的Elements頁籤上，就會看到微信浏覽器裡網頁的HTML結構。滑鼠移動到.box的div上的時候，微信浏覽器裡的相應的元素就會高亮起來：
此時能做的事情就可想而知了。
需要注意的是，要先打開自己的項目頁面，再打開Remote Debugger，這樣才能列出目前已經連接配接的用戶端。否則的話，即使項目頁面和BrowserSync是連接配接狀态，Remote Debugger也會出現捕捉不到的情況。是以，可能需要關閉再重新開啟Remote Debugger進行調試。