Browser Sync - 在不同裝置的瀏覽器上同步網頁

• 訂閱patreon即可看到更多文章 https://www.patreon.com/wade3c
• Youtube頻道 https://www.youtube.com/c/增廣建文

---

它的設計初衷是可以幫助開發者查看網頁在不同裝置上的使用情況

這裡我們可以把它用來同步顯示html的內容，像是投影片或教學文章等等

由於他支援scroll的同步，理論上連PDF等文字檔案類型也能同步

除了CLI指另外他也能搭配grunt/ gulp做使用

Install

npm install browser-sync

CLI

只要一行就可以serve目前目錄下的所有html

npx browser-sync start --server

執行後會給你目前運作的URL

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.108.1:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./

當然port想要的話可以自訂，更多的參數設定可以參考

https://browsersync.io/docs/command-line

UI

會提供目前所有的sync狀況還有相關設定，甚至可以一次控制全部裝置

Reference

Browsersync - Time-saving synchronised browser testing