时间：2021-07-01 10:21:17 帮助过：22人阅读
做 Web 开发的时候，我们做一些修改然后刷新页面查看效果。 Browsersync 可以让你省去后面那一步，只要修改网页文件保存就可以，它会监控文件的变化(html/js/css)并自动刷新页面，这样就不用手动刷新了。Good！
图片来自网络
Browsersync 真正强大的地方在于跨设备同步。你可以用桌面、手机、平板等不同设备的浏览器同时打开你正在开发的网页，其中任何一个页面上的操作（如点击、滚动、表单填写和提交）会在所有其它页面上自动同步！当然，同一个机器上的同一个浏览器或不同浏览器的多个页面也可以。
图片来自网络
例如，你在两台电脑(Win和Mac)、Android 手机和 iPad 平板上同时打开指定的页面，你所做的任何文件修改在这4个浏览器上都会自动刷新，在任何一个打开的页面上滚动页面或点击链接跳转，所有其它页面上都会同时执行同一操作。这样大幅提高了你在多设备、多浏览器上的开发和测试效率！
安装和使用
1. 安装
Shell
npm install -g browser-sync
npminstall -g browser-sync
2. 启用
Shell
browser-sync start --server --files "css/*.css"
browser-syncstart --server --files "css/*.css"
上面的命令针对静态网页启动了一个简单的 web server ，并且会监控 css 文件的变化。如果是动态页面则需要使用代理模式：
Shell
browser-sync start --proxy "myproject.dev" --files "css/*.css"
browser-syncstart --proxy "myproject.dev" --files "css/*.css"
另外，Browsersync 可以和 Gulp 集成 或 Grunt 集成 。
启动后的默认服务地址是：http://localhost:3000 或 http://your-ip:3000 ，使用浏览器打开该地址下的页面即可。
http://localhost:3001 是 Browsersync 服务的配置页面，可以设置同步选项、网速模拟等。
除了 Browsersync ，另外一个类似的工具是 LiveReload 。
如果你想知道页面中某个位置使用的字体，试试 WhatFont 吧！它是一个 Chrome 扩展，鼠标点到哪里就能显示该位置文字使用的字体。
Alfred 是另一个 Mac 提高效率的好工具。它可以帮你快速打开某个程序、文件/文件夹、执行定制的搜索等。近几年 Mac 系统自带的 Spotlight 在这方面的功能也有了大幅提高。不过，Alfred 还有很多扩展的功能。
作者：韩国恺。本系列文章以 Addy & Matt 的系列视频 Totally Tooling Tips 的内容为基础重新整理而成，主要介绍一些(前端)开发者喜欢的工具和技巧。
Post Views: 18
除非特别声明，此文章内容采用 知识共享署名 3.0 许可，代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。