以前的调试方式
- 修改完项目文件（html、js、css等）后保存，在浏览器刷新页面查看修改后的效果
- 本地开启一个 tomcat 服务，修改文件后保存刷新页面，移动端或其他 pc 则需要输入 ip + 文件路径进行调试
传统调试页面的缺点是每次修改完代码，需要在相关设备上 F5 刷新下页面才能看到刷新后的效果，多个页面窗口的话还需要切换页面刷新查看效果，基于此，网页真机调试利器-Browsersync 呼之欲出。
什么是 Browsersync？
- 能够使浏览器快速、实时响应文件的修改
- 可以同时在 PC、手机、平板等设备上进行调试
- 不用在多个设备、多个浏览器之间来回切换，频繁刷新页面，更神奇的是在一个设备或浏览器的各种行为（滚动、点击等），也会同步到其他设备或浏览器
- 可以通过可视化界面控制
- 无论是前端工程师还是后端工程师，使用后将提高30%的工作效率
如何使用 Browsersync？
- 安装 Node.js
Browsersync 是基于 Node.js 的, 是一个 Node 模块，需要先安装 Node.js
- 安装 Browsersync
- 全局安装，在任何目录下都可以使用
npm install -g browser-sync
- 结合 gulpjs 或 gruntjs 构建工具来使用，在您需要构建的项目里运行下面的命令
npm install --save-dev browser-sync
- 启动 Browsersync
- 如果仅仅监听某一个文件的修改则在该文件目录下执行启动命令
--files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"
--files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css, *.html"
如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件
browser-sync start --server --files "**/*.css, **/*.html"
- 如果已经有本地服务器环境，需要使用代理模式，主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
