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

也可以愉快的调试 ^_^

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