Eruda 一个小而美的移动端调试神器

最新推荐文章于 2024-02-02 17:44:25 发布
VIP文章 最新推荐文章于 2024-02-02 17:44:25 发布
阅读量2.8k 收藏 5
点赞数 2
分类专栏： 前端 javascript reactjs 文章标签： eruda 调试工具 vconsole devtools 移动端调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43254766/article/details/85032949
版权

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。，首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8、A lightweight, extendable front-end developer tool for mobile web page.

引言

​　　日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于fiddler、Charles、chrome devtools、Firebug、vconsole还有Safari远程调试等比较熟悉，甚至有些是我可能也没有用过的；

这里喷一句吧，谁都别给我提IE啊，IE那个不叫调试工具，那叫坑爹神器，话说最近不是又甩锅了，把自己的革命老根据地都甩了。

俗话说预先善其事必先利其器，今天想给大家分享的是一个可能被人们忽略的小工具，为什么说被人们忽略呢？因为发现github上它才4.6k Star、457 Fork、Watch 173次，也就是说千万开发者中知道它的人可能不超过5w，于是决定分享一波，此文重在引导，希望能帮大家开发中带来一点点便利、效率的提升：

eruda 一个可能被人遗忘的调试神器，在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端,宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮!，公众号：honeyBadger8、vConsole：一个轻量、可拓展、针对手机网页的前端开发者调试面板

这里是IT平头哥联盟，我是首席填坑官—苏南小哥,用心分享 做有温度的攻城狮。
公众号：honeyBadger8，群：912594095

Eruda是什么？

Eruda是什么？Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版（没有chrome强大 这个是可以肯定的），其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等等。

虽说日常的移动端开发时，一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试，确保功能/页面展示等都没有问题了，才会提交测试；

但是前面都讲了，只是模拟、

最低0.47元/天 解锁文章
苏南South
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Eruda:移动浏览器控制台-开源
06-04
使用 Eruda，您可以显示 JavaScript 日志、检查 dom 状态、显示请求状态、显示 localStorage、cookie 信息、显示 url、用户代理信息、包括最常用的片段、Html、js、css 源查看器和安装。 JavaScript 文件非常大（压缩后大约 100kb），因此不适合包含在移动页面中。 建议确保仅当 eruda 设置为 true 时才加载 eruda。 初始化时，可以传入一个配置对象。Container元素，如果不设置，会直接在html根元素下追加一个元素。 选择您想要的默认工具，默认情况下将添加所有工具。 有几个可用的插件，比如 eruda-fps，它显示页面 fps 信息，eruda-features，它会让你看到特征检测，eruda-timing，显示性能和资源计时，eruda-memory，显示页面内存信息， eruda-code，运行 JavaScript 代码等等。
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
仙魁XAN
04-09 7385
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 一、简单介绍 二、Eruda 1、安装 2、使用 3、实用 三、vConsole 1、安装 2、使用 3、实用 四、关键代码 五、CDN 方式使用 Eruda 、vConsole 六、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似...
移动端调试工具
qq_39460057的博客
09-27 181
1、vConsole (体积 286k);2、eruda(体积 454k)
【Vue3】eruda移动端控制台调试工具+动态引入（html通用）
最新发布
yasyList的博客
02-02 509
【Vue3】eruda移动端控制台调试工具+动态引入（html通用）
移动端微信浏览器调试工具整理eruda，微信x5调试工具无法使用，推荐新工具eruda、vconsole和debugxweb
艾小逗
06-28 5010
新版本微信x5调试工具，debugtbs.qq.com无法使用，提示不支持切换x5内核 推荐新工具`eruda`和`debugxweb.qq.com`
webApp移动端前端调试工具vconsole和eruda
weixin_45006814的博客
07-06 501
移动端调试工具
fps测试网页_Eruda移动端网页前端调试神器
weixin_39734646的博客
11-29 3314
Eruda是什么？Eruda是一个专为手机网页前端设计的移动端调试面板，类似于vconsole但比vconsole更加强大，基本等于电脑浏览器调试器DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。- 特性 -•按钮拖拽，面板透明度大小设置。•Console 面板：捕获 Console 日志，支...
web 调试神器 eruda
MrLee的博客
09-05 8047
一，Eruda是什么 Eruda 是一个专为前端移动端设计的调试面板，类似Chrome DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等等。 查看演示：https://eruda.liriliri.io/ 源码链接：https://github.com/liriliri/eruda 二，如何使用 方式一，默认引入： <script src="//cdn.jsdelivr
移动端H5调试工具——eruda
乌龙茶不甜的博客
08-22 1705
移动端H5调试工具——eruda
移动端调试神器（eruda）
weixin_30629977的博客
05-04 279
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此， 各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这时候就蛋疼了，明明chrome调试工具中是正常的， 一到某个浏览器中就炸了，怎么办，又无法像在chrom...
eruda操作
豪哥的博客
10-24 2412
eruda操作
vue 使用 eruda
qq_31706077的博客
09-02 853
eruda
移动端网页开发调试神器Eruda的介绍与使用技巧
08-29
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，而最近发现了一个新的调试方法，所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料，...
h5移动端调试工具vconsole/eruda
03-21
vconsole.js/eruda.js
Eruda是一个专为手机网页前端设计的调试面板
08-08
Eruda 是一个专为手机网页前端设计的调试面板
whistle.inspect:集成eruda和vConsole等调试H5页面工具的插件
05-22
更多移动端调试方法参见：。 安装 首先需要安装最新版，如果你的机器已经安装了whistle，请确保whistle为最新版本： 安装及如何使用whistle参见 如何升级whistle参见。 安装inspect插件，执行npm全局安装即可： npm ...
eruda.min.js
03-08
用于h5调试
eruda：移动浏览器的控制台
02-04
埃鲁达 移动浏览器的控制台。 演示版 在手机上浏览： ： 为了在其他站点上尝试，请在浏览器地址栏上执行以下脚本。 [removed] ( function ( ) { ... onload = function ( ) { eruda . init ( ) } } ) ( ) ; 产品
eruda-webpack-plugin:eruda的webpack插件可帮助您开发移动应用
05-08
eruda-webpack-plugin 的的WebPack插件 ，帮助您开发移动应用程序 如何使用 npm i -- save - dev eruda - webpack - plugin // webpack.config.js const ErudaWebpackPlugin = require ( 'eruda-webpack-plugin' )...
vue移动端调试工具
08-26
Vue移动端调试工具主要有Eruda和vConsole。Eruda是一个轻量级的前端调试工具，可以用于移动端的调试。它提供了一个浮动调试面板，可以查看和修改页面的HTML、CSS和JavaScript代码。如和所示，你可以通过引入Eruda的脚本文件并在代码中调用`eruda.init()`来启用Eruda调试工具。 另一个流行的Vue移动端调试工具是vConsole，它是一个由腾讯开发的前端开发者工具。vConsole提供了类似于浏览器控制台的功能，可以查看和修改页面的日志、网络请求和DOM结构。你可以在GitHub上找到vConsole的源代码和详细的使用说明。 这两个调试工具都非常方便实用，可以帮助开发者在移动端进行调试和排查问题。你可以根据自己的需要选择适合的工具来进行Vue移动端调试。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）](https://blog.csdn.net/u014361280/article/details/124058884)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值