# Eruda — Console for Mobile Browsers

> A lightweight, embeddable developer console for mobile browsers that brings desktop-class debugging to any webpage on phones and tablets.

## Install

Save as a script file and run:

# Eruda — Console for Mobile Browsers

## Quick Use
```html
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
```

## Introduction
Eruda is an embeddable JavaScript console designed for mobile browsers. It provides a floating button that opens a full developer tools panel directly in the page, letting you inspect elements, view network requests, monitor performance, and run JavaScript on any device without desktop DevTools access.

## What Eruda Does
- Adds a console panel for logging, errors, and interactive JavaScript evaluation on mobile
- Provides a DOM element inspector with computed style viewing
- Displays network request details including headers, timing, and response bodies
- Shows device and page information such as user agent, viewport size, and feature support
- Offers a resource panel listing loaded scripts, stylesheets, images, and localStorage entries

## Architecture Overview
Eruda is a single-file JavaScript library that injects a draggable floating button and a set of tabbed panels into the current page DOM. Each panel (Console, Elements, Network, Resources, Info, Snippets, Sources) is a self-contained module. Eruda hooks into native browser APIs like console.log, XMLHttpRequest, and fetch to intercept calls and display them in its own UI. The library is framework-agnostic and works on any webpage.

## Self-Hosting & Configuration
- Include via CDN script tag or install with `npm install eruda` and bundle with your app
- Call `eruda.init()` to activate; pass a container element to control where the button appears
- Use `eruda.init({tool: ['console', 'elements']})` to load only specific panels
- Add community plugins like eruda-fps, eruda-features, or eruda-code for extended functionality
- Remove from production builds using environment checks or conditional script loading

## Key Features
- Zero-dependency embeddable console that works on iOS Safari, Android Chrome, and WebView
- Built-in element inspector with tap-to-select and box model visualization
- Network tab captures XHR and fetch requests with full detail
- Snippet panel for saving and rerunning useful JavaScript snippets
- Plugin architecture allows community extensions without bloating the core

## Comparison with Similar Tools
- **vConsole** — Tencent's mobile console with similar scope; Eruda offers more built-in panels and a richer plugin ecosystem
- **Chrome Remote Debugging** — requires USB connection and desktop Chrome; Eruda works standalone on any device
- **Weinre** — older remote inspection tool requiring a separate server; Eruda runs entirely in the browser
- **Safari Web Inspector** — macOS-only remote debugging; Eruda is cross-platform and needs no pairing

## FAQ
**Q: Does Eruda affect page performance?**
A: The library adds roughly 100 KB gzipped. It is designed for debugging, not production, so include it conditionally during development or QA.

**Q: Can I use Eruda with React or Vue apps?**
A: Yes. Eruda is framework-agnostic. Just call eruda.init() after the DOM is ready, regardless of your framework.

**Q: How do I add custom plugins?**
A: Write a plugin following the Eruda plugin API and register it with eruda.add(plugin). Community plugins are available on npm.

**Q: Is Eruda suitable for production error monitoring?**
A: No. It is a development and debugging tool. For production monitoring, use dedicated services like Sentry or LogRocket.

## Sources
- https://github.com/liriliri/eruda
- https://eruda.liriliri.io/

---
Source: https://tokrepo.com/en/workflows/asset-f42f1884
Author: Script Depot