您不可或缺的测试助手。
随着网页的增加、设备和浏览器的不断出新,测试时间呈指数级增长。从实时加载到 URL 推送、从复制到单击镜像,Browsersync 就像一双额外的手,取代了重复的手工劳动。从用户界面或命令行自定义一组同步设置,从而创建个性化的测试环境。需要更多的控制?Browsersync 很容易与 Web 平台、构建工具和其他 Node.js 项目集成。
出色的功能
在任何地方安装和运行
基于 Node.js 并支持 Windows、MacOS 和 Linux 操作系统。5分钟即可完成设置。
免费使用
Browsersync 是一个开源项目,采用 Apache 2.0 开源许可证。
兼容构建工具
很容易与 Grunt 和 Gulp 之类的构建工具集成,或者包含到其他 Node 项目中。
网络限流
即便您的设备连接的是 wifi,也可以模拟成较慢的网速测试你的站点。
交互同步
在测试时,您的滚动、单击、刷新和表单操作将映射到不同的浏览器上。
文件同步
当您修改 HTML、CSS、图片和其他项目文件时,浏览器将自动更新。
图形界面或命令行
可以选择使用基于浏览器的用户界面或命令行进行控制。
同步定制
切换单个同步设置就可以创建首选测试环境。
URL 历史
记录您的测试网址,您只需点击一次,就可以在不同设备里访问。
An open source project by JH
BrowserSync is an open-source project created and maintained by the front-end designers/developers at JH. Together with contributors from all over the world, we aim to make modern, multi-device web development faster & easier.
用户的认可
Dave Rupert
Want to feel like a modern day demigod? Fire up Browsersync and control an entire device lab with your phone.
Addy Osmani
It has a fantastic feature-set and at least 5 developers I’ve spoken to this week alone swear by it for their own synchronized cross-device testing.
Google and addyosmani.com
5分钟快速入门。
1. 安装 Node.js
Browsersync 是一个 Node.js 模块(Node.js 是一个快速的网络应用平台)。MacOS、Windows 和 Linux 上各有便利地安装方式。
2. 安装 Browsersync
npm 将从 Browsersync 仓库 中安装 Browsersync。打开一个命令行窗口,执行以下命令:
npm install -g browser-sync
上述命令告诉 npm 下载 Browsersync 文件并将其安装到全局环境中,这样就可以在任何项目中直接使用 Browersync 了。
3. 启动 Browsersync
一个基本用途是,监听某个
css
文件,如果检测到文件修改就会同步到浏览器里。进入到项目目录下,根据项目类型运行相应的命令:静态网站
如果你的网站只有
.html
文件,那么使用服务器模式即可。Browsersync 将启动一个微型服务器并提供一个 URL 来查看您的站点。browser-sync start --server --files "css/*.css"
动态网站
如果你已经使用 PHP 或类似工具在本地启动了一个服务器,那么使用代理模式即可。Browsersync 将提供一个代理 URL 来查看您的站点。
browser-sync start --proxy "myproject.dev" --files "css/*.css"