以前的调试方式

  • 修改完项目文件（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简介的更多相关文章

  1. iOS真机调试——Certificates, Identifiers &Profiles 简介

    Certificates, Identifiers &Profiles 简介 每次到这个页面,我都不知道这几个选项是干啥的,我相信有很多同学跟我一样,所以首先我们就来先介绍下Developer ...

  2. 如何实用便捷的在本地真机调试WEB端HTML5网页

    先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...

  3. XE7 & IOS开发之开发账号（2）：发布证书、发布授权profile的申请使用，附Ad hoc真机调试、生成ipa文件演示（XCode所有版本通用，有图有真相）

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  4. 真机调试之android手机+chrome

    真机调试之android手机+chrome 虽然chrome上的移动设备模拟器很强大,但是在真机运行的时候,总会遇到一些小问题,这时就需要使用真机调试了. 第一步:准备一台android手机,并在手机 ...

  5. IOS 真机调试以及发布应用 1

    参考网站:http://my.oschina.net/u/1245365/blog/196263   Certificates, Identifiers &Profiles 简介 Certif ...

  6. 真机调试方法- IOS/Android移动设备

    真机调试 调试安卓 方法一 开启手机的USB调试 安装运行项目 使用chrome步骤如下图 打开开发者工具 打开设备管理 选择设备进行debug 方法二: 直接在地址栏输入chrome://inspe ...

  7. HBuilder开发App Step1——环境搭建，HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  8. [How to] 真机调试

    1.简介 真机调试介绍. 在xcode7之前需要每年99刀的代价才能活着开发者权限并能够在真机上调试,现在如果单纯的想在真机上调是就不必花这个钱了. 2.步骤 完毕.

  9. iOS真机调试 for Xcode 5

    由于Xcode5的到来,关于iOS软件进行真机调试方面,有了一些变化,苹果在Xcode 5中修改了一些规则,一方面是阻止以往破解的方式进行调试(免证书).另一方面是添加了自动生成证书的功能特性,来加快 ...

随机推荐

  1. Java Spring 在线程中或其他位置获取 ApplicationContext 或 ServiceBean

    部分一转载自:http://blog.csdn.net/yang123111/article/details/32099329 via @yang123111 部分二转载自:http://www.cn ...

  2. egret贝塞尔曲线运动

    class MtwGame { public constructor() { } private static _instance: MtwGame; public static get Instan ...

  3. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...

  4. Asp .Net Core Spa (二) - 服务器渲染1

    Server Side Rendering 服务器渲染是各 Spa 项目目前很热衷于解决的一个问题,毕竟针对SEO和首次加载优化 .Net Core SPA 服务器渲染 将分为 两篇: 第一篇 主要分 ...

  5. 1.4 SQL函数

    1.调用聚合函数 sum:返回所有值的和/非重复数据的和 avg:平均数且忽略空值 min:最小值 max:最大值 count:计数函数 distinct:去不重复记录 2.数学函数 abs:绝对值 ...

  6. Java EE设计模式（主要简单介绍工厂模式，适配器模式和模板方法模式）

    Java EE设计模式分为三种类型,共23种: 创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式. 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式 ...

  7. python单列模式

    单例模式:就是永远用一个对象的实例 初级版 #初级版 class Foo(object): instance=None def __init__(self): pass @classmethod # ...

  8. tcl实现批量压缩文件夹

    tcl脚本本身对字符串的处理比较简单,所以想着用这个也实现下: proc main {} { puts "请输入路径:" set strpath "E:\\123&quo ...

  9. my first homepage

    <!DOCTYPE html><html><head><style type="text/css">p{ text-indent:2 ...

  10. <html> ---- position

    position 固定的属性,是全局的.和DIV层次无关. <!DOCTYPE html> <html lang="en"> <head> &l ...