网页真机调试之Browsersync简介

以前的调试方式

• 修改完项目文件（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"

官方文档地址：http://www.browsersync.cn/