How Does BrowserSync Work?

BrowserSync starts a small web server. If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.

But you don’t need to worry about any of this; BrowserSync just works and you’ll be the envy of your peers (or accused of witchcraft).

BrowserSync 启动一个小web服务器，如果你已经在使用一个local web server或者需要连接到在线工作的website，你可以将BrowserSync作为一个proxy server来起动。它在每一个页面中主动注入一个小的脚本，该脚本通过websockets和服务器通信。当一个事件发生时，比如一个文件被修改，或者有scroll动作，这时server将发送一个update notification到所有已经连接的devices。

如果你的browsersync跑在vagrant box中，是否可以在host机器上sync浏览效果？

https://github.com/BrowserSync/browser-sync/issues/318

How does browsersync work?的更多相关文章

  1. 移动端页面调试神器-browser-sync

    最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...

  2. web自动化工具-Browsersync

    web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync ...

  3. browser-sync

    引入 大家写网页的时候,肯定都遇到这种情况,每次用sublime写完都要返回浏览器,刷新页面,而这个工具正好解决了这个问题,提高前端开发效率,这是一个npm的包 browser-sync browse ...

  4. browsersync实现网页实时刷新(修改LESS,JS,HTML时)

    var gulp = require("gulp"), less = require("gulp-less"), browserSync = require(& ...

  5. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  6. Browsersync + Gulp.js

    1.安装 Browsersync 和 依赖包 Gulp npm install browser-sync gulp --save-dev 2.gulpfile.js var gulp = requir ...

  7. Browsersync — 省时的浏览器同步测试工具

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  8. 通过Gulp使用Browsersync实现浏览器实时响应文件更改

    Gulp是什么鬼 Browsersync又是什么鬼 如何安装使用Browsersync 安装 使用 效果图 参考 Gulp是什么鬼 Gulp是一种基于node.js的构建工具,有关构建工具的概念请移步 ...

  9. Linux下browser-sync无法启动Chrome的解决方法

    笔者的环境: OS: Ubuntu Linux Browser: Chrome, Firefox 每次希望启动chrome浏览器,系统都会报错: browser-sync start -s --dir ...

  10. BrowserSync前端调试工具使用

    上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...

随机推荐

  1. nginx 杂记

    接触nginx一段时间,有些自己的心得,偶尔在网上会看到一些细小的知识点,总结于此 nginx是以多进程的方式来工作的.nginx在启动后,会有一个master进程和多个worker进程. maste ...

  2. .NET设计模式（16）：模版方法（Template Method）（转）

    摘要:Template Method模式是比较简单的设计模式之一,但它却是代码复用的一项基本的技术,在类库中尤其重要. 主要内容 1．概述 2．Template Method解说 3．.NET中的Te ...

  3. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  4. 《深入浅出JavaScript》

    第一章JS入门 第二章数据和判定常用的转义序列\b 回退 \f换页 \n换行 \r回车 \t制表符 \'单引 \"双引 \\反斜乘除求余的优先级相同,从左向右执行string对象indexO ...

  5. 纯js页面跳转整理

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  6. （转）Learning to Rank for IR的评价指标—MAP,NDCG,MRR

    转自:http://www.cnblogs.com/eyeszjwang/articles/2368087.html MAP(Mean Average Precision):单个主题的平均准确率是每篇 ...

  7. POJ 2482 Stars in Your Window （线段树+扫描线+区间最值，思路太妙了）

    该题和 黑书 P102 采矿 类似 参考链接:http://blog.csdn.net/shiqi_614/article/details/7819232http://blog.csdn.net/ts ...

  8. ＳＱＬ技术内幕－5 比较特殊 insert into 数据的写法

    ---比较特殊,第一次看到这种写法,记录下来 create table Student --学生成绩表 ( id int, --主键 Grade int, --班级 Score int --分数 ) ...

  9. 传说中的WCF（4）：发送和接收SOAP头

    如果你实在不明白Header是个啥玩意儿,你就想一想你发送电子邮件时,是不是有个叫“附件”的东东?对啊,那么SOAP头是不是可以理解为一种附加信息?就是附加到消息正文的内容. 消息正文又是啥?WCF除 ...

  10. SSH开发实践part1：Spring与Hibernate整合

    1 之前把SSH看完了,现在从头开始进行项目实践.现在讲整个过程中的点滴记录下来,希望对后来者有参考. 2 SSH是一个轻量级的java开发框架,struts负责MVC开发模式中的controller ...