内嵌h5调试神器-vConsole

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板,可用于APP内嵌H5及其他调试H5的地方。

使用

方法一:cdn 方式引入
// 引入

  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');

方法二:npm方式引入
npm install vconsole

import Vconsole from 'vconsole'
// Vue全局调用
if (测试环境) {
  const vConsole = new Vconsole()
  Vue.use(vConsole)
}

打印

加载 vConsole 后,日志会同时打印到页面vConsole前端+原生控制台。

// 与原生一致即可,支持原生的各种属性:info、error等
console.log('Hello World');

方法

//当前 vConsole 的版本号。
vConsole.version
//显示 vConsole 主面板
vConsole.show()
//隐藏 vConsole 主面板
vConsole.hide()
//析构一个 vConsole 对象实例,并将 vConsole 面板从页面中移除。
var vConsole = new VConsole();
vConsole.destroy();
//显示 vConsole 的开关按钮。
vConsole.showSwitch()
//隐藏 vConsole 的开关按钮
vConsole.hideSwitch()
...

结言

以上内容即可轻松完成H5基本调试需求,如有深入要求建议详细阅读文档。
Gitee|腾讯开源vConsole
Github | 腾讯开源vConsole

Original: https://www.cnblogs.com/zh1q1/p/15263456.html
Author: 吴知木
Title: 内嵌h5调试神器-vConsole

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/599503/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球