DEV Community

Jain Wun
Jain Wun

Posted on

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


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

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

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

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

Install

npm install browser-sync
Enter fullscreen mode Exit fullscreen mode

CLI

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

npx browser-sync start --server
Enter fullscreen mode Exit fullscreen mode

執行後會給你目前運作的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: ./
Enter fullscreen mode Exit fullscreen mode

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

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

UI

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

image.png

Reference

Browsersync - Time-saving synchronised browser testing

Top comments (0)