鹏展博

外观

vconsole

约 351 字大约 1 分钟

2024-05-05

Browser 微信小程序

概述

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

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

场景

在移动端设备中调试网页是一件比较麻烦的事情，因为缺少了浏览器的调试面板，我们很难直观的看到代码执行发生了 什么错误。

vConsole 旨在解决这个问题，它在页面中注入了一个面板，模拟了浏览器的调试面板，让你可以直观的看到网页的执行情况。 比如 元素、网络请求、日志输出等等。

安装

npm
npm install vconsole

使用

import VConsole from 'vconsole'

const vConsole = new VConsole()
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' })

// 接下来即可照常使用 `console` 等方法
console.log('Hello world')

// 结束调试后，可移除掉
vConsole.destroy()

从 CDN 加载

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

可用的 CDN：

手机预览

效果图

日志输出：

vconsole 1

vconsole 2

网络请求：

vconsole 3

元素：

vconsole 4