基于nodejs的前端调试工具browser-sync入门

原创 2016年08月29日 21:25:28

1 - 关于browser-sync

browser-sync是一个基于nodejs的一个插件,用于前端调试,好处是该插件可以同步一个网段内的所有页面,比方说,假如你要做一个响应式的网页的时候,该插件就可以节省非常多的时候,例如,你要调试iPhone5,iphone6,iPhone6s,ipad,三星等设备的分辨率。

1-1
 这里假设有真机和没有真机的情况,假如有真机,我们通过pc端的iis发布一个静态页面,再用真机连接我们主机的ip,这样来调试我们的页面有没有出现异常.
 这样我,我们每保存一次代码,就去真机刷新一次,累都累死啦。。。
1-2
 这里假设我们没有真机,我们用chrome浏览器来模拟手机的分辨率,那么也是累死人的节奏,没保存一遍,到处刷新再看效果,简直是在虐待前端

解决方案就是使用browser-sync

2 - browser-sync的安装

2-1
首先先安装nodejs和npm,至于怎么安装,这里就不展开了。
2-2
然后安装browser-sync,这里使用npm来安装

npm install -g browser-sync

就是这样简单的一句话,前提是nodejs和npm得安装成功

这里写图片描述
这里的代码是通过dos来使用的,这里的指令是来显示browser-sync的版本的,如图所示

3 - browser-sync的使用

3-1
既然安装好了,那么我们就来使用它,我们可以通过dos的方式来使用它,dos的正确打开方式是win键+R键
同时按上这两个键会弹出一个小窗口,在输入框输入cmd,可以进入dos系统,这里进行一个简单的dos指令学习
cd 指的是要跳转到哪个路径
cd.. 后面加上两个点是跳转上一个路径,至于盘符的跳转就更容易些," G: ",这个g加上冒号的就可以跳到G盘

那好,假如我们现在有一个项目在G盘的project文件夹,项目的首页是index.html,此外还有css文件夹以及里面的css文件
那我们怎么使用browser-sync呢?
3-2
首先我们得跳到我们的G盘,根据我们前面的学习,在黑压压的dos写上" G: ",回车就跳转到G盘了,
如果我们要查看G盘的文件,可以用命令 "dir" ,另外可以加参数 /w ,这个意思是分列的形式来显示文件,
完整写法 dir/w ,这样就可以看见G盘有什么文件.

那我们现在可以用cd project 这个命令跳转到project文件夹    
3-3
那现在我们已经跳转到project文件夹,开始进入正题

同样是命令 browser-sync start --server --files "css/*.css"

     解释 start  这是必带的一个参数
         --server 运行本地服务器,也就是将你的电脑作为一个服务器,一般是局域网
         --files 就是你运行这条命令的路径的简称,后面的参数就可以不用写那么长
         "css/*.css" 这个参数是和--files命令一起使用的,*是指css文件夹下的所有css文件,也就是对这些文件进行监控,这些文件一旦改变,就刷新页面

    那么这条命令的作用就用于对css文件的监控,以及文件改变的话,就刷新页面
3-4
browser-sync start --server --files "css/*.css,*.html"
这命令增加了*.html,意思是对所有html文件的监控
3-5
browser-sync start --server --files "css/*.css,*.html" --browser "chrome"
这条命令增加了 --browser "chrome",意思是指定对应的浏览器打开文件,这里指定了chrome浏览器
3-6
browser-sync start --server --files "css/*.css,*.html" --index "index.html" 
这条命令增加 --index "index.html"意思是在很多页面中指定index.html页面为起始页

4- 结语

browser-sync的命令不止这些,详情可以看

    http://www.browsersync.cn/docs/command-line/

对了,browser-sync的中文官网是

    http://www.browsersync.cn

nodejs,async同步执行方法

nodejs,async同步执行方法

NodeJS实现同步的方法

NodeJS被打上了单线程、非阻塞、事件驱动…..等标签。 在单线程的情况下,是无法开启子线程的。经过了很久的研究,发现并没有thread函数!!!但是有时候,我们确实需要“多线程”处理事务。nod...

用browser-sync进行实时刷新

1.添加gulp、gulp-sass、browser-sync组件npm install --save-dev gulp gulp-sass browser-sync会在package.json中添加...
  • attwice
  • attwice
  • 2015年12月23日 10:58
  • 2942

一款很好用的调试JS的Eclipse插件

1. Javascript Debug Toolkit介绍 JSDT(Javascript Debug Toolkit)是一个用于javascript调试的eclipse 插件,用于调试javasc...

HBuilder代码调试

调试方式介绍一 边改边看 模拟器 调试 边改边看 HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。 系列文章目录导航: ...
  • wzb1412
  • wzb1412
  • 2016年07月13日 16:38
  • 12764

browser-sync自动刷新-前端利器

browser-sync自动刷新链接:这是一个神器,相比LiveRoad使用比较简单,建议做前端开发的同学,不要犹豫和观察,赶紧装上释放你的F5吧。以下来自己browser-sync中文网的介绍和使用...
  • jrn1012
  • jrn1012
  • 2016年10月08日 18:18
  • 2258

省时的浏览器同步测试工具browser-sync服务搭建

先去nodejs官网下载pkg文件直接安装,有兴趣的也可以使用以下方法 Get source & make Homebrew nvm Other - 在桌面新建文件react cd ~/Deskt...
  • Toxic07
  • Toxic07
  • 2015年12月27日 16:16
  • 721

微信内移动前端开发抓包调试工具fiddler使用教程

 [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程 2015-03-14 19:20:59 by 恩波 222 2 在朋友圈看到一款疯转的...
  • xpb1980
  • xpb1980
  • 2015年05月05日 14:32
  • 2601

Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...

[微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程

在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~ 使用fiddler来抓包 需要先做一些简...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于nodejs的前端调试工具browser-sync入门
举报原因:
原因补充:

(最多只允许输入30个字)