前端自动化-Browsersync多设备浏览器同步测试工具一、Browsersync介绍 Browsersync是浏览器

一、Browsersync介绍

Browsersync是浏览器同步测试工具，Browsersync能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。省去每次都重复手动刷新事件，另外一点多设备调试， Browsersync可以同时在PC、平板、手机等设备下进项调试。 在开发过程中，能够提高了测试效率。效果图：

二、 Browsersync安装

Browsersync是基于node.js的，所以首先要确定你已经安装了node.js。
```
C:\Users\su>npm -v
6.4.1
```
全局安装Browsersync
```
npm install -g browser-sync
```

三、启动 BrowserSync

1.静态网站

如果你只是想监听修改了css样式

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "assets/*.css"

监听多个类型文件，用逗号分隔。如：再加一个js文件的监听
```
browser-sync start --server --files "assets/*.css, *.js"
```

如果你想匹配监听项目下所有指定类型文件

browser-sync start --server --files "**/*.css, **/*.js"

执行上述任一命令后， Browsersync 会创建一个本地服务，如果看到这个就说明成功了

Local: http://localhost:3000
External: http://192.168.0.60:3000
 -------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001

2.动态网站

如果你已经使用 PHP 或类似工具在本地启动了一个服务器，那么使用代理模式即可。Browsersync 将提供一个代理 URL 来查看您的站点。

browser-sync start --proxy "域名/ip" --files "css/*.css"

四、感谢

本次分享到这里就结束了，感谢您的阅读，如果本文对您有什么帮助，别忘了动动手指点个赞 ❤️ 和关注。

更多内容欢迎关注访问下面二维码或搜索公众号：修行全栈，获取更多实用内容。

前端自动化-Browsersync多设备浏览器同步测试工具