前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vConsole - 移动端开发调试利器

vConsole - 移动端开发调试利器

作者头像
李维亮
发布2021-10-29 14:18:38
3.1K0
发布2021-10-29 14:18:38
举报
文章被收录于专栏:李维亮的博客李维亮的博客

最近老搞移动端开发,赶脚调试起来很不方便,然后就发现了腾讯开源的vConsole

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

特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 上手

方法一:使用 npm(推荐)

代码语言:javascript
复制
$ npm install vconsole

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

代码语言:javascript
复制
import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用 options 选项初始化
const vConsole = new VConsole({ maxLogNumber: 1000 });

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

// 结束调试后,可移除掉
vConsole.destroy();
方法二:使用 unpkg 的 CDN 直接插入到 HTML

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

详细使用方法请参阅使用教程

qrcode.png
qrcode.png

http://wechatfe.github.io/vconsole/demo.html

panel_log.jpg
panel_log.jpg
panel_network.jpg
panel_network.jpg
panel_element.jpg
panel_element.jpg
panel_storage.jpg
panel_storage.jpg

文档

vConsole 本体:

使用教程 公共属性及方法 辅助函数

插件:

插件:入门 插件:编写插件 插件:Event 事件列表

第三方插件列表 vConsole-sources vconsole-webpack-plugin vconsole-stats-plugin vconsole-vue-devtools-plugin vconsole-outputlog-plugin vite-plugin-vconsole

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-10-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法一:使用 npm(推荐)
  • 文档
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档