网页真机调试之Browsersync简介

时间:2022-07-30 19:07:11

以前的调试方式

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