个人网站: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 vconsoleImport 并初始化后即可使用 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直接插入到 HTMLscript srchttps://unpkg.com/vconsolelatest/dist/vconsole.min.js/script script // VConsole 默认会挂载到 window.VConsole 上 var vConsole new window.VConsole(); /script开源地址使用手册点击下方的【IT学习日记】回复【资源】领取如果这篇文章对您有帮助请一定帮我点个“关注”和“点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。写在最后1000优质开源项目更新进度254/1000。如需更多类型优质项目推荐请在文章后留言。