Browsersync 这个工具我一直把它等同于 Live Server,因为看过的一些油管教程把它当 Live Server 用形成了这样的印象,最近才发现它的功能要更强大些。

首先 Live Server 是一个 VS Code 插件,让你在前端开发时很方便地启动一个本地服务器,监控静态文件的变化并实时刷新网页(它有个 Chrome 插件能够支持动态页面,三年没更新了,没用过)


Browsersync 和 Live Server 一样可以启动一个服务器,监控代码文件的变化并实时刷新网页。它有两个模式,server 模式针对静态页面,proxy 针对动态页面。

服务器启动后,除了本机访问地址,Browsersync 还提供局域网访问地址,方便你在其它设备上访问。

Browsersync 另外提供管理界面,有 Sync Options、History、Remote Debug、Plugins、Network Throttle 各项。比如 Remote Debug 页面可以为网页添加 Outline 和 Grid,相当实用。

最出彩的还是 Browsersync 的 Sync 功能。除了监控文件变化实时刷新网页,它还能够在打开同一页面的不同页签、浏览器和设备之间同步点击、滚动和表单操作。

这么酷炫的功能,我直觉它有非常合适的应用场景,不过因为自己暂时没有合用的场景,所以这个同步功能的作用我心里隐隐约约却还说不清楚。不过总是要先知道有这样一个锤子,以后才能够去发现可以敲的钉子。

安装和使用比较简单,参考文档即可,本文略。