以前的调试方式
修改完项目文件(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"
转载于:https://www.cnblogs.com/web-panpan/p/10088390.html