網頁真機除錯之Browsersync簡介
阿新 • • 發佈：2018-12-08
以前的除錯方式
- 修改完專案檔案（html、js、css等）後儲存，在瀏覽器重新整理頁面檢視修改後的效果
- 本地開啟一個 tomcat 服務，修改檔案後儲存重新整理頁面，移動端或其他 pc 則需要輸入 ip + 檔案路徑進行除錯
傳統除錯頁面的缺點是每次修改完程式碼，需要在相關裝置上 F5 重新整理下頁面才能看到重新整理後的效果，多個頁面視窗的話還需要切換頁面重新整理檢視效果，基於此，網頁真機除錯利器-Browsersync 呼之欲出。
什麼是 Browsersync？
- 能夠使瀏覽器快速、實時響應檔案的修改
- 可以同時在 PC、手機、平板等裝置上進行除錯
- 不用在多個裝置、多個瀏覽器之間來回切換，頻繁重新整理頁面，更神奇的是在一個裝置或瀏覽器的各種行為（滾動、點選等），也會同步到其他裝置或瀏覽器
- 可以通過視覺化介面控制
- 無論是前端工程師還是後端工程師，使用後將提高30%的工作效率
如何使用 Browsersync？
- 安裝 Node.js
Browsersync 是基於 Node.js 的, 是一個 Node 模組，需要先安裝 Node.js - 安裝 Browsersync
- 全域性安裝，在任何目錄下都可以使用
npm install -g browser-sync - 結合 gulpjs 或 gruntjs 構建工具來使用，在您需要構建的專案裡執行下面的命令
npm install --save-dev browser-sync
- 全域性安裝，在任何目錄下都可以使用
- 啟動 Browsersync
- 如果僅僅監聽某一個檔案的修改則在該檔案目錄下執行啟動命令
--files 路徑是相對於執行該命令的專案（目錄）browser-sync start --server --files "css/*.css"
--files 路徑是相對於執行該命令的專案（目錄）browser-sync start --server --files "css/*.css, *.html"
如果你的檔案層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html檔案browser-sync start --server --files "**/*.css, **/*.html"
- 如果僅僅監聽某一個檔案的修改則在該檔案目錄下執行啟動命令
- 如果已經有本地伺服器環境，需要使用代理模式，主機名可以是ip或域名
browser-sync start --proxy "主機名" "css/*.css"