官网地址：https://browsersync.io/
中文网地址：http://www.browsersync.cn/
一.安装
BrowserSync是基于Node.js的, 是一个Node模块， 所以必须先安装一下Node.js
二.安装Browsersync
命令行窗口输入，全局安装
npm install -g browser-sync
或者本地安装
npm install browser-sync --save-dev
三.使用
-
静态项目使用
在项目根目录的命令行窗口输入以下的任意类型，这个配置会创建一个小型服务器。
//--files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"
//监听多个类型的文件，只需要用逗号隔开
browser-sync start --server --files "css/*.css, *.html"
//如果层级比较深，可使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件
browser-sync start --server --files "**/*.css, **/*.html"
//可使用 **匹配所有文件
browser-sync start --server --files "**"
-
动态项目使用
如果你已经有一个本地的服务器设置（虚拟主机等），只需要使用proxy(代理)。
在项目根目录的命令行窗口可输入如下
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" --files "**"
比如下图监听一个动态项目，代理的地址就是红色框中的，在浏览器其中输入这个地址，可实现测试。
image.png
直接在多个浏览器中同时打开代理地址（ip+3000或者localhost:3000），3000这个端口是默认的。只要改变了项目文件中的内容，所有浏览器中页面实时更新，不用一个个手动刷新，而且所有操作是同步的。
ip+3001或者localhost:3001，是BrowserSync的操作界面
image.png
这里面的重点是Remote Debugger
image.png
开启Remote Debugger (weinre)这个选项，出现红色字Access remote debugger (opens in a new tab)，点击进入
image.png
然后便可以选择一个目标（target）来调试，可以直接切换到Elements，查看页面元素，
手机和电脑在一个局域网内，就可以直接在手机中同步测试效果。测试发现安卓微信浏览器同步刷新有问题，需要手动刷新，但是支持同步操作。百度浏览器，QQ浏览器都支持。
有时候Targets中没有连接地址，可以先关闭Remote Debugger (weinre)，然后重新开启。
网友评论