PC和移動端瀏覽器同步測試工具Browsersync使用介紹
阿新 • • 發佈：2019-01-05
在移動端網頁開發中，總是因為不方便除錯，導致各種問題不容易被發現。但是現在有了Browsersync，一切都解決了。
不熟悉的同學可以看看Browsersync的官方網站Browsersync中文網。
五分鐘快速入門
1.使用Browsersync前需要安裝node.js。詳細的安裝過程可參見windows 下安裝nodejs
2.安裝Browsersync。開啟一個終端視窗，執行以下命令：npm install -g browser-sync
3.啟動 BrowserSync。
如果您想要監聽.css檔案, 您需要使用伺服器模式。 BrowserSync 將啟動一個小型伺服器，並提供一個URL來檢視您的網站。
首先由終端視窗進入該.css檔案的專案目錄，再輸入以下命令列：browser-sync start --server --files "css/*.css"
如果您需要監聽多個型別的檔案，您只需要用逗號隔開。
| 1 2 3 4 |
// --files 路徑是相對於執行該命令的專案（目錄）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的檔案層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html檔案。
browser-sync start --server --files "**/*.css, **/*.html" |
此時只需要將手機連線到與PC相同的網路中，用手機瀏覽器掃描開啟網頁，即可實現同步除錯。
如果您已經有其他本地伺服器環境PHP或類似的，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來檢視您的網站。
在本地建立了一個PHP伺服器環境，並通過繫結Browsersync.cn來訪問本地伺服器，使用以下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，並監聽其css目錄下的所有css檔案。
browser-sync start --proxy "Browsersync.cn" "css/*.css"