企业官网建设流程全解析

• 💂 个人网站:IT知识小屋
• 🤟 版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主
• 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

简介

vConsole是一款由腾讯开源的轻量级、可拓展移动端前端调试工具，专为手机网页开发者设计。它提供了类似于Chrome DevTools的调试面板，开发者可轻松在移动设备上执行查看日志、网络请求、DOM结构、执行JS命令等操作。

vConsole是框架无关的，支持在Vue、React或其他任何框架中使用，也可用于原生小程序的调试，现在是微信小程序的官方调试工具。

解决痛点

移动端调试困难：在移动端中调试网页时，因无法直接使用PC端的开发者工具，调试效率低下

日志查看困难：传统的alert弹窗方式调试效率低下，无法打印完全调试信息

性能监控缺失：移动端调试缺乏实时监控页面性能指标的工具，难以进行性能优化

功能扩展受限：现有调试工具功能单一，无法自定义拓展，难以满足多样化的调试需求

功能模块

• 日志(Logs)：可实时查看console输出的日志信息，支持不同级别(console.log|info|error|…)的日志过滤。

• 网络请求监控(Network)：监控页面发起的网络请求(XMLHttpRequest, Fetch, sendBeacon)，查看请求和响应的详细信息。

• DOM结构查看(Element)：以节点树形式展示页面的HTML结构。

• 存储数据管理(Storage)：查看和操作Cookies、LocalStorage、SessionStorage等存储数据。

• JS命令行执行：可在vConsole面板中手动执行任意JavaScript命令，进行实时调试。

• 插件扩展：支持自定义插件，扩展vConsole的功能，满足特定场景下的调试需求。

功能截图

Log面板

• Log 样式

• 命令行

System面板

• Performance信息

• 输入日志到不同的 log 面板

console.log('output to Log panel.') console.log('[system]', 'output to System panel.')

Network面板

• 请求、回包的详情

Element面板

• 查看HTML对象结构

Storage面板

• 添加、编辑、删除、复制Cookies、LocalStorage、SessionStorage

主题

• 浅色主题

• 深色主题

快速上手

方式1：使用npm（推荐）

npm install vconsole

Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。

import VConsole from 'vconsole'; const vConsole = new VConsole(); // 或者使用配置参数来初始化，详情见文档 const vConsole = new VConsole({ theme: 'dark' }); // 接下来即可照常使用 `console` 等方法 console.log('Hello world'); // 结束调试后，可移除掉 vConsole.destroy();

方式2：使用CDN直接插入到 HTML

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

开源地址&使用手册

点击下方的【IT学习日记】回复【资源】领取！

如果这篇文章对您有帮助，请一定帮我点个“关注”和“点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。

写在最后

1000+优质开源项目更新进度：254/1000。如需更多类型优质项目推荐，请在文章后留言。