手机调试工具vConsole的使用教程

最新推荐文章于 2024-07-22 09:44:17 发布
最新推荐文章于 2024-07-22 09:44:17 发布
阅读量1.1w 收藏 12
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44096133/article/details/108941029
版权

vconsole 前端调试 日志 JavaScript 错误排查
关键词由CSDN通过智能技术生成

首先在官网下载vconsole.min.js然后在main.js中进行引用

饮用后的效果如下，右下角会出现绿色的按钮

点击绿色按钮可以看到一些信息，我们可以在出现问题的时候点击绿色按钮查看问题原因，点开后有如下信息，我们也可以添加日志，可以点开后查看


 

 

旷世奇才李先生
关注
专栏目录
Ionic Native - 1.cordova插件、获取设备号、获取地理位置、调试工具Vconsole
ZYYzyy1993的博客
10-19 609
一、Ionic 调用硬件的能力 Ionic 调用原生 api 的能力是基于 cordova 的 ，cordova 是 Adobe 公司的一个开源的框架，诞生于 2008 年，可以让我们用 javascript 调用手机原生的几乎所有的 api，比如：摄像头、麦克风等、重力感应、加速器、声音、震动、网络、视频、音频、地理定位等，原生能实现的所有功能。 cordova 目前最新版本是 cordova9.x 的版本。corodova3.x 以后的所有版本使用方法都是一样的。 Ionic 在 cordova.
安卓手机调试代码
katherin_wanzi的博客
03-23 1931
一、安装Vconsole 1、官网链接：https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md npm安装完成之后，在项目入口文件main.ts中导入Vconsole并加入以下代码，重启项目 const vConsole = new VConsole(); 2.将以下链接发送至手机（下面一条打不开），填写完整，手机连公司内网，打开后即可调试 二、在手机端调试之前先去设置中打开开发者模式 1.以realme x7 pro为例，设置 ->
vConsole.js
04-29
手机前端开发调试利器，基于微信开发的控制台输出！
vconsole使用方法
qq_45349764的博客
08-30 508
vconsole使用方法
wx微信调试打开vConsole的办法
最新发布
黄彪博客
07-22 795
小程序在实体手机中调试的时候，没有打印日志很难定位问题，因此，就需要一个 类似vConsole的工具，恰好小程序已经自带了这个功能，做个笔记，方便以后学习。用微信扫描二维码，打开小程序，点击顶部的三个点，打开。
VConsole的使用
m0_52244931的博客
09-16 230
VConsole
Vconsole的使用以及不同环境下的使用
qq_45791799的博客
10-10 8388
在项目的开发过程中，pc端可以通过F12查看打印日志，但是在移动端，我们是看不到的，当然也可以通过alert来弹出，但这种方法很不便利，于是Vconsole便应运而生。Vconsole是专门为移动端前端设计的调试面板，当然pc端也可以使用；Vconsole的使用和我们在pc端使用F12一样方便。
移动端调试工具：vconsole的使用
小墨鱼的前端问题录
09-12 1038
【代码】移动端调试工具：vconsole的使用。
uniapp-vconsole.zip
08-12
只需打开设备的开发者选项，启用“Webview调试”（不同设备开启方式可能略有差异），然后在电脑浏览器的地址栏输入`chrome://inspect`，点击“设备”标签页，就可以看到Vconsole提供的各种调试工具。 1. 查看日志 ...
my_vconsole.min.js
10-09
vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志 使用教程（完整代码）：https://a-jing.blog.csdn.net/article/details/100879287
5款web前端开发利器
互联网那些事
11-08 892
1. vConsole 推荐指数：★★★☆☆ 腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。...
vconsole.min.js
05-28
使用vconsole可以在页面看到传输的数据和自己的错误等信息。
vconsole.js
12-19
较为实用的一个前端控制台js文件，网上搜索的较多不太实用
Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
weixin_30562507的博客
10-31 1319
最近发现了一个鹅厂的仓库，实现起来比我这个方便[捂脸]。https://github.com/AlloyTeam/AlloyLever 一、vue-cli脚手架中搭建的项目引入vConsole调试 1.首先npm安装，大家都懂的。 npm install vconsole 2.在合适的地方新建一个文件vconsole.js，内容如下： import Vconsole from...
vConsole使用
chengRantianxia的博客
03-11 1889
平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，console.log的信息我们是看不到的。 这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。 因此，我们需要借助第三方插件：vConsole。 第一种用法：引入js文件 <script src="path/to/...
移动端调试神器vConsole使用详解
m0_57462721的博客
05-15 2416
vconsole调试工具使用方法
vconsole使用步骤
Luckygirl_jian的博客
06-26 1925
vconsole使用步骤 1.npm下载 npm install vconsole -S 2.在main.js中： import VConsole from 'vconsole' const vConsole =new Vconsole() Vue.use(vConsole) console.log("vconsole-test") 总结 vconsole在vue中的简单使用。
ionic项目中使用vconsole调试工具
05-23
可以在Ionic项目中使用vconsole调试工具，步骤如下： 1. 在项目中安装vconsole插件：`npm install vconsole --save` 2. 在app.module.ts中引入vconsole：`import VConsole from 'vconsole';` 3. 在app.component....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旷世奇才李先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值