How does browsersync work?

  

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。

时间: 2024-11-05 19:25:50

How does browsersync work?的相关文章

前端测试利器--Browser-Sync启动命令

使用browser-sync启动命令 cmd切换到项目的根目录下** 1. browser-sync start --server --files "css/*.css" ---------- **使用两个*检测所有的目录**

使用Browsersync热更新热替换,解放F5

超简单的入门小例子,有图有真相.当然也够我们在项目中使用.先看一下目录结构. 这里就使用了一个html和一个css样式表.接下来如下. 1. 安装 Node.js 不会安装node.js?太落伍了,懒得教你,自行百度吧. 2. 安装 BrowserSync 安装完node.js之后,在命令行输入 npm install -g browser-sync安装成功后. 2. 启动 BrowserSync 运行以下其中一条命令.Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http

Browsersync 简介 and 使用

简介 省时的浏览器同步测试工具,Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 曾经我们每改一次的代码,都需要手动去刷新一次页面,查看我们的改动是否正确:现在,BrowserSync减少了重复的手工任务,这一切都交给BrowserSync去完成. BrowserSync很容易与您的网络平台集成,构建工具和其他Node项目中,例如gulp.grunt. 安装 使用 yarn 安装: yarn add browser-syn

BrowserSync - 浏览器同步测试工具

背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装: // 使用淘宝镜像会快些 npm install -g browser-sync --registry=https://registry.npm.taobao.org 启动: (1)静态网页(服务器模式) 先进入项目目录,然后: // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --file

gulp+browserSync自动刷新页面

BrowserSync "Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您30%的

PC和移动端浏览器同步测试工具Browsersync使用介绍

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. 五分钟快速入门 1.使用Browsersync前需要安装node.js.详细的安装过程可参见windows 下安装nodejs 2.安装Browsersync.打开一个终端窗口,运行以下命令:npm install -g browser-sync 3.启动 BrowserSync. 如果您想要监听

browser-sync配合gulp-less使用

开发前端一直用gulp来做自动化构建. browser-sync插件用的很舒服,开发的时候用一个外接屏幕,把要调试的网页放在外接屏幕上,你只要写完代码(js,css)后,按一下 cmd+s ,就可以直接看见页面效果了. gulp-less,想用less的一些动态语言特性,对css做预处理. 思路是这样子的 :用gulp-watch监控less文件目录,一旦文件发生改变,就进行less预处理操作(转成css文件).这个时候browser-sync检测到css文件发生变化,会自动更新页面.   所以

BrowserSync,调试利器--自动刷新(转

---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码,按下了ctrl+s保存.紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果.你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标... 想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新. 自动刷新 “自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开

browser-sync 的使用(一)

今天发现安装的虚拟机对 browser-sync 启动后生成的 external url 有影响,电脑的 ip 是 192.168.1.100, 但是 browser-sync 给出的是 192.168.56.*, 后者据宁皓网王皓的说法,"应该是虚拟机虚拟出来的网卡". 说来也是巧,在图书馆做实验的时候,发现电脑和手机只有一个可以连上无线,电脑连着手机就自动断线了,手机连着电脑就自动断线了,所以想当然地以为这就是原因,结果回到家发现问题还是一样,使用小米和iPhone都打不开192.

gulp+browserSync+nodemon 实现express 全端自动刷新的实践

学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,