前端屏幕同步调试神器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>

也可以愉快的调试^_^

以上是经常会用到的命令，更多命令请查看官网