vconsole：手机端h5调试工具

最新推荐文章于 2024-07-16 11:44:45 发布

qq_38969618

最新推荐文章于 2024-07-16 11:44:45 发布

阅读量954

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_38969618/article/details/129161636

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章介绍了如何在项目中使用vConsole这一移动端调试工具。可以通过npm安装或CDN引入，在Vue项目中使用。vConsole提供了一个在手机端查看和操作console的方法，方便开发者调试。在完成调试后，可以销毁实例。上线时，记得移除vConsole以优化性能。

摘要由CSDN通过智能技术生成

1、官网使用教程： https://gitee.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

一、使用方法

npm安装

npm install vconsole

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数进行初始化
const vConsole = new VConsole({ theme: 'dark' });

// 调用 console 方法输出日志
console.log('Hello world');

// 完成调试后，可销毁 vConsole
vConsole.destroy();

2、cdn引入

如在vue项目中，在public/index.html中添加如下代码即可：

<head>
    ...
     <!-- 手机端调试工具，上线时，务必注释 ！！！ -->
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
</head>
<body>
    ...
    <!-- 手机端调试工具，上线时，务必注释 ！！！ -->
    <script>
     let vConsole = new VConsole();
    </script>
</body>