1. 程式人生 > >Browser-sync瀏覽器同步測試工具

Browser-sync瀏覽器同步測試工具

        Browsersync能讓瀏覽器實時、快速響應您的檔案更改(html、js、css、sass、less等)並自動重新整理頁面。更重要的是 Browsersync可以同時在PC、平板、手機等裝置下進項除錯。您可以想象一下:“假設您的桌子上有pc、ipad、iphone、android等裝置,同時打開了您需要除錯的頁面,當您使用browsersync後,您的任何一次程式碼儲存,以上的裝置都會同時顯示您的改動”。無論您是前端還是後端工程師,使用它將提高您30%的工作效率。


     有了它,您不用在多個瀏覽器、多個裝置間來回切換,頻繁的重新整理頁面。更神奇的是您在一個瀏覽器中滾動頁面、點選等行為也會同步到其他瀏覽器和裝置中,這一切還可以通過視覺化介面來控制。


   官網地址:http://www.browsersync.cn/

   詳細使用:

         1. 首先安裝node

         2. 全域性安裝browser-sync   

               命令: npm install -g browser-sync

         3. 啟動BrowserSync

             3.1 普通靜態web站點:   browser-sync start --server --files "**"    -->  將檢測專案目錄下所有檔案的變化

             3.2 配置php環境(代理模式): browser-sync start --proxy "localhost/lx" --files "**" 

                                                                 browser-sync start --proxy "192.168.1.103/lx" --files "**"

                   這樣配置就能隨時監聽檔案的變化,並且自動重新整理

            3.3 browser-sync+gulp一起應用也十分常見,下面會在gulp的文章講解中介紹