网页真机调试之Browsersync简介
以前的调试方式
- 修改完项目文件(html、js、css等)后保存,在浏览器刷新页面查看修改后的效果
- 本地开启一个 tomcat 服务,修改文件后保存刷新页面,移动端或其他 pc 则需要输入 ip + 文件路径进行调试
传统调试页面的缺点是每次修改完代码,需要在相关设备上 F5 刷新下页面才能看到刷新后的效果,多个页面窗口的话还需要切换页面刷新查看效果,基于此,网页真机调试利器-Browsersync 呼之欲出。
什么是 Browsersync?
- 能够使浏览器快速、实时响应文件的修改
- 可以同时在 PC、手机、平板等设备上进行调试
- 不用在多个设备、多个浏览器之间来回切换,频繁刷新页面,更神奇的是在一个设备或浏览器的各种行为(滚动、点击等),也会同步到其他设备或浏览器
- 可以通过可视化界面控制
- 无论是前端工程师还是后端工程师,使用后将提高30%的工作效率
如何使用 Browsersync?
- 安装 Node.js
Browsersync 是基于 Node.js 的, 是一个 Node 模块,需要先安装 Node.js - 安装 Browsersync
- 全局安装,在任何目录下都可以使用
npm install -g browser-sync
- 结合 gulpjs 或 gruntjs 构建工具来使用,在您需要构建的项目里运行下面的命令
npm install --save-dev browser-sync
- 全局安装,在任何目录下都可以使用
- 启动 Browsersync
- 如果仅仅监听某一个文件的修改则在该文件目录下执行启动命令
--files 路径是相对于运行该命令的项目(目录)browser-sync start --server --files "css/*.css"
--files 路径是相对于运行该命令的项目(目录)browser-sync start --server --files "css/*.css, *.html"
如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件browser-sync start --server --files "**/*.css, **/*.html"
- 如果仅仅监听某一个文件的修改则在该文件目录下执行启动命令
- 如果已经有本地服务器环境,需要使用代理模式,主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
官方文档地址:http://www.browsersync.cn/
网页真机调试之Browsersync简介的更多相关文章
- iOS真机调试——Certificates, Identifiers &Profiles 简介
Certificates, Identifiers &Profiles 简介 每次到这个页面,我都不知道这几个选项是干啥的,我相信有很多同学跟我一样,所以首先我们就来先介绍下Developer ...
- 如何实用便捷的在本地真机调试WEB端HTML5网页
先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...
- XE7 & IOS开发之开发账号(2):发布证书、发布授权profile的申请使用,附Ad hoc真机调试、生成ipa文件演示(XCode所有版本通用,有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...
- 真机调试之android手机+chrome
真机调试之android手机+chrome 虽然chrome上的移动设备模拟器很强大,但是在真机运行的时候,总会遇到一些小问题,这时就需要使用真机调试了. 第一步:准备一台android手机,并在手机 ...
- IOS 真机调试以及发布应用 1
参考网站:http://my.oschina.net/u/1245365/blog/196263 Certificates, Identifiers &Profiles 简介 Certif ...
- 真机调试方法- IOS/Android移动设备
真机调试 调试安卓 方法一 开启手机的USB调试 安装运行项目 使用chrome步骤如下图 打开开发者工具 打开设备管理 选择设备进行debug 方法二: 直接在地址栏输入chrome://inspe ...
- HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- [How to] 真机调试
1.简介 真机调试介绍. 在xcode7之前需要每年99刀的代价才能活着开发者权限并能够在真机上调试,现在如果单纯的想在真机上调是就不必花这个钱了. 2.步骤 完毕.
- iOS真机调试 for Xcode 5
由于Xcode5的到来,关于iOS软件进行真机调试方面,有了一些变化,苹果在Xcode 5中修改了一些规则,一方面是阻止以往破解的方式进行调试(免证书).另一方面是添加了自动生成证书的功能特性,来加快 ...
随机推荐
- vue 特点
1.双向绑定 v-model 2.组件化 页面扩展 单文件组件 js css html 都在一个文件中 好处:前端组件化的突破性设计 scoped限制css的渲染,防止污染 lang 定义预处理器 ...
- mybatis源码解析之Configuration加载(二)
概述 上一篇我们讲了configuation.xml中几个标签的解析,例如<properties>,<typeAlises>,<settings>等,今天我们来介绍 ...
- 磁盘挂载方法 fdisk parted
1创建磁盘分区 [root@web01 ~]# fdisk -cu /dev/sdc -c 关闭dos兼容模式-u 使用扇区进行分区 (默认位柱面)[root@web01 ~]# partprobe ...
- SQL语句:如何让字符串转化数字
和前端联调的时候,突然出现一个状况,新增数据的时候,一直报系统错误,写下此文,留以后反复温习.菜鸟程序员一名~ 项目内容:新增产品信息 具体实现:1 获取基础信息,创建产品(调用接口传入的产品类型,如 ...
- AX视图View中添加静态方法
public static server str EcoResCategoryName(){ DictView dv = new DictView(tableNum("ViewNam ...
- HTML中data-* 属性
使用 data-* 属性来嵌入自定义数据: <ul><li data-animal-type="bird">Owl</li><li dat ...
- Quartz 2.2 动态添加、修改和删除定时任务
QuartzManager.Java 动态添加.修改和删除定时任务管理类 import org.quartz.CronScheduleBuilder; import org.quartz.CronTr ...
- 提升算法——Adaboost
思路:通过改变训练样本权重,学习多个分类器,并将这些分类器进行线性组合,提高分类器性能.大多数提升方法都是改变训练数据的概率分布(数据的权值) 强可学习:存在一个多项式的学习算法能够学习他,并且正确率 ...
- Beta阶段冲刺一
Beta冲刺一 1.团队TSP 团队任务 预估时间 实际时间 完成日期 对数据库的最终完善 120 150 12.2 对学生注册功能的完善--新增触发器 150 140 11.29 对教师注册功能的完 ...
- SLAM for dummies中文翻译
1.简介 本文的主要目的是简单介绍移动机器人领域中广泛应用的技术SLAM(同步定位与地图绘制)的理论基础以及应用细节.虽然目前存在很多关于SLAM技术的方方面面的论文,但是对于一个新手来说,仍然需要花 ...