前端如何引入vConsole

最新推荐文章于 2024-05-17 08:55:58 发布

置顶 xuyanquan

最新推荐文章于 2024-05-17 08:55:58 发布

阅读量4.5w

点赞数 15

分类专栏： javascript plugin 文章标签： js javascript

本文链接：https://blog.csdn.net/xuyanquan/article/details/105530615

版权

javascript 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

plugin

2 篇文章 0 订阅

订阅专栏

很多文章讲述不是很到位，就记录一下 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> 里面加入初始化代码。举例如下：

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

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

2. 使用 es6 webpack 引入。

npm install vconsole
或者
cnpm install vconsole
或者
yarn add vconsole

然后设置个环境变量作为区分线上线下环境，比如：

import VConsole from 'vconsole';

const isDebug = true;
// 本地开发调试注入vConsole
if (isDebug) {
    new VConsole();
}

至此完美。

关注微信公众号

xuyanquan

关注

15
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
前端如何引入vConsole

很多文章讲述不是很到位，就记录一下vconsole 的使用和注意点。为什么要使用 vconsole.js ?因为手机或者平板之类的客户端软件并没有控制台，前端开发想看log日志比较麻烦，如果一直弹窗alert方法实在太挫了。所以腾讯开发了这个 js 插件。注意点vconsole 这个插件源码里面是依赖 html dom api 来实现的，如果你所使用的的环境不支持 dom，与原有...
复制链接

扫一扫