前端屏幕同步調試神器browserSync

應用場景

當咱們須要在PC、安卓手機、蘋果手機、ipad、一體機等等多種不一樣設備調試同一個頁面時，每一個滑動點擊操做都要在每一個設備上來一遍，這樣重複性的工做咱們能夠用browser-sync自動實現

準備工具

1.nodejs
2.安裝npm (通常安裝node的同時已經安裝)

安裝browser-sync

在命令行輸入 npm i browser-sync -g

通常安裝爲全局工具

注意
在windows安裝可能會報如下錯誤

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\browser-sync\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

解決辦法是安裝Visual Studio


而後從新安裝

使用

browser-sync start --server ./ --files *
--server 是監聽的文件目錄
--files 是監聽的文件

訪問

啓動後命令行以下

訪問3000端口的地址是你的站點，3001是browser-sync的後臺管理

代理

咱們常常須要調試已經部署在服務器的網站，這個時候能夠用browser-sync的代理功能
browser-sync start --proxy http://news.baidu.com/
--proxy 後面爲代理地址

腳本嵌入

還能夠經過腳本嵌入的方式使用，執行
browser-sync start
會看到以下圖:

複製代碼到頁面

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

也能夠愉快的調試^_^

以上是常常會用到的命令，更多命令請查看官網