vConsole——移动端调试面板

---

引言

通常在开发 web 页面时，可以打开浏览器的调试器来帮助开发，提高 debug 的效率。那么在开发移动端时，如何看到打印的日志和网络的请求呢，那就需要用到本文的主角——vConsole。

介绍

一个轻量、可拓展、针对手机网页的前端开发者调试面板。
vConsole 是与框架无关的，可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具。

功能特性

• 日志（Logs）: console.log
• 网络（Network）
• 节点（Element）: HTML 节点数
• 存储（Storage）: Cookies, LocalStorage, SessionStorage
• 手动执行 JS 命令行
• 自定义插件
  功能图如下：
  

使用教程

方法一：使用 npm （推荐）

$ npm install vconsole

import VConsole from 'vconsole';

const vConsole = new VConsole();

方法二：使用 CDN 直接插入到 HTML

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

可用的 CDN：

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js