前端移动端调试工具Eruda

最新推荐文章于 2025-09-14 06:22:50 发布

原创最新推荐文章于 2025-09-14 06:22:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

个人总结专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一款名为Eruda的移动端调试工具，只需两行代码即可轻松集成到项目中，为开发者提供便利的调试体验。Eruda功能强大，操作简单，是移动应用开发者的得力助手。

<!--移动端调试工具-->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()</script>

相对来说这是个比较强大的移动端调试工具，使用简单，两句代码就可实现，拿走不谢！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DemoLw

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

适用于移动端的网络调试工具Eruda(脚本)

08-26

这样的功能集合为移动前端开发者提供了一个强大的移动端调试环境，极大地提高了移动端网页和应用的调试效率和质量。除了基本的调试功能外，Eruda还支持一些高级特性，例如自定义脚本功能，这允许开发者编写特定的...

h5移动端调试工具vconsole/eruda

03-21

其次，Eruda则是一个强大的移动端可视化前端调试工具，由Lavas团队开发。与vConsole类似，Eruda.js也是Eruda的核心文件，它提供了包括元素选择器、CSS、JavaScript执行、网络请求等在内的全方位调试功能。Eruda的...

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

手机前端调试工具

qq_42103673的博客

11-30

487

Eruda——手机网页前端调试面板 Eruda github地址实现类似于微信小程序的移动端调试效果。 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script> <script> // init vConsole var vConsole = new VConsole(); co..

移动端调试工具eruda

Dwa_ww的博客

01-28

420

使用方法： 1.在html中引用如下js: <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init();</script> 2.直接将eruda.min.js下载下来或者复制一个放在项目里，直接引用本地的js ...

7个方案解决移动端社交应用调试难题：eruda实战指南

最新发布

gitblog_00108的博客

09-14

957

你是否曾在开发移动端社交应用时遇到这些问题：用户反馈聊天界面偶现空白，但PC端无法复现？朋友圈图片加载失败，却抓不到请求日志？H5活动页面在特定机型上样式错乱，DevTools调试受限于USB连接？作为前端开发者，我们需要一套能在真实移动环境中提供完整调试能力的解决方案。 **读完本文你将掌握：** - 3种零侵入式集成eruda的方法（含生产环境安全策略） - 社交应用核心场景调试方案（实时消...

移动端调试工具（eruda）

yongyafang123的博客

07-18

547

在页面中引入eruda.min.js并执行方法 <script src="http://eruda.liriliri.io/eruda.min.js"></script> <script> eruda.init(); </script> 注：Vue里面不想npm安装的话，直接在index.js里面添加上面这一段js也可以。效果如下 ...

移动端调试工具-Eruda

weixin_43867229的博客

03-26

1599

Eruda 是一个专为手机网页前端设计的调试面板，类似于 DevTools。：现在，你可以在手机上打开你的网页，然后在页面中看到 Eruda 的调试面板。

eruda 移动端调试工具

qq_40774743的博客

03-22

231

eruda

移动端浏览器调试工具eruda前端项目

“前端项目-eruda.zip”是一个专为移动Web开发调试而设计的开源工具项目，其核心内容是Eruda调试控制台。Eruda作为一个轻量级、功能强大的JavaScript调试工具，旨在弥补移动端浏览器缺乏完整开发者工具的短板。在...

android移动端调试—前端开发工具Eruda

DDD4V的博客

09-08

4766

Eruda 通过CDN使用： <script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script> <script>eruda.init();</script> 通过npm安装： npm install eruda --save Js文件对于移动端来说略重（gzip后大概100kb）。建议通过url参数来控制是否加载调试器，比如： (function () { var...

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

Ryan的博客

05-11

2277

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"

移动前端调试工具

12-25

nwjs 用于模拟查看html5代码跑在移动设备上的界面UI

腾讯开源的手机前端开发调试利器 vConsole.zip

07-19

1 前言我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log； (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？2 vConsole前端调试面板莫慌，抱紧vConsole！vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型：console.log('foo'); // 白底黑字 console.info('bar'); // 白底紫字 console.debug('oh'); // 白底黄字 console.warn('foo'); // 黄底黄字 console.error('bar'); // 红底红字第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。3 使用方法Talk is cheap, show me the code.首先，在需要展示日志的页面引入vConsole模块。我们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各种debug钩子。引入后，会自动生成window.vConsole对象实例。<head> [removed][removed] </head>对于更通常的情况，我们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就需要开发者自行判断引入模块的时机。以PHP为例，通过判断URL中有无 dev_mode参数来选择性加载vConsole：<?php if($_GET['dev_mode'=='1'){?> [removed][removed] <?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，可以在module中使用require()引入vConsole：var vConsole =require('path/to/vconsole.min.js');好了，怎么打印log呢？与电脑端一致，可以直接使用console.log()等方法来打印日志，目前支持的方法有：console.log('foo'); console.info('bar'); console.debug('oh'); console.warn('foo'); console.error('bar');若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台前端面板。因此不必担心兼容性问题。引入模块后，vConsole会有一小段时间用于初始化工作，在渲染出面板HTML之前将无法立即打印log。因此，若要在引入模块后立即打印log，应使用vConsole.ready()方法：vConsole.ready(function() { console.log('Hello World'); });4 在线demo微信扫描以下二维码（或微信内长按图片识别二维码），即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。标签：腾讯前端工具

移动端js调试工具：eruda

qq_42676363的博客

06-11

1625

通常写前端页面都在Chrome浏览器的开发模式下进行调试，但是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，但是在手机的浏览器上有问题的情况；也有的页面是需要放在微信公众号中的，调用了微信JSSDK的方法，必须得通过手机上的微信内置浏览器才能使用，这个时候如果遇到了报错，只能够通过alert一步一步地定位问题。今天发现了一个好用的可以在手机浏览器上直接定位问题的插件：eruda.js 在html中引用如下js: <script type="text/javascript" s

移动端调试——eruda

weixin_45630494的博客

12-28

619

1、下载 npm install eruda --save 2、插入 /* #ifdef H5 */ // H5调试工具 if (process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'development') { const eruda = require('eruda') eruda.init() // 初始化 } /* #endif */

前端页面，手机端调试工具 vConsole.js

欢迎来到动感地带

04-03

1537

1.引入 <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

手机端调试工具 vconsole、eruda 使用方法

qq_37550440的博客

06-27

1314

在手机端能正常查看log及网络请求。。

移动端调试工具-vConsole

weixin_43867229的博客

03-26

1521

它可以直接嵌入到你的web页面中，提供了控制台日志，网络请求查看，元素查看等功能。：现在，你可以在手机上打开你的网页，然后在页面中看到vConsole的调试面板。

Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）

仙魁XAN

04-09

8112

Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）一、简单介绍二、Eruda 1、安装 2、使用 3、实用三、vConsole 1、安装 2、使用 3、实用四、关键代码五、CDN 方式使用 Eruda 、vConsole 六、其他一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似...