Vue3 如何使用移动端调试工具vConsole

最新推荐文章于 2024-09-12 08:29:18 发布

HaushoLin

最新推荐文章于 2024-09-12 08:29:18 发布

阅读量2.5k

点赞数 14

分类专栏： Vue3 文章标签： javascript 前端开发语言 vue.js 测试工具

本文链接：https://blog.csdn.net/Steven_Son/article/details/135555570

版权

Vue3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中通过pnpm安装vConsole，将其添加到src/utils并导入到main.ts中，实现移动端开发时的灵活控制台调试功能。

摘要由CSDN通过智能技术生成

1、安装

pnpm i vconsole

2、在src/utils下新建vconsole.ts，写入以下代码

// 这是移动端控制台调试工具，需要调试就打开,不用就注释
import vConsole from 'vconsole'
const vconsole = new vConsole()

3、src/main.ts 引入，需要调试就打开,，不用时就注释

// 这是移动端控制台调试工具，需要调试就打开,不用就注释
import '@/utils/vconsole.ts'

4、效果如下

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HaushoLin

关注关注

14
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue项目移动端中使用vconsole，并配置在不同的环境是否显示

01-08

与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志： console.log('Hello World'); 4.注意 VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，...

在Vue 3中引入VConsole的步骤

seimeii的博客

07-28

2715

在Vue 3中引入VConsole的步骤

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

vconsole在vue3中使用方法

热门推荐

努力搬砖

07-03

1万+

Vconsole，一个轻量、可拓展、针对手机网页的前端开发者调试面板。查看日志、网络请求、HTML结构、本地存储等，在移动端网页调试非常方便。

Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试

都随它大小便吧

11-12

1742

基于Vue3的项目在打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试。

vue3+ts使用vConsole

2301_76315784的博客

05-11

1375

3、在vite.config.ts中配置。2、在main.ts中引入并使用。

移动端（微信等使用vConsole调试console的方法

10-17

vConsole 是腾讯WeApp团队开发的一个轻量级的移动端Web控制台插件，它允许开发者在手机上查看和使用类似于Chrome开发者工具中的`console`，以便于在实际设备上调试JavaScript、CSS以及网络请求等问题。vConsole简单...

移动端控制台插件vConsole.min.js

09-08

移动端控制台插件vConsole.min.js是专门为移动设备开发者设计的一款工具，用于在手机或平板等移动设备上查看和调试Web应用的JavaScript控制台。它弥补了移动浏览器原生控制台功能的不足，使得在没有电脑连接或者无法...

移动端H5页面控制台打印信息：vconsole

06-01

vConsole的强大在于它为移动端H5开发提供了一种直观、便捷的调试手段，让开发者无需依赖复杂的开发者工具或电脑模拟器，就能在真实设备上进行高效调试。这极大地提升了开发效率，尤其是在面对各种不同型号和系统版本...

uniapp-vconsole.zip

08-12

只需打开设备的开发者选项，启用“Webview调试”（不同设备开启方式可能略有差异），然后在电脑浏览器的地址栏输入`chrome://inspect`，点击“设备”标签页，就可以看到Vconsole提供的各种调试工具。 1. 查看日志 ...

移动端开发调试工具

weixin_44903107的博客

01-27

5548

1、抓包工具Charles、Fiddler 平时只用抓取各种网络，需要设置手机的wifi代理推荐指数2颗星 2、vConsole、eruda等调试库这个方法需要在页面中插入一段 JS 脚本，这里以vConsole为例，导入vconsole.min.js，并实例化，注实例化代码最好放在头部，以便能一开始就能劫持内容： <script src="./vconsole.min.js"></script> <script> // 初始化 new

VUE 如何使用VConsole 移动端控台

weixin_39273589的博客

06-10

2660

VConsole 提供了很多配置选项，可以根据实际需要进行配置，如 switchPlugin、maxLogNumber、enableStorage、enableWidgets 等。VConsole 是一个专门为移动端开发设计的调试工具库，提供了许多有用的功能，如日志打印、页面性能指标监控、AJAX 拦截等，可以方便地在移动端上进行调试。使用 VConsole 提供的方法可以方便地打印日志和监控页面性能指标。以上就是使用 VConsole 进行移动端调试的基本步骤，更详细的 API 介绍可以参考官方文档。

移动端调试工具 vconsole、eruda 使用方法

MISS_zhang_0110的博客

07-28

1815

【代码】移动端调试工具 vconsole、eruda 使用方法。

vue - vue项目中配置不同的环境是否显示vConsole

qq_43886365的博客

09-30

2551

vue项目中配置不同的环境是否显示vConsole

vue项目移动端中使用vconsole，如何在测试环境中也关闭

06-07

在 Vue 项目中使用 vConsole 可以方便地进行移动端调试，但在测试环境中不想看到 vConsole 的话，可以在代码中进行判断，只在开发环境中使用 vConsole。在 Vue 项目中，可以在 main.js 文件中引入 vConsole，然后在创建 Vue 实例之前进行判断，只在开发环境中使用 vConsole。例如： ```javascript import Vue from 'vue'; import App from './App.vue'; if (process.env.NODE_ENV === 'development') { const VConsole = require('vconsole'); new VConsole(); } new Vue({ render: h => h(App), }).$mount('#app'); ``` 上述代码中，首先判断当前环境是否为开发环境，如果是开发环境则引入 vConsole，并创建一个实例，否则不引入 vConsole。然后再创建 Vue 实例进行挂载。这样配置之后，在测试环境中就不会看到 vConsole 的调试界面了。当然，如果你想要完全关闭 vConsole，可以在代码中直接销毁它，如上一个回答所示。