三个生产力工具：Browsersync, WhatFont 和 Alfred_html/css_WEB-ITnose

程序员文章站 2022-05-29 23:11:29

...

做 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 许可。更多细节请查看我们的服务条款。