Browser

概述

eruda 官方文档

与 vconsole 类似，在页面中注入控制面板，适合在移动设备调试网页时使用。

场景

在移动端设备中调试网页是一件比较麻烦的事情，因为缺少了浏览器的调试面板，我们很难直观的看到代码执行发生了 什么错误。

eruda 旨在解决这个问题，它在页面中注入了一个面板，模拟了浏览器的调试面板，让你可以直观的看到网页的执行情况。 比如 元素、网络请求、日志输出等等。

安装

npm

npm install eruda

pnpm

pnpm add eruda

yarn

yarn add eruda

使用

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

或者使用动态引入：

if (import.meta.env.MODE === 'development') {
  import('eruda').then(eruda => eruda.default.init())
}

预览

https://eruda.liriliri.io/

对比

与 vconsole 相同，都是在页面中注入控制面板，支持在移动设备调试网页。

eruda 还可以通过插件添加更多的功能，比如添加 vue 调试面板，当有个性的需求时，eruda 是个更好的选择。