1. 安裝 Node.js

BrowserSync是基於Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js
安裝適用於Mac OS，Windows和Linux。

2. 安裝 BrowserSync

您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個終端窗口，運行以下命令：

npm install -g browser-sync

您告訴包管理器下載BrowserSync文件，並在全局下安裝它們，您可以在所有項目(任何目錄)中使用。

當然您也可以結合gulpjs或gruntjs構建工具來使用，在您需要構建的項目裏運行下面的命令:

npm install --save-dev browser-sync

3. 啟動 BrowserSync

一個基本用途是，如果您只希望在對某個css文件進行修改後會同步到瀏覽器裏。那麽您只需要運行命令行工具，進入到該項目（目錄）下，並運行相應的命令：

靜態網站

如果您想要監聽.css文件, 您需要使用服務器模式。 BrowserSync 將啟動一個小型服務器，並提供一個URL來查看您的網站。

// --files 路徑是相對於運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css"

如果您需要監聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個.html

// --files 路徑是相對於運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

我們做了一個靜態例子的示範，您可以下載示例包，文件您可以解壓任何盤符的任何目錄下，不能是中文路徑。打開您的命令行工具，進入到BrowsersyncExample目錄下，運行以下其中一條命令。Browsersync將創建一個本地服務器並自動打開你的瀏覽器後訪問http://localhost:3000地址，這一切都會在命令行工具裏顯示。你也可以查看Browsersync靜態示例視頻

// 監聽css文件 
browser-sync start --server --files "css/*.css"
// 監聽css和html文件 
browser-sync start --server --files "css/*.css, *.html"

四、調試

我們在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結構。鼠標移動到div上的時候，瀏覽器裏的相應的元素就會高亮起來：

此時能做的事情就可想而知了。
需要註意的是，要先打開自己的項目頁面，再打開Remote Debugger，這樣才能列出當前已經連接的客戶端。否則的話，即使項目頁面和BrowserSync是連接狀態，Remote Debugger也會出現捕捉不到的情況。因此，可能需要關閉再重新開啟Remote Debugger進行調試。

移動端真機調試終極利器-BrowserSync（使用方法）