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. 6 高级IO函数

    6.1 pipe函数 pipe函数创建一个管道,用于实现进程间通信 #include<unistd.h> ]); 参数包含两个文件描述符fd[0]和fd[1],往fd[1]写入的数据可以从 ...

  2. kerberos+ladp+hadoop-ha 安全认证部署配置

    随着hadoop集群里的数据量越来越大,各业务数据都集中了里面,自然要为各业务都要提供数据支持,又希望各业务数据是相对独立安全的,这最时候就需要做安全认证了 hadoop ha 测试集群部署规划 ha ...

  3. 全栈式JavaScript

    如今,在创建一个Web应用的过程中,你需要做出许多架构方面的决策.当然,你会希望做的每一个决定都是正确的:你想要使用能够快速开发的技术,支持持续的迭代,最高的工作效率,迅速,健壮性强.你想要精益求精并 ...

  4. POJ 1661 Help Jimmy （dijkstra，最短路）

    刚在百度搜索了一下这道题的题解, 因为看到有别人用动态规划做的,所以想参考一下. 结果顺带发现了有那么几个网站,上面的文章竟然和我这篇一模一样(除了一些明显的错别字外),我去,作者还是同一个人Admi ...

  5. ubuntu安装 scala

    1. 配置路径 sudo gedit /etc/profile 2.在文件后面加入 export PATH=/home/sendi/scala-/bin:$PATH 3.更新 source /etc/ ...

  6. java 如何连接MySql数据库

    利用jdbc方式连接数据库. 1.添加mysql驱动jar包 我用的是这个驱动包mysql-connector-java-5.1.26-bin.jar 添加方式: 2.加载MySql驱动类 priva ...

  7. hdu 3271 SNIBB 数位DP+二分

    思路:dp[i][j]:表示第i位在B进制下数字和. 用二分找第k个数! 代码如下: #include<iostream> #include<stdio.h> #include ...

  8. 解析Java中静态变量与实例变量的区别

    java类的成员变量有俩种:一种是被static关键字修饰的变量,叫类变量或者静态变量:另一种没有static修饰,为实例变量.      在语法定义上的区别:静态变量前要加static关键字,而实例 ...

  9. ios--集成支付宝钱包支付iOS SDK的方法与经验

    文/胖花花(简书作者)原文链接:http://www.jianshu.com/p/fe56e122663e著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 没想到,支付宝的SDK是我目前 ...

  10. c语言中argc和argv是什么意思？

    argc是参数个数,定义为intargv是字符串数组,存的是参数,定义为char**或者char* argv[]比如你编译好的程序为my.exe在命令行执行 my.exe 1 2 3那argc就是4, ...