1.需求由來
1.當(dāng)開發(fā)一個手機端頁面時候尼斧，pc上可以直接用谷歌等瀏覽器進行調(diào)試霜旧，但是瀏覽器只是模擬的虑凛，和真實的有一定差別。這時如果可以在手機端也可以遠(yuǎn)程調(diào)試就好了殖属。
2.還有姐叁，如果產(chǎn)品想先看看我開發(fā)的頁面，但是現(xiàn)在我還不想發(fā)布到服務(wù)器洗显，怎么辦外潜。如果有一個地址，產(chǎn)品直接打開就可以看見頁面那該多好挠唆。
2.利用Browsersync進行遠(yuǎn)程調(diào)試
1.安裝
全局安裝：npm install -g browser-sync处窥，這樣可以在所有項目(任何目錄)中使用。
或者
局部安裝：npm install --save-dev browser-sync一般使用此命令和gulpjs或gruntjs搭配使用
2.啟動
監(jiān)聽某個文件的變動：browser-sync start --server --files "文件路徑"
注： --files 路徑指的是運行該命令的路徑
若要監(jiān)聽多個文件變動玄组，可以按如下方式
browser-sync start --server --files "目錄/*.css, *目錄/.html"
如果文件層級較深滔驾，則使用（表示任意目錄）匹配
browser-sync start --server --files "**"
此時命令會默認(rèn)打開本地端口
image
在自己的電腦訪問可以使用
http://localhost:3000+文件路徑
或者
http://10.0.84.116:3000+文件路徑
如要在手機端使用或者讓別人預(yù)覽谒麦，可以使用
http://10.0.84.116:3000+文件路徑
實際：
10.0.84.116就是自己電腦的ip地址，相當(dāng)于用自己的ip地址加上本機開啟的3000端口用于共享哆致。
注：默認(rèn)開啟共享后绕德，不同設(shè)備訪問該共享地址，假如在一個瀏覽器中滾動頁面摊阀、點擊等行為也會同步到其他瀏覽器和設(shè)備中耻蛇。如果不需要此功能，在開啟時使用下面命令（即禁用幽靈模式）
browser-sync start --server --files "**" --no-ghost-mode
可以使用
http://localhost:3001或者h(yuǎn)ttp://10.0.84.116:3001來訪問browser的參數(shù)界面胞此，在里面可以看見歷史記錄臣咖，鏈接的設(shè)備等信息。
測試截圖如下
image
具體其他配置比如更改端口等可以看官網(wǎng)
