• browser-sync


    引入

    • 大家写网页的时候,肯定都遇到这种情况,每次用sublime写完都要返回浏览器,刷新页面,而这个工具正好解决了这个问题,提高前端开发效率,这是一个npm的包 browser-sync

    browser-sync的基本使用

    • 作用:文件保存一下,就会自动监视文件变化,自动刷新浏览器
    • 打开cmd,输入以下命令
    全局安装:npm install -g browser-sync        //-g是全局安装
    
    • 注意:安装完之后,一定要切换到你要监视的项目下执行下面的代码
     browser-sync start --server --files "*.html”      //执行完这句之后,会自动帮你打开浏览器http://localhost:3000
    
    • 解释一下 start表示启动 --server表示已经启动的http服务 --files后面是你要监视的文件名,*.html表示你要监视这个项目下的所有后缀为.html的文件

    • 若是你想监视指定文件,就直接写文名就好,例如:browser-sync start --server --files "index.html ,就是把*改成具体的

    browser-sync的深入使用

    browser-sync的能力不仅仅如此,实现了无刷新。

    • 能够做兼容性测试:对不同的浏览器,它能够同步操作,当你想要测兼容性的时候,你把所有浏览器都打开,放在不同的屏幕上,然后操作一个就可以啦
    • 这个browser-sync还有一个更实用的功能对于移动端的开发
      • 在命令行弹出的地址,有两个端口号,除了这个http://localhost:3000,还有一个http://localhost:3001
      • 访问一下http://localhost:3001,就会出现一个界面,这是一个管理的后台,点击左侧边栏的sync options,里面的选项是可以选择的,举个例子:如果你把Scroll的按钮关掉。那么这各个浏览器之间就不会同步了
      • 可以做移送端的调试,移动端有什么弊端呢,我们右键检查元素,可以看dom元素,也可以看控制台的输出,
        • 但是移动端的能这么看吗?答案肯定是不能,虽然谷歌有手机的模拟器,可以这么看,但是在真实开发中,肯定要用真机去测试,在你测试的时候,可能会出现这样的问题,这个在电脑上测试的ok,但是在手机上怎么不行了呢,这就是兼容器问题,那么,想知道特别是调样式的时候,就想知道是哪些属性不可以
        • 所以这里有一款工具Remote Debug,然后点击第一项Remote Debugger (weinre),点击下面的字,就会跳转到另一个页面。里面就跟浏览器里面差不多,有elements,console等,你就可以在里面查看啦
  • 相关阅读:
    配置 jvisualvm 监控Java虚拟机
    配置 IDEA 远程连接应用服务器
    Java虚拟机知识点【工具】
    Java虚拟机知识点【参数】
    Java虚拟机知识点【GC】
    Java虚拟机知识点【方法调用】
    Java虚拟机知识点【字节码】
    [NOIP2017]逛公园 题解
    [CSP-S模拟测试72]题解
    [CSP-S模拟测试69]题解
  • 原文地址:https://www.cnblogs.com/onlychen/p/6259525.html
Copyright © 2020-2023  润新知