当前位置: 主页 > 日志 > 个人日记 > 文章

vConsole手机打印日志查看

发布时间: 2025-04-24 14:17:05 作者: 王乐园 浏览次数: 21

vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件


使用

1:js直接引用,下载最新版https://github.com/Tencent/vConsole/releases/latest

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

2:npm下载

npm install vconsole -S
在main.js中:
import VConsole from 'vconsole'
const vConsole = new VConsole()
Vue.use(vConsole)
console.info("vconsole-info-测试")

3、webpack 版插件

npm install vconsole-webpack-plugin -D

//在vue.config.js中设置:
configureWebpack: config => {
    config.plugins.push(
        //手机端调试
        new vConsole({
        filter: [],     // 需要过滤的入口文件
        enable: isVConsole === true      // 生产环境不打开
        })
    )
}

4. 打印日志

与 PC 端打印 log 一致,可直接使用 console.log() 等方法直接打印日志:

console.log('Hello World');

未加载 vConsole 模块时,console.log() 会直接打印到原生控制台中;加载 vConsole 后,日志会打印到页面前端+原生控制台。

日志类型

支持 5 种不同类型的日志,会以不同的颜色输出到前端面板:

console.log('foo');   // 白底黑字
console.info('bar');  // 白底紫字
console.debug('oh');  // 白底黄字
console.warn('foo');  // 黄底黄字
console.error('bar'); // 红底红字

支持以下 console 方法:

console.time('foo');    // 启动名为 foo 的计时器
console.timeEnd('foo'); // 停止 foo 计时器并输出经过的时间

Object/Array 结构化展示
支持打印 Object 或 Array 变量,会以结构化 JSON 形式输出(并折叠):

var obj = {};
obj.foo = 'bar';
console.log(obj);

多态
支持传入多个参数,会以空格隔开:

var uid = 666;
console.log('UserID:', uid); // 打印出 UserID: 233

6:公共属性及方法

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


vConsole.option配置项。

// get
vConsole.option // => {...}
// set
vConsole.setOption('maxLogNumber', 5000);
// 或者:
vConsole.setOption({maxLogNumber: 5000});

本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: