Vue之 vconsole 方便微信端调试

已于 2022-11-08 12:58:23 修改
阅读量3.2k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vconsole vue
于 2019-02-20 09:48:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zc_ad/article/details/87775657
在微信端开发Vue应用时，由于无法直接查看Chrome控制台信息，调试变得困难。vconsole作为一款插件，能解决这个问题。通过安装、创建vconsole.js并引入，然后在main.js中导入vconsole.js，即可在页面上看到类似Chrome控制台的功能，方便调试。

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

在手机微信端无法想Chrome看到控制台打印出来的消息，对程序的调试来说是非常不便的，此时就需要插件来实现这种功能，vconsole就是这种作用。

1.安装

npm install vconsole

2.创建vconsole.js文件，内容是引入vconsole

import Vconsole from 'vconsole'
const vConsole = new Vconsole()
export default vConsole

3.在mian.js导入vconsole.js

import vConsole from './utils/vconsole'

运行项目，就会在页面的右下角看到vconsole,此作用与控制台的作用一样

 github上有我更多的笔记:Raray-chuan (兮川

最低0.47元/天 解锁文章

200万优质内容无限畅学
vconsole插件_微信内调试小工具vConsole
weixin_29602351的博客
12-23 776
vConsole是腾讯出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies 和 localStorage手动执行 JS 命令行自定义插件上手下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js)或者使用 npm 安装：1npm install v...
H5 App调试工具vconsole
weixin_47873655的博客
06-06 1163
H5 App 调试工具
微信客户端开启vconsole调试
zwrlj527的专栏
06-10 8772
序 最近在调试前段时间做的支付服务，H5扫码支付已经跟websocket推送信息前端，实现跳转了（因为是做的聚合支付，不是直接对的支付，所以支付结果，由我搭建的支付服务再调用我搭建的WS推送信息服务结合），今天开始调试微信浏览器内jsApi唤起支付了（也是走的我搭建的聚合支付服务）。 在联调中，还是会碰到一些流程出入参希望看看，想看看到底哪里出了问题，苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口，使开发者可以真机调试。给微信开发者点赞。然后就可以看到你打印的内容及其他的信息，比如cookie、
Tencent/vConsole 公共属性与方法详解
最新发布
gitblog_00675的博客
06-02 325
Tencent/vConsole 公共属性与方法详解 前言 Tencent/vConsole 是一个轻量级的移动端网页调试工具，为开发者提供了丰富的 API 接口。本文将深入解析 vConsole 的公共属性和方法，帮助开发者更好地理解和使用这个强大的调试工具。 静态属性 VConsole.instance 这个静态属性用于获取当前 vConsole 的单例实例。如果 vConsole 尚未被实例...
vconsole错误
01-12
记一次前端JSON序列化问题排查，cdn文件夹下为此次JSON错误时cdn返回的错误版本js文件，github文件夹下为github上正确的js文件
微信网页调试之利用vConsole真机调试
热门推荐
flysnownet的博客
06-28 2万+
虽然微信开发者工具可以调试大多数情况，但有些问题开发者工具没法调试，只能在真机里调试 真机调试有多重方式 第一种就是手机连接电脑结合Chrome的inspect进行USB远程调试，这个日后补充 第二种是开启vConsole，直接手机上就可以调，优点是方便，不用连接电脑，能看到大多数信息，缺点是不能打断点 下面介绍如何使用 1.开启vConsole 微信里访问：debugx5.qq.c...
vsconsole
weixin_30487201的博客
12-03 1296
一、安装 npm install vconsole 二、 if (process.env.NODE_ENV === `development`) { const { logger } = require(`redux-logger`); new VConsole(); } new VConsole(); github 地址： https://github.com...
【vconsole】vconsole网页调试
Juruo@Security
03-29 4155
【学 习 新 思 想】vconsole调试技巧
vconsole-vue移动端调试工具&微信开发者工具
weixin_48286936的博客
09-10 729
前言：在做微信公众号的项目，由于需要微信环境，只能在微信中打开，但是手机端不能看到调试页面的内容 1 安装vsoncole npm install vconsole 2 引入（index.js或者main.js） import vConsole from 'vconsole' Vue.prototype.$vConsole= new vConsole() 3 运行之后，报错发现缺少对应的.min.js，在index.html中引入 <script src="https://cdn.bootcss.
【同微信小程序一样的移动端调试工具】移动端调试工具VConsole
欢迎来到我的频道~
09-15 1818
简单介绍下vConsole： vConsole是一个由微信公众平台前端团队研发的web前端开发者面板，可用于展示console日志，方便开发、调试。 可以扫码查看下奥： 使用方法一： 通过npm安装和使用: npm install vconsole --save 在main.js文件里面引入： import VConsole from 'vconsole' if (proce...
uniapp-vconsole.zip
08-12
uniapp集成Vconsole，可以方便地在移动设备上进行前端日志查看和调试，提高了线上问题排查的效率。结合Hbuilder的强大功能，开发过程更加高效。记住，生产环境中记得禁用Vconsole，避免对用户体验造成影响。希望这个...
调试痛苦之vConsole完美
dai_yanxia的博客
04-26 1390
调试痛苦之vConsole完美 对于日常的调试需求，Chrome 就可以满足，当你有MAC电脑的时候，再配上iphone手机，开启Safari调试也是很完美的。可是当你的页面运行在微信，但又不是公众号的时候，微信开发者工具和 Chrome 就无能为力了，上网查了一些资料，大家推广的有两种方案可以解决微信环境调试页面的问题，一个是：vConsole，另外一个是：X5。今天我们就来简单谈谈这两种调试...
原生js html 微信网页开启vConsole
除了能写一堆BUG你还能干什么？
03-15 701
【代码】原生js html 微信网页开启vConsole。
微信多端应用vConsole调试模式控制
weixin_70575680的博客
07-27 1071
该配置主要是解决在app上线后忘记关闭VConsole，避免线上显示VConsole框问题，个人觉得非常有必要。如果需要看正式版本效果，可在体验版中查看，也是会显示VConsole调试的。1、首先打开微信多端应用文件中的project.miniapp.json配置，找到调试模式配置，将VConsole设置为 ：“不设置 undefined”。2、将下列代码放入app.js文件onLaunch生命周期中，调用即可。
vConsole微信页面/移动端调试工具
weixin_30518397的博客
12-24 321
最近在开发微信拼团页面，发现有个页面有的IOS版本显示空白，大多数同事的手机都是可以，猜测应该是IOS版本的对js的兼容问题导致的。由于在PC端inspect调试方式无法调试出问题，所以查了下移动端的调试工具，发现了vConsole这个神器，方便好用。 于是在页面js部分添加了以下代码： <script src="https://cdn.bootcss.com/vConsole/3....
vue中使用vconsole.js ------- 移动端调试神器
weixin_47267851的博客
03-19 377
使用方法 使用cdn引入，在public目录下的index.html中引入如下代码即可 <body> ........ <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); </sc
微信H5调试Vconsole
m0_37378152的博客
09-27 1202
1.ios安卓通用 yarn addvconsole // main.js import VConsole from 'vconsole' // ios必须安装才能使用 new VConsole() // 有需要的话，根据路由参数决定是否打开 if (this.$route.query?.showConsole === '1') { localStorage.setItem('showConsole', '1') } else { localStorage.setItem('sho.
微信小程序web-view调试工具vConsole安装及报错 “toJSON“is not defind
zhazhashuai1999的博客
08-05 2496
接手项目是在微信小程序中调用H5页面,微信自带调试功能只能调试WXML,经过百度找到可以使用微信小程序官方开发的调试工具vcosole调试 安装 <script src="https://cdn.bootcss.com/vConsole/3.5.0/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> 或者cnpm安装: cnpm instal
Vue项目中使用vConsole移动调试工具
weixin_42178050的博客
04-08 445
https://www.jianshu.com/p/8f3fc00ab4a7
vue项目使用vConsole
05-01
<think>好的，用户想在Vue2项目中集成并使用vConsole进行手机端日志调试。首先，我需要回顾一下vConsole的基本使用方法，然后结合Vue2的特点来思考如何集成。 根据引用[1]和[2]，vConsole是一个用于移动端调试的工具，可以通过npm安装并在代码中引入。用户之前可能已经了解过基本步骤，现在需要具体的Vue2集成方法。我需要确保步骤清晰，包括安装、引入、初始化和可能的配置。 首先，安装部分，用户需要使用npm或者yarn安装vconsole包。然后，在Vue项目中引入。通常在Vue2中，可能会在main.js文件里进行全局配置，这样vConsole会在整个应用启动时初始化。但要注意，生产环境不应该包含调试工具，所以可能需要环境判断。 引用[4]中的示例是在HTML文件中直接引入JS，但Vue项目通常使用模块化的方式，所以应该采用npm安装的方式。同时，引用[3]提到在微信生态中的使用，可能用户有特定的环境需求，但这里应该保持通用。 接下来，初始化vConsole的代码应该放在哪里？在Vue的入口文件main.js中引入并实例化是一个合理的选择。但需要考虑只在开发环境下启用，可以通过process.env.NODE_ENV判断。这样能避免生产环境加载vConsole，影响性能。 然后，用户可能需要配置vConsole的选项，比如默认开启的插件、日志数量限制等。根据引用[1]和[3]，可以配置defaultPlugins和onReady回调函数。这部分需要给出示例代码，并说明各个配置项的作用。 另外，用户可能关心如何验证vConsole是否成功集成。需要指导他们如何构建项目并在手机端查看调试面板，比如通过npm run build然后部署到服务器或用真机访问本地开发服务器。 还有可能出现的问题，比如vConsole未显示，这时候需要检查是否在正确的环境下引入，或者是否有其他脚本冲突。另外，生产环境打包时需要排除vConsole，可以通过Webpack的externals或条件判断来处理。 最后，生成相关问题时要围绕集成步骤、配置选项、环境区分以及常见问题排查等方面，帮助用户进一步了解相关知识点。</think>### 分步指南：Vue2集成vConsole调试工具 --- #### **1. 安装vConsole** 在Vue2项目根目录下通过npm安装： ```bash npm install vconsole --save-dev ``` --- #### **2. 全局引入并初始化** 在`src/main.js`中添加以下代码，**仅限开发环境启用**： ```javascript import Vue from 'vue' import App from './App.vue' // 仅在开发环境下启用vConsole if (process.env.NODE_ENV === 'development') { const VConsole = require('vconsole') new VConsole({ defaultPlugins: ['system', 'network', 'element'], // 默认开启核心插件[^1] onReady: () => console.log('vConsole已就绪'), // 初始化回调[^3] maxLogNumber: 500 // 限制日志数量避免内存问题[^2] }) } new Vue({ render: h => h(App) }).$mount('#app') ``` --- #### **3. 验证调试功能** 1. **本地运行**： ```bash npm run serve ``` 2. **手机访问**： - 确保手机与电脑在同一局域网 - 通过IP地址访问开发服务器（如`http://192.168.x.x:8080`） - 页面右下角会出现绿色vConsole图标，点击可查看日志、网络请求等[^4] --- #### **4. 生产环境自动排除** 通过Webpack环境变量控制打包： ```javascript // vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.externals = { vconsole: 'VConsole' // 生产环境排除vConsole[^1] } } } } ``` --- #### **5. 高级配置示例** 自定义网络请求监控： ```javascript new VConsole({ plugins: [ new VConsole.VConsoleNetworkPlugin({ logRequestHeaders: true, // 记录请求头 logResponseHeaders: true // 记录响应头 }) ] }) ``` --- #### **常见问题排查** | 现象 | 解决方案 | |---------------------|---------------------------------| | 手机端不显示vConsole | 检查`process.env.NODE_ENV`是否生效 | | 网络请求未记录 | 确保`network`插件已启用[^1] | | 日志过多导致卡顿 | 设置`maxLogNumber`限制数量[^3] | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值