vConsole打印信息

vconsole介绍

• vConsole，是腾讯在 Github 上开源的移动端的前端开发者调试工具，项目位于 https://github.com/Tencent/vConsole，目前版本为 3.3.4。vConsole 使用 JAVAScript/TypeScript 编写，在前端项目中引用后，可以在网页中嵌入一个利用前端渲染的开发工具工具箱，提供一个类似于 PC 浏览器所提供的原生的开发者调试工具，功能包括：

1. Log：日志输出和命令行，包括不同等级日志的子面板
2. System：请求信息，以及系统日志
3. Network：网络抓包和分析
4. Element：页面DOM元素代码检查
5. Storage：Cookies、LocalStorage 和 SessionStorage

安装方法

• 可以直接下载项目所提供的发行版的代码，或使用 NPM 安装：
• npm install vconsole

使用方法(npm)

import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ theme: 'dark' });

// call `console` methods as usual
console.log('Hello world');

// remove it when you finish debugging
vConsole.destroy();

使用方法(html)

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

配置项

• vConsole 支持不同级别的日志，以不同的颜色输出到前端面板：

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

总结

• vConsole 为在移动端的前端开发提供了一个功能丰富的开发者调试工具，使得在手机上也能够完成基本的代码调试工作，且安装使用简单，可扩展性强，极大地提高了开发效率。vConsole 是一个十分值得关注的开发工具项目，目前已处于稳定维护阶段，值得前端开发者进行代码阅读和研究，并进行相关插件的开发。