在移动端网页开发中，总是因为不方便调试，导致各种问题不容易被发现。但是现在有了Browsersync，一切都解决了。

不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网。

五分钟快速入门

1.使用Browsersync前需要安装node.js。详细的安装过程可参见windows 下安装nodejs

2.安装Browsersync。打开一个终端窗口，运行以下命令：npm install -g browser-sync

3.启动 BrowserSync。

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

首先由终端窗口进入该.css文件的项目目录，再输入以下命令行：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"

此时只需要将手机连接到与PC相同的网络中，用手机浏览器扫描打开网页，即可实现同步调试。

如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"

PC和移动端浏览器同步测试工具Browsersync使用介绍的更多相关文章

  1. 省时的浏览器同步测试工具 browsersync NodeJS

    http://www.browsersync.cn/ 省时的浏览器同步测试工具 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 ...

  2. BrowserSync - 浏览器同步测试工具

    背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装:   // 使用淘宝镜像会快些 npm install -g ...

  3. mac安装浏览器同步测试工具

    1.安装node.js (1)打开终端,输入以下命令安装Homebrew ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebre ...

  4. Browsersync — 省时的浏览器同步测试工具

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  5. BrowserSync(省时的浏览器同步测试工具)

    第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...

  6. Browsersync 省时浏览器同步测试工具，浏览器自动刷新，多终端同步

    官网地址 http://www.browsersync.cn/ 1.安装 BrowserSync npm install -g browser-sync 2.启动 BrowserSync // --f ...

  7. 浏览器同步测试神器 — BrowserSync

    Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当 ...

  8. REST client 基于浏览器的测试工具

    以前在开发webservice服务,都是自己基于HTTP协议,自己写一个测试程序来进行测试,最近在研究RestFul,对以前webservice服务进行了重构,总结了不少经验,今天就给大家介绍下几款R ...

  9. Android WebDriver 浏览器自动测试工具介绍

    Selenium WebDriver 是浏览器自动测试工具,提供轻量级和优雅的方式来测试web应用.Selenium WebDriver作为Android SDK extra,支持Android 2. ...

随机推荐

  1. 管理员 修改MySQL 5.7.9 新版本的root密码方法以及一些新变化整理

    MySQL 5.7版本开始,增强密码验证机制,网上说安装的时候会在/root/.mysql_secret  文件中生成默认密码,这一点自 5.7.6版本以后也去掉了. 针对如果生成默认密码,网上有一个 ...

  2. OC学习－1

    编译和编写代码. 1. 创建代码文件夹 mkdir lession2 2. 新建类文件 touch lession2.m 3. 打开编写代码,(会用xcode打开) open lession2.m 4 ...

  3. C# 乘法口诀表的实现方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 乘法运算 ...

  4. java作用域public ,private ,protected 及不写时的区别(转)

    在说明这四个关键字之前,我想就class之间的关系做一个简单的定 义,对于继承自己的class,base class可以认为他们都是自己的子 女,而对于和自己一个目录下的classes,认为都是自己的 ...

  5. C# 添加系统计划任务方案

    你可以在Windows 计划任务管理器里面添加计划任务,调试OK后导出XML文件,然后在要部署的计算机上执行CMD导入命令,把计划任务信息配置导入到服务器上的计划任务列表中,命令如下: SCHTASK ...

  6. 《大话设计模式》ruby版代码：策略模式

    需求: 商场收银软件,根据客户购买物品的单价和数量,计算费用,会有促销活动,打八折,满三百减一百之类的. 一,使用工厂模式. # -*- encoding: utf-8 -*- #现金收费抽象类 cl ...

  7. WPF 超链接方式

      <TextBlock>              <Hyperlink Name="hc" Click="hc_Click"   Navi ...

  8. CheckBox和RadioButton

    多选按钮CheckBox的使用方法和常用的监听器:OnClickListener.OnCheckedChangeListener 在activity_main.xml中使用LinearLayout布局 ...

  9. linux动态库编译和使用详细剖析

    引言 重点讲述linux上使用gcc编译动态库的一些操作.并且对其深入的案例分析.最后介绍一下动态库插件技术, 让代码向后兼容.关于linux上使用gcc基础编译, 预编译,编译,生成机械码最后链接输 ...

  10. MongoDB牛刀小试

    MongoDB基本操作 1.MongoDB的启动 首先创建一个目录作为MongoDB的工作目录: 进入MongoDB的bin目录: 执行mongod命令,使用参数--dbpath指定MongoDB的工 ...