腾讯移动端调试·vConsole

最新推荐文章于 2024-07-27 16:07:42 发布
最新推荐文章于 2024-07-27 16:07:42 发布
阅读量648 收藏
点赞数
文章标签： javascript 前端
原文链接：https://github.com/Tencent/vConsole/blob/dev/README_CN.md
版权

English | 简体中文

vConsole

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

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

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

功能特性

  • 日志(Logs)： console.log|info|error|...
  • 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
  • 节点(Element)： HTML 节点树
  • 存储(Storage)： Cookies, LocalStorage, SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

详情可参考下方的截图。

版本说明

最新版本： 在这里插入图片描述
每个版本的详细说明请参阅 Changelog。

上手

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

将 vConsole 添加到项目中主要有以下方式：

方法一：使用 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();
方法二：使用 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

手机预览

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

在这里插入图片描述

截图

概览

浅色主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnmwIqIx-1683785301865)(./doc/screenshot/overview_light.jpg)]

深色主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjCTHCRE-1683785301867)(./doc/screenshot/overview_dark.jpg)]

Log 面板

Log 样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgYWEf7I-1683785301870)(./doc/screenshot/plugin_log_types.jpg)]

命令行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P42JBxOM-1683785301873)(./doc/screenshot/plugin_log_command.jpg)]

System 面板

Performance 信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqW89lqs-1683785301874)(./doc/screenshot/plugin_system.jpg)]

输入日志到不同的 log 面板 
console.log('output to Log panel.')
console.log('[system]', 'output to System panel.')

Network 面板

请求、回包的详情

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRG1EqIu-1683785301876)(./doc/screenshot/plugin_network.jpg)]

Element 面板

查看 HTML 对象结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7up64fB-1683785301877)(./doc/screenshot/plugin_element.jpg)]

Storage 面板

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFaHhU2m-1683785301879)(./doc/screenshot/plugin_storage.jpg)]

文档

vConsole 本体：

自定义插件：

第三方插件列表

交流反馈

QQ 群：497430533

License

The MIT License

slongzhang_
关注
移动端网页打印代码_移动端页面调试工具 vConsole 与 eruda
weixin_39932455的博客
12-22 262
起因当我们写 webapp 或者 移动端网页时，想要在手机上进行调试是非常困难的事，因为在手机上无法直接看到日志输出。之前的办法是通过 alert 来打印日志，然后一遍一遍的定位问题修改代码。这样实在是太低效了，因此就诞生了 vConsole 和 eruda 这两款调试工具，其效果等价于PC端的 devtools，可以查看日志，网络，页面，Resources等vConsolevConsole:一个...
移动端H5页面调试利器vconsole
娃哈哈_的博客
12-29 1910
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、vconsole是什么？二、主要功能三、引入方式1.cdn引入2.npm包引入总结 前言 PC页面，我们可通过F12打开控制台，查看日志信息，便于测试调试。但放到移动端中，移动端是没有控制台的，我们就无法查看页面的console信息，非常不便。但vconsole插件解决了此问题~ 一、vconsole是什么？ 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 源码链接：https://github.com/Ten
腾讯开源的手机前端开发调试利器 vConsole.zip
07-19
1 前言我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；  (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？2 vConsole前端调试面板莫慌，抱紧vConsole！vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型：console.log('foo'); // 白底黑字   console.info('bar'); // 白底紫字   console.debug('oh'); // 白底黄字  console.warn('foo'); // 黄底黄字  console.error('bar'); // 红底红字第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。3 使用方法Talk is cheap, show me the code.首先，在需要展示日志的页面引入vConsole模块。我们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各种debug钩子。引入后，会自动生成window.vConsole对象实例。<head>  [removed][removed]  </head>对于更通常的情况，我们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就需要开发者自行判断引入模块的时机。以PHP为例，通过判断URL中有无 dev_mode参数来选择性加载vConsole：<?php if($_GET['dev_mode'=='1'){?>  [removed][removed]   <?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，可以在module中使用require()引入vConsole：var vConsole =require('path/to/vconsole.min.js');好了，怎么打印log呢？与电脑端一致，可以直接使用console.log()等方法来打印日志，目前支持的方法有：console.log('foo');  console.info('bar');  console.debug('oh');  console.warn('foo'); console.error('bar');若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台 前端面板。因此不必担心兼容性问题。引入模块后，vConsole会有一小段时间用于初始化工作，在渲染出面板HTML之前将无法立即打印log。因此，若要在引入模块后立即打印log，应使用vConsole.ready()方法：vConsole.ready(function() { console.log('Hello World');  });4 在线demo微信扫描以下二维码（或微信内长按图片识别二维码），即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。 标签：腾讯  前端工具
微信多端应用vConsole调试模式控制
weixin_70575680的博客
07-27 323
该配置主要是解决在app上线后忘记关闭VConsole，避免线上显示VConsole框问题，个人觉得非常有必要。如果需要看正式版本效果，可在体验版中查看，也是会显示VConsole调试的。1、首先打开微信多端应用文件中的project.miniapp.json配置，找到调试模式配置，将VConsole设置为 ：“不设置 undefined”。2、将下列代码放入app.js文件onLaunch生命周期中，调用即可。
移动端调试神器vConsole--腾讯的
沐雪大神
12-26 510
github地址：https://github.com/Tencent/vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 我们在写we...
【vconsole】vconsole网页调试
Juruo@Security
03-29 3958
【学 习 新 思 想】vconsole调试技巧
探索腾讯出品的Web开发者利器：vConsole
gitblog_00015的博客
03-19 357
探索腾讯出品的Web开发者利器：vConsole vConsoleA lightweight, extendable front-end developer tool for mobile web page.项目地址:https://gitcode.com/gh_mirrors/vc/vConsole 是一个轻量级、可扩展的Web移动端调试工具，由腾讯出品并开源。它允许开发者在移动设备上直接查看...
VConsole 工具调试
那片枫叶~
03-15 635
VConsole 工具调试 1、用于移动端，比如手机浏览器打开页面调试，能在手机端查看当前页面的报错和网络等： // 先引入js，然后需要手机用微软浏览器打开页面，链接USB调试 <script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"> </script> //在mouted生命周期使用 mounted() { new VConsole();
移动端（微信等使用vConsole调试console的方法
10-17
vConsole 是腾讯WeApp团队开发的一个轻量级的移动端Web控制台插件，它允许开发者在手机上查看和使用类似于Chrome开发者工具中的`console`，以便于在实际设备上调试JavaScript、CSS以及网络请求等问题。vConsole简单...
vue移动端调试工具
08-26
另一个流行的Vue移动端调试工具是vConsole，它是一个由腾讯开发的前端开发者工具。vConsole提供了类似于浏览器控制台的功能，可以查看和修改页面的日志、网络请求和DOM结构。你可以在GitHub上找到vConsole的源代码和...
移动端调试痛点？——送你五款前端开发利器
郑昊川的博客
08-17 456
之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开发环境下没报错，可真机又出现了意料之外的情况，而且没法像 PC端 那样祭出 F12 大法，怎么定位问...
移动端调试神器vConsole使用详解
m0_57462721的博客
05-15 2459
vconsole调试工具使用方法
移动端调试工具 VConsole
qq_51622532的博客
01-22 691
H5 页面中 我们可以正常调试， 但是发到生产或者测试，我们没有办法调试，所以我找到了一个可以线上调试的利器。他可以在线上调试，可以看打印等。
移动端调试工具vConsole
weixin_53818172的博客
09-12 517
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。在public文件的index.html引入，并使用，需要的时候打开不需要就注释。在main.js中引入刚刚新建的vconsole.js。安利一款好用的移动端调试工具vConsole。官网:https://alloyteam.
深入探索前端调试神器vConsole
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-17 3626
vConsole作为一款前端调试神器，为前端开发者提供了一个便捷的调试解决方案。通过本文的介绍和示例，相信你已经对vConsole有了更深入的了解。然而，vConsole的功能远不止于此，它还有许多高级用法和技巧等待你去发掘。讨论：你在前端开发中是如何使用vConsole的？你有没有发现vConsole的一些隐藏功能或技巧？欢迎在评论区分享你的经验和见解！💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！
腾讯alloylever使用问题总结, vconsole 生产环境条件展示
wxl_小白的博客
09-17 361
1. 安装及使用腾讯 alloylever 安装: npm install alloylever -S 引入: import Alloylever from 'alloylever' 配置: Alloylever.config({ cdn: '', // vconsole 网络地址 entry: '', // 触发显示vconsole 事件绑定元素 可通过Alloylever.entry 函数设置多个元素触发 ... // 等 }) 2. 遇到的问题 默认点击6次就会
微信客户端开启vconsole调试
zwrlj527的专栏
06-10 8252
序 最近在调试前段时间做的支付服务，H5扫码支付已经跟websocket推送信息前端，实现跳转了（因为是做的聚合支付，不是直接对的支付，所以支付结果，由我搭建的支付服务再调用我搭建的WS推送信息服务结合），今天开始调试微信浏览器内jsApi唤起支付了（也是走的我搭建的聚合支付服务）。 在联调中，还是会碰到一些流程出入参希望看看，想看看到底哪里出了问题，苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口，使开发者可以真机调试。给微信开发者点赞。然后就可以看到你打印的内容及其他的信息，比如cookie、
移动前端console调试面板（移动网页端调试工具）—vConsole
热门推荐
新博客地址：blog.songchunmin.com
04-09 1万+
一个针对手机网页的前端console调试面板，并将其开源了，一个非常有用的开发调试工具。 项目地址： https://github.com/WechatFE/vConsole 。 不多介绍，以下内容直接 copy 了项目的 README.md
降本增效工具系列（一）：移动端调试利器 vConsole
IT全栈 华强工作室
09-13 3643
痛点：移动web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好，而且还会阻拦进程。前端工程开发、调优过程中，调试方法、方式是重中之重，最便捷的方式当属拥有一款调试利器，应用它，你可以轻松获取调试结果。在前期Vue技术栈开发PC Web端过程中，我们讲解过debugger和，现简要回顾下。debugger是谷歌浏览器提供的调试语句，其主要是通过停止JS的执行进行断点设置。它的使用方法很简单， 只需要在JS语句中， 插入一行debugger;
移动端配置 vconsole 仅特定用户可见
最新发布
09-19
vConsole是一个前端开发者常用的移动端调试工具，它可以在Web应用中提供控制台功能，方便查看和操作页面元素、网络请求等。如果你想要限制vConsole只对特定用户可见，通常不会直接在vConsole本身的配置中设置这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值