JS——使用VConsole

一只漫步前行的羊

已于 2022-05-23 10:19:09 修改

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS Vue 文章标签： javascript npm 前端

于 2022-05-20 11:07:11 首次发布

本文链接：https://blog.csdn.net/qq812457115/article/details/124879314

Vue 同时被 2 个专栏收录

44 篇文章

订阅专栏

32 篇文章

订阅专栏

本文介绍了如何通过npm安装并使用VConsole，一个用于前端开发的轻量级控制台工具，帮助开发者方便地进行调试。只需引入CDN和创建实例即可便捷使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【npm】

//安装
npm install vconsole
//使用
import VConsole from 'vconsole';
const vConsole = new VConsole();

【cdn】

//引入
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
//使用
const vConsole = new VConsole();

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只漫步前行的羊

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端开发——调试方法总结（Fiddler、vConsole.js、chrome://inspect/#devices）

zhongmei121的专栏

07-30

739

1、Fiddler抓包 PC端安装Fiddler，点击菜单栏Tools》Options》HTTPS（勾选下面选项，点击Actions，点击TrustRootCertificate） Connections查看端口（可自定义），勾选Allowremotecomputerstoconnect选项手机端配置（手机和电脑要在同一个局域网） ipconfig查看电脑ip地址这样就可以实现手机抓包，分析接口请求数据问题（注意：如果没成功，可以重启一下Fiddler，或者检查...

vconsole.min.js

12-25

实现手机端调试，引入vonsole.min.js，页面上初始化插件即可。

参与评论您还未登录，请先登录后发表或查看评论

vconsole.js

06-06

移动端调试神器，调试工具，vconsole.js，下载既用，简单方便，平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。有了vconsole.js就方便多了，可以在手机上看到电脑浏览器控制台一样的界面，可以看到控制台打印的消息，调试更加容易。使用方法：引入js，页面加载时候调用以下方法 window.vConsole = new window.VConsole({ defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板 maxLogNumber: 1000, // disableLogScrolling: true, onReady: function() { console.log('vConsole is ready.'); }, onClearLog: function() { console.log('on clearLog'); } });

JavaScript---VConsole插件配置使用，一步到位简单实用！

COCOLI_BK的博客

03-12

1470

个人喜欢BootCDN这个平台（直接在线引用或者下载本地引入均可~）3. 实例化该插件，直接默认浏览器打开即可看到。

[前端工具] 钉钉环境中的企业内部应用如何调试? 使用Vconsole工具

最新发布

少年阿bin的博客

06-10

454

VConsole是由腾讯开发的移动端网页调试工具，提供类似浏览器控制台的功能。支持CDN或npm安装，集成后在页面右下角显示调试按钮。主要功能包括日志输出、网络监控、DOM查看、存储管理等。适用于H5页面调试和真机测试，可通过URL参数控制调试面板的显示。替代方案有Eruda和Chrome远程调试。该工具轻量易用，解决了移动端开发调试不便的问题。

vConsole.js

04-29

手机前端开发调试利器，基于微信开发的控制台输出！

JS-移动端调试控制台-vConsole

qq_35515563的博客

02-21

1639

腾讯开源的移动 H5 的控制台开发调试工具 vConsole 腾讯开源的移动 H5 的控制台开发调试工具，支持查看 console 日志、网络请求、自定义插件等用于移动网页的轻量级，可扩展的前端开发人员工具。特征查看控制台日志查看网络请求查看文档元素查看Cookies，LocalStorage和SessionStorage 手动执行JS命令自定义插件安装 1.下载模块下载 vConsole 的最新版本。或者使用 npm 安装： npm install...

前端页面，手机端调试工具 vConsole.js

欢迎来到动感地带

04-03

1436

1.引入 <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

移动端调试神器——vconsole.js

08-07

我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看...vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。你值得拥有~

微信小程序如何使用vconsole

03-22

### 微信小程序中集成和使用 VConsole 进行调试 #### 配置方式一：无需引入外部脚本 ...以上就是关于如何正确地集成了第三方插件——VConsole 到您的 WeChat Mini Program 当中的全过程介绍[^5]^。 --- ###

vConsole.js：移动端前端调试利器解析

移动端调试神器——vconsole.js的知识点详解：移动端Web开发是前端工程师不得不面对的挑战之一。在移动设备上调试网页，特别是手机网页，一直都不是一件容易的事情。与PC端相比，移动设备的调试工具和手段相对有限...

JS · 工具：vConsole.js移动端调试

weixin_42091247的博客

10-28

1811

在做微信公众号开发的时候，时常要调微信接口。在电脑浏览器上无法模拟，出现问题很难排查。只能通过电脑连接手机去查看log，这儿介绍一个快捷的方法，在手机前端页面直接查看打印信息。 vConsole前端调试面板 vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。方法一：安装vConsole npm install vconsole 引入 import VConsole from 'vconsole'; const vConsole = new VConsole();

js常用插件(一)之移动端调试利器VConsole

小龚的博客

01-13

893

js常用插件之VConsole 欢迎点击: 个人官网博客移动端调试利器：具体使用方法也很简单 <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> <script type="text/javascript"> let vConsole = new VConsole(); </script> 网页中会出现vconsole调

移动端页面调试工具-vConsole.js

weixin_42161050的博客

12-19

1346

平时web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好.还会阻拦进程。通过vConsole.js重写console方法，实现了类似于微信小程序的移动端调试效果。 vue (1)安装 npm install vconsole （2）在main.js中引入 import Vconsole from 'vconsole'; let vConsole = new Vconsole(); export default vConsole （注意：正式上线之后就可以去掉啦，不.