痛點

1. 當我們在除錯頁面的時候，步驟大概如下: 修改檔案, ctrl + s => 回到瀏覽器重新整理再看效果。

這些動作浪費我們很多時間，也使得我們debug的效率大大降低。當然，目前我接觸過的vue-cli專案就整合了webpack的熱更新，你只需要ctrl + s那麼頁面就會自動更新（可以直接看到你儲存後的效果），而不用你手動去重新整理，瀏覽器上面的變數還不會給清除掉。

2. 當我們除錯移動端專案的時候，想直接在手機上看效果，而不是在chrome的debug中看。

3. 當我們除錯頁面的時候，想多個裝置，多個瀏覽器同步重新整理和操作。

辦法

browsersync，省時的瀏覽器同步測試工具

官網地址: http://www.browsersync.cn/

browsersync能讓瀏覽器實時、快速響應您的檔案更改（html、js、css、sass、less等）並自動重新整理頁面。更重要的是 Browsersync可以同時在PC、平板、手機等裝置下進項除錯。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等裝置，同時開啟了您需要除錯的頁面，當您使用browsersync後，您的任何一次程式碼儲存，以上的裝置都會同時顯示您的改動”。無論您是前端還是後端工程師，使用它將提高您30%的工作效率。

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"

然後這個ip+埠會對映到你的當前專案目錄，比如這樣子訪問 http://localhost:3000/xxx.html 或者 http://192.168.1.131:3000/xxx.html

除了你自己的電腦裝置的所有瀏覽器，你的手機或者其他人的手機、電腦將如何訪問你的專案，並且能夠同步

連線同一個wifi, 訪問http://192.168.1.131:3000/xxx.html就行了

如果您喜歡這篇文章，那麼記得動動你們的?，給個like或者關注我哦?。