学习啦>学习电脑>电脑安全>局域网安全>

Browsersync浏览器同步测试工具

时间: 林泽1002 分享

  browsersync可以实时监控代码文件的修改(html、css、js、less等等),文件被保存发生变化的时候browsersync可以自动刷新页面,免去手动F5的麻烦步骤。下面是学习啦小编跟大家分享的是Browsersync浏览器同步测试工具,欢迎大家来阅读学习。

  Browsersync浏览器同步测试工具

  什么是browsersync?

  browsersync可以实时监控代码文件的修改(html、css、js、less等等),文件被保存发生变化的时候browsersync可以自动刷新页面,免去手动F5的麻烦步骤。更重要的是,browsersync利用nodejs的特性创建一个临时的可访问的服务器,方便在局域网内使用手机,平板电脑等其他移动设备进行实时的调试。

  sync-demo.gif

  scroll-demo.gif

  如何安装browsersync?

  1.安装nodejs

  https://nodejs.org 登录nodejs官方网站下载最新的nodejs,无论是mac os windows或者linux nodejs都有很好的安装方式。

  2.安装browsersync

  打开命令提示符或者terminal输入

  npm install -g browser-sync

  进行全局安装,这样就可以在任何一个项目上使用该工具。

  如何使用browsersync?

  静态网站(前端)

  如果是静态网站,在命令提示符的情况下直接cd到静态网站的根目录

  browser-sync start --server --files **

  browsersync就会启动并且打开默认的浏览器,显示项目首页。

  **表示的是监听目录下所有文件。

  browser-sync start --server --files "css/*.css, *.html"

  css/.css, .html表示监听css文件夹下所有的css文件,以及根目录下的所有html文件。

  动态网站(后台)

  如果是动态网站比如php或者python就不能用browsersync自带的服务器启动,需要使用代理模式

  browser-sync start --proxy "主机名" "css/*.css"

  browser-sync start --proxy "jianshu.com" "css/*.css"

  配合npm开发使用

  每次在使用browser-sync的时候打命令太长了非常不方便,为了方便在项目中使用可以结合package.json使用。

  具体方法

  1.进入到项目根目录

  npm init

  创建package.json文件。

  2.打开package.json文件添加配置。

  Paste_Image.png

  在scripts里面填写

  "dev":"browser-sync start --server --files **"

  保存。

  3.打开命令提示符进入到项目根目录

  输入

  npm run dev

  就可以启动browsersync的监听命令。


浏览器同步测试工具相关文章:

1.360极速浏览器怎么添加插件工具

2.高一生物细胞器同步测试题及解析

3.360浏览器怎么同步本地收藏夹

4.qq浏览器如何同步信息

5.如何更改浏览器默认的下载工具和路径

6.QQ浏览器怎么同步信息的

7.qq浏览器怎样同步书签

2752207