Browsersync同步测试工具

官网地址：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)，然后重新开启。