2018-10-30 BrowserSync省时的浏览器同步测试工具

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

一、安装Node.js

访问Node.js官网 https://nodejs.org/en/ ，会自动识别你当前的系统，我的MAC下载安装直接安装即可

image.png

二、安装BrowserSync

MAC下打开终端，输入命令，等待安装即可完成！
npm install -g browser-sync

注意：偶尔会提示错误

checkPermissions Missing write access to /usr/local/lib/node_modules
这个是因为安装npm全局包提示没有写入权限，

需要修改下修改npm包所安装目录的权限
sudo chown -R $USER /usr/local
然后输入密码就可以了，查看目录是否已切换权限：$ls -l /usr/local

三、启动 BrowserSync

在终端进入，要监测的项目中，「必须的，否则不能执行」，注意最好到最后一层文件夹，否则出错
可以使用Path Finder文件管理，在要检测的文件夹上选择，打开方式-终端，可以快捷打开。

image.png

输入命令，监听的文件类型，html,css等
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
//监听css、HTML、js文件
browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
//监听所有类型文件
browser-sync start --server --files "**/**.*"

默认启动index.html

四、移动端访问（实时同步修改，同步浏览功能很赞）

以上操作后，电脑自动弹出http://localhost:3000访问
也可通过http://192.168.1.143:3000 访问，手机扫描访问，网页是同步进行修改的，这点很赞！

image.png

五、大坑的解决 update:2018年11月15日17:51:29

1、不能同步刷新

• 「启动命令错了」命令要用我上面的启动命令，要用双引号。 要加上--files 和server，否则出错
• 「要进入文件夹」一定从终端进入相应的文件夹，进行监控才行
• 「body包裹」监控html文件的话，至少使用body标签包裹编辑的内容[，才好监控。

• 「莫名其妙的bug」有时候文件没有反应的话，重新写个html页面进入，测试下是否正常刷新。可能监测是正常的，但是因为页面代码的问题，没有监测到。

我莫名其妙的解决了这个问题，我怀疑是页面代码的问题，尤其是js代码的问题。所以依次删除屏蔽代码。终于我把尾部的一段js代码删除后，能够同步刷新了！！！ 更神奇的是我把这段代码又复制回去了，还是能够同步刷新！ 「实在无解的时候可以考虑这种方法」

参考资料

---

[1] BrowserSync官网https://www.browsersync.io/