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

也能够愉快的调试^_^

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