网页调试vconsole和eruda

最新推荐文章于 2025-06-23 15:20:37 发布
原创 最新推荐文章于 2025-06-23 15:20:37 发布 · 290 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍两种前端开发中常用的调试工具——vconsole和eruda。vconsole由腾讯开发，适用于网页调试，可通过引入特定JS文件激活。eruda则通过简单的代码引入即可在页面上提供调试面板。两者均为前端开发者提供了便捷的调试解决方案。

方法一：vconsole
预览地址：https://www.w3cways.com/demo/vconsole/
官方文档：https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

使用方式：
引入此js

<head>
<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>
</head>
1
2
3
方法二： eruda：

官方文档：https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

使用方式：
在页面上引入一下代码

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

移动端页面调试工具 vConsole 与 eruda
司马懿的西山居
07-26 6977
起因 当我们写 webapp 或者 移动端网页时，想要在手机上进行调试是非常困难的事，因为在手机上无法直接看到日志输出。之前的办法是通过 alert 来打印日志，然后一遍一遍的定位问题修改代码。这样实在是太低效了，因此就诞生了 vConsole 和 eruda 这两款调试工具，其效果等价于PC端的 devtools，可以查看日志，网络，页面，Resources等 vConsole vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板，是微信官方出品，主要用于移动调试。 vConsole可以查
webApp移动端前端调试工具vconsole和eruda
weixin_45006814的博客
07-06 647
移动端调试工具
h5移动端调试工具vconsole/eruda
03-21
vconsole.js/eruda.js
移动端调试工具vConsole与Eruda
ass_ace
10-02 3402
移动端调试工具vconsole与Eruda1.vconsole2. Eruda 随着web H5应用的广泛，很多原生软件采用原生+H5混合开发到的模式，对于安卓和IOS原生的app他们有自己的调试方式，比较友好，出现问题也比较好重现，而web app的js代码一旦部署上生产，代码和接口层面的报错很难捕捉，一般都要通过取日志去查看报错，为了方便定位问题，我的项目引入过以下两个调试工具，以下是对vconsole和eruda两个工具的使用和对比。 1.vconsole vconsole基本能满足移动端的调试，调试
移动端调试神器 VConsole与eruda
笋笋的博客
10-11 498
1、eruda使用方法 方式1： <script src="https://cdn.bootcss.com/eruda/1.5.5/eruda.min.js"></script> <script> eruda.init(); </script> 方式2： npm install --save-dev eruda ;(function () { if (!/mdebug=true/.test(window.location.hre
移动端h5调试必备工具：vconsole与eruda
最后，通过了解和使用vConsole和eruda，开发者能够大大提升移动端调试的效率和质量，从而加快开发进程和保证应用的稳定性。这两大工具的出现，无疑是Web开发者的好帮手，让移动端网页调试变得更加简单和直观。
H5移动端调试工具 vconsole、eruda 使用方法
Ryan的博客
05-11 2294
eruda: 在 index.html 中引入： <script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script> <script>eruda.init();</script> vconsole: 在 index.html 中引入： <script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"
H5页面控制台之vconsole
weixin_44901028的博客
06-03 4224
H5页面控制台之vconsolevconsole是干什么的？vconsole怎么接入？调试 vconsole是干什么的？ 最近在写一个app端的内嵌H5项目，端内也没有扫一扫的功能，调试起来非常的麻烦。当出现问题的时候，无法查看日志，还不能快准狠的定位到问题所在。 然后我就接入了vconsole，这是一个移动端调试的神器。这样项目放到app里面了也可以用控制台进行调试。 vconsole怎么接入？ <script src="./static/js/vconsole.min.js"></sc
H5调试工具vconsole和Eruda对比
最新发布
大雾起了清晨
06-23 1012
VConsole与Eruda作为两款主流移动端调试工具各有特点。VConsole轻量简洁（约100KB），适合基础日志和网络监控，集成简单；Eruda功能更丰富（约150KB），提供DOM调试、性能分析和插件扩展，但体积较大。VConsole适用于性能敏感场景，Eruda则更适合复杂项目调试。选择时需权衡功能需求与性能影响，也可在不同环境组合使用。
移动端调试工具 vconsole、eruda 使用方法
MISS_zhang_0110的博客
07-28 2122
【代码】移动端调试工具 vconsole、eruda 使用方法。
vconsole/eruda 进行移动端调试
purple25的博客
04-27 413
1.CDN 免安装vconsole <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> <script> new VConsole() </script> 2.CDN eruda <script src="https://...
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
仙魁XAN
04-09 8154
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 一、简单介绍 二、Eruda 1、安装 2、使用 3、实用 三、vConsole 1、安装 2、使用 3、实用 四、关键代码 五、CDN 方式使用 Eruda 、vConsole 六、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似...
手机端调试工具 vconsole、eruda 使用方法
qq_37550440的博客
06-27 1326
在手机端能正常查看log及网络请求。。
移动端H5网页调试之vConsole
凌晨不睡觉
06-03 804
由于百度不太好搜索到vConsole的官方地址这里贴一下方便大家查阅。 vConsole官方仓库简介地址：https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md vConsole官方中文文档地址： https://github.com/Tencent/vConsole/blob/89dfbae9df3e4d0d4920a38315634c28dbd92e54/doc/tutorial_CN.md demo地址：http://wechatfe..
使用iframe和vconsole调试ios网页
阿豪
11-13 462
原文链接: 使用iframe和vconsole调试ios网页 ...
移动端调试模式vConsole
on1yLX的博客
08-08 425
一个轻量、可拓展、针对手机网页的前端开发者调试面板，是微信官方出品，主要用于移动调试。
调试H5页面-vConsole
CamilleZJ的博客
03-01 941
vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。 git地址：https://github.com/Tencent/vConsole 演示案例：http://wechatfe.github.io/vconsole/demo.html 特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 使用 在html页面中引入，若是多页面
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值