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. 用c语言产生随机数的方法

    用c语言产生随机数的方法 在C语言中,rand()函数可以用来产生随机数,但是这不是真正意义上的随机数,是一个伪随机数,是根据一个数,我们可以称它为种子,为基准以某个递推公式推算出来的一系数,当这系列 ...

  2. YARN-RPC

    运行在YARN平台上面的RPC. 当前存在非常多的开源RPC框架,比较著名的有Thrift.Protocol Buffers 和 AVRO.他们均有两部分构成:对象序列化和远程过程调用. 重要类: Y ...

  3. spring 两个 properties

    A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块的Spring配置文件如下: <?xml version="1.0" enc ...

  4. POJ 3525 Most Distant Point from the Sea （半平面交向内推进+二分半径）

    题目链接 题意 : 给你一个多边形,问你里边能够盛的下的最大的圆的半径是多少. 思路 :先二分半径r,半平面交向内推进r.模板题 #include <stdio.h> #include & ...

  5. Linux之select系统调用_2

    在上一篇博文中,我们的程序中我们有3个客户端,因此也事先建立了3个管道,每个客户端分别使用一个管道向服务器发送消息.而在服务器端使用select系统调用,只要监测到某一管道有消息写入,服务器就将其re ...

  6. mysql之视图

    视图      视图是虚拟的表.与包含数据的表不一样,视图只包含使用时动态检索数据的查询. 理解视图最好的办法就是来看一下例子: SELECT cust_name , cust_contact FRO ...

  7. x64 结构体系下的内存寻址

    欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4735027.html 在阅读NewBluePill源码的时候,看内存的那一块简直头疼,全是x6 ...

  8. Java Applet与Java Application的特点

    java application是应用程序,用于桌面开发,java applet是小应用程序,一般嵌入到网页里运行.applet一般用于B/S页面上作为插件式的开发,而application主要是桌面 ...

  9. 李洪强漫谈iOS开发[C语言-043]-练习

    李洪强漫谈iOS开发[C语言-043]-行李重量计算价格

  10. Centos环境下部署游戏服务器－iptables

    简介:   图1        Centos做为服务器级操作系统,防火墙是不可缺少的.防火墙的主要功能为控制进出网络包,防火墙就如小区门卫的工作职责,检查出入小区居民的身份,如果不符合小区门卫管理条例 ...