Eruda — Console for Mobile Browsers

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/