Eruda

Eruda is a developer console designed for mobile browsers, where native DevTools are unavailable or hard to reach. Injected into a page with a single script and eruda.init(), it renders a floating entry button that opens a full debugging panel directly on the device, complete with a console, DOM elements inspector, network monitor, and resource viewers.

Because it runs entirely in the page, Eruda is invaluable for diagnosing issues on real phones, embedded webviews, and hybrid apps without remote debugging setups. Its panel system is extensible via plugins, letting teams add custom tools alongside the built-in console, sources, and settings tabs.

What You Get

• A Console tab that captures logs, errors, and lets you evaluate expressions
• An Elements panel for inspecting and editing the live DOM
• A Network monitor showing XHR and fetch requests with timing and payloads
• Resources and Info panels for storage, cookies, and environment details
• A plugin API to add custom tabs alongside the built-in tools

Common Use Cases

• Debugging web pages directly on a phone or tablet with no desktop connection
• Inspecting network requests and console output inside a mobile webview or hybrid app
• Diagnosing device-specific rendering or JavaScript bugs in the field
• Adding an on-device debugging overlay to a staging or QA build

Under The Hood

Architecture - The entry point src/eruda.js exposes the global API (init, add, remove, get, show, hide) and wires up a DevTools container plus a draggable EntryBtn. Each capability is a self-contained tool module under src/: Console, Elements, Network, Resources, Info, Sources, Snippets, and Settings, all registered into DevTools and rendered inside a shadow-DOM-isolated panel styled by SCSS in src/style. Shared helpers live in src/lib, and src/polyfill.js covers older mobile engines.

Tech Stack - Written in JavaScript with SCSS for styling, bundled by webpack into a standalone eruda.js plus a separate polyfill build, and checked with es-check to guarantee ES5 output for broad device support. It ships a bundled type definition (eruda.d.ts). There are no runtime dependencies; everything needed is compiled into the single file.

Code Quality - Tests run under Karma with Jasmine (test directory), CI runs lint, test, build, and an ES5 conformance check, and Prettier and ESLint enforce style. The clear per-tool module boundaries keep the sizeable feature set maintainable, and the project has a long, steadily released history.

API Design - Integration is deliberately minimal: include one script and call eruda.init(). The tool registry (eruda.add, eruda.get) makes the panel extensible, and configuration options let you choose which tools load and where the entry button sits. Distribution via npm and CDN (jsDelivr) plus a QR-code live demo make it easy to try on a real device, keeping the learning curve low.