zoukankan      html  css  js  c++  java
  • 前端如何引入vConsole

     

    很多文章讲述不是很到位,就记录一下 vconsole 的使用和注意点。

    为什么要使用 vconsole.js ?

    因为手机或者平板之类的客户端软件并没有控制台,前端开发想看log日志比较麻烦,如果一直弹窗alert方法实在太挫了。所以腾讯开发了这个 js 插件。

    注意点

    vconsole 这个插件源码里面是依赖 html dom api 来实现的,如果你所使用的的环境不支持 dom,与原有的浏览器内核有差异,可能无法使用。一般的 web-view 嵌套网页是可以用的,或者手机浏览器都是OK的。如果是小程序或者第三方软件解析html需要查看一下原理。至于微信小程序为什么有,因为别人就是内置的,自己写适配了自己。

     

    如何使用引入?

    提示:官方源代码地址 :  https://github.com/Tencent/vConsole/blob/dev/README_CN.md

    1. 使用 cdn 方式引入,这里列举了所有版本的 js 地址,可以随意选择一个版本复制引入。https://www.bootcdn.cn/vConsole/。然后在页面 <head> 里面加入初始化代码。举例如下:

    1.  
      <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    2.  
      <script>
    3.  
      // 初始化
    4.  
      var vConsole = new VConsole();
    5.  
      console.log('Hello world');
    6.  
      </script>

    为什么要在head引入,这样能尽量将你所有的的console都打印出来,vconsole原理是只有 new 初始化的时候才会插入dom,并改写监听console方法。

     

    2. 使用 es6 webpack 引入。

    1.  
      npm install vconsole
    2.  
      或者
    3.  
      cnpm install vconsole
    4.  
      或者
    5.  
      yarn add vconsole
    6.  
       
    7.  
      然后设置个环境变量作为区分线上线下环境,比如:
    8.  
       
    9.  
      import VConsole from 'vconsole';
    10.  
       
    11.  
      const isDebug = true;
    12.  
      // 本地开发调试注入vConsole
    13.  
      if (isDebug) {
    14.  
      new VConsole();
    15.  
      }

    至此完美。

  • 相关阅读:
    【C语言学习】-08 指针
    【C语言学习】-07 结构体
    【C语言学习】-06 函数
    百度地图添加大头针和视图
    ios8中修改的 推送和地图
    ios 有关设备信息
    详解Objective-C runtime
    IOS7 ~ Xcode5 制作 framework
    IOS 取消表格单元格 TableViewCell 去掉高亮状态 点击Cell取消选择状态
    验证码设计(转)
  • 原文地址:https://www.cnblogs.com/ysx215/p/13797386.html
Copyright © 2011-2022 走看看