vue项目使用vconsole，这样手机端也可以console

最新推荐文章于 2024-06-27 14:39:20 发布
原创 最新推荐文章于 2024-06-27 14:39:20 发布 · 2.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vconsole #手机端测试

本文详细介绍如何在Vue项目中安装并使用vConsole进行前端调试。步骤包括通过npm安装vConsole，然后在main.js文件中引入并配置vConsole，最后运行项目在电脑端和手机端查看调试效果。

vconsole的了解：https://github.com/Tencent/vConsole/blob/dev/README_CN.md

一，使用vconsole
1.vue项目安装vconsole

npm install vconsole

2.在入口文件main.js引入vConsole

import Vconsole from 'vconsole'
let vConsole = new Vconsole()
Vue.use(vConsole)

3.运行项目

npm run dev

二，运行后查看效果
1.电脑端
在这里插入图片描述
2.手机端
点击vConsole的效果：
在这里插入图片描述

vue-cli-plugin-vconsole:适用于vue-cli@3.0的VConsole插件
05-02
vue-cli-plugin-vconsole 适用于vue-cli@3.0的VConsole插件 安装 vue add vconsole 尖端 VConsole插件会在开发环境中自动启用。 您可以在vue配置中使用vconsole-webpack-plugin的选项，如下所示： // vue.config.js or configure in the pagckage.json. module . exports = { pluginOptions : { vconsole : { enable : true /* others... */ } } }
移动端H5页面控制台打印信息：vconsole
06-01
一旦执行这段代码，vConsole就会在移动端页面的底部出现一个可滑动的控制台面板，你可以在这里看到`console.log`、`console.warn`、`console.error`等函数输出的信息，以及其他调试数据。 vConsole不仅仅是一个简单...
vue移动端使用console控制台
iocncc的博客
10-19 1034
在index.html文件里面，把下面代码复制粘贴进去，就可以了 ``` <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log('Hello world'); </script> ``` ...
vue项目移动端中使用vconsole，并配置在不同的环境是否显示
01-08
1.npm 安装 npm install vconsole 2.初始化 & 配置 在入口文件main.js中加入以下代码 import Vconsole from 'vconsole'; const vConsole = new Vconsole(); 3.打印日志  与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志： console.log('Hello World');   4.注意 VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中; 未加载 vCo
vue移动端使用Vconsole
yangli_的博客
11-09 513
vue移动端使用Vconsole
【Vue项目】安装引入使用vconsole（生产环境不显示）
Allen_Sushi首页
09-17 8800
vue2中安装引入使用vconsole（生产环境不显示）
vue项目使用vConsole
05-01
好的，用户想在Vue2项目中集成并使用vConsole进行手机端日志调试。首先，我需要回顾一下vConsole的基本使用方法，然后结合Vue2的特点来思考如何集成。 根据引用[1]和[2]，vConsole是一个用于移动端调试的工具，可以...
手机端使用vconsole使用教程
最新发布
10-25
在手机端使用 vconsole 有多种方式，以下是详细教程： ### npm 安装使用方式 1. **安装**：使用 npm 进行安装，命令为 `npm install vconsole`；如果使用 pnpm，命令则是 `pnpm i vconsole` [^2][^3]。 2. **创建 ...
vConsole调试工具在Vue项目中的集成与使用方法
由于移动设备上缺乏直观的开发者工具，传统的console.log()输出难以实时查看，而vConsole通过在页面中嵌入一个浮动的调试窗口，使得开发者可以在不依赖外部调试环境的情况下，直接在手机浏览器中查看日志、网络请求...
VUE项目如何在移动端使用console插件
houhouhoukungu的博客
03-11 1664
在项目中发现，由于移动端无法看到打印的信息，所以很难进行调试，也不知道问题出在哪里，后来找到了一个好用的插件：vConsole。 1.安装 npm install vconsole 2、在main.js中引入 import Vconsole from 'vconsole'; let vConsole = new Vconsole(); export default vConsole 编译你...
手机配置交换机Console-蓝牙转RS232模块app-支持常见蓝牙模块
09-14
Serial Bluetooth Terminal 中文简介 “串行蓝牙终端”是面向线路的终端/控制台应用程序，适用于微控制器，arduinos和其他设备，其串行/ UART接口与蓝牙到串行转换器连接到您的Android设备。 此应用程序支持不同的蓝牙版本： – 蓝牙经典 – 蓝牙LE /蓝牙低功耗/ BLE /蓝牙智能 此应用程序支持不同的蓝牙设备： Bluetooth Classic（实施标准蓝牙SPP配置文件）： – HC-05，HC-06，…… – Raspberry Pi 3 – …… 蓝牙LE（实施供应商特定的蓝牙GATT服务）： – 预定义： * Nordic Semic
vue 安装使用vconsole
weixin_42029873的博客
08-12 6648
vue 安装使用vconsole, 手机调试
vue - vue项目中配置不同的环境是否显示vConsole
qq_43886365的博客
09-30 3287
vue项目中配置不同的环境是否显示vConsole
vue移动端使用Vconsole Vconsole使用
鹏仔工作室的秘密基地
02-05 1522
H5移动端看一些接口返回的参数，或者console打印的参数之类，没办法直接查看，用电脑f12切换移动端测试没有真机测试准确，所以使用Vconsole特别方便。 安装麻烦，所以引入第三方cdn简单快捷。 下面是bootcss提供的cdn外链 <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <scrip..
手机端调试工具 vconsole、eruda 使用方法
qq_37550440的博客
06-27 1317
在手机端能正常查看log及网络请求。。
前端页面，手机端调试工具 vConsole.js
欢迎来到 动感地带
04-03 1538
1.引入 <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
Vue3 如何使用移动端调试工具vConsole
HaushoLin的博客
01-14 3567
Vue3 移动端引入这个工具，就可以调出控制台进行调试。
vue移动端使用console的神器vconsole来调试
Red_sevenWord的博客
09-25 2847
前几天开发微信项目的时候传图片在电脑上完全ojbk，但是在我的手机上一直失败。于是就无从下手了，然后同事告诉我有个vConsole，我去百度了一下，看了几分钟用上之后就轻松地从network里面看到请求返回的错误，登陆过期。顺藤摸瓜解决了问题，所以来记录一下。 vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试工具。 引入js的就不说了，我不喜欢那么做，相信很多人也不喜欢，还是用n...
Vue3+TS+Vite中 vConsole 插件的使用
前端菜菜DayDayUp的博客
08-29 3727
Vue3+TS+Vite中 vConsole 插件的使用
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值