移動端頁面調試神器-browser-sync

最近公司趕一個項目，是mobile端，以前沒怎麼作過移動端的開發，這個項目算是個小嚐試。

在作項目的過程當中，用到了一個神器--browser-sync，在這裏分享給你們。

一、靜態頁面調試

做爲前端，確定是要保證頁面的兼容性的。

一般的測試場景是，前端人員人手N部測試機，改下頁面，依次手動刷新各個手機，真的很是蛋疼，這些重複性的工做，不該該由人來完成，而應該由機器來自動完成，這時，browser-sync就體現出了它的巨大價值。

有了它，前端人員就能從繁瑣的重複性工做中解脫出來，更專一的解決技術上的問題。

browsersync 依賴node.js，如何安裝node.js這裏就再也不贅述了。

命令行上敲入下面的命令，全局安裝上browser-sync：

npm install -g browser-sync

安裝完成以後，咱們就能夠開始啓動調試了。

在調試以前，咱們須要把確保測試用的手機和本地開發的機器同處在一個局域網中。

啓動調試咱們分兩中狀況進行處理：

A、本地沒有搭建服務器環境的

針對單純的靜態頁面，咱們須要使用到browser-sync 的 --server 命令。

假設個人靜態頁面都在C:\wamp\www\openadmin\style\html\目錄下，

經過控制檯進入到C:\wamp\www\openadmin(即把改目錄當初server的root目錄)，敲入下面的命令：

browser-sync start --server --files "style/html/*.html"

便可看到本地服務器的啓動。

地址欄輸入 http://localhost:3000/style/html/module.html便可看到該頁面。

給瀏覽器裝上一個二維碼插件，測試手機依次掃過二維碼，打開module.html頁面。

咱們在開發機器上修改module.html頁面，這時奇蹟出現了，N部打開了該頁面的手機瀏覽器都同時刷新，酷，任性！

依葫蘆畫瓢，調試走起！

 

B、本地已經搭建了服務器環境的

我在本地搭好服務器，設置了vhost  local.openadmin.com 指向 C:\wamp\www\openadmin\目錄

這時我只需在控制檯敲入下面的命令：

browser-sync start --proxy local.openadmin.com --files "style/**"

便可啓動服務。

地址欄輸入 http://localhost:3000/style/html/module.html便可看到該頁面。

-------------------------------------------寂寞冷的分割線------------------------------------------------------

更多信息你們能夠移步 browser-sync 的官網 http://www.browsersync.io/

以上，謝謝