or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

code-snippets.mdconsole-tool.mdcore-api.mdelements-inspector.mdindex.mdinfo-display.mdnetwork-monitor.mdresource-manager.mdsettings-manager.mdsource-viewer.mdtool-development.md
tile.json

tessl/npm-eruda

Console for Mobile Browsers providing comprehensive debugging tools for mobile web development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eruda@3.4.x

To install, run

npx @tessl/cli install tessl/npm-eruda@3.4.0

index.mddocs/

Eruda

Eruda is a comprehensive mobile browser debugging console that provides developers with a full-featured DevTools-like experience directly within mobile web browsers. It offers a complete suite of debugging tools including a JavaScript console, network request monitoring, DOM element inspection, resource management, code snippet execution, and source code viewing.

Package Information

  • Package Name: eruda
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install eruda --save-dev

Core Imports

import eruda from "eruda";

For CommonJS:

const eruda = require("eruda");

CDN usage:

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

Basic Usage

import eruda from "eruda";

// Initialize Eruda
eruda.init();

// Initialize with options
eruda.init({
  container: document.getElementById('console-container'),
  tool: ['console', 'elements', 'network'],
  autoScale: true,
  useShadowDom: true,
  defaults: {
    displaySize: 40,
    theme: 'Dark'
  }
});

// Show specific tool
eruda.show('console');

// Add custom tool
eruda.add(function(eruda) {
  return new MyCustomTool();
});

Architecture

Eruda is built around several key components:

  • Main API: Core initialization and management functions for controlling the debug environment
  • DevTools Framework: Extensible tool system with built-in debugging panels
  • Tool System: Modular architecture allowing custom tools and extensions
  • Entry Button: Draggable floating button for accessing the debug interface
  • Theme System: Customizable themes with automatic dark mode detection
  • Utility Libraries: Shared utilities for DOM manipulation, event handling, and CSS injection

Capabilities

Core API

Main Eruda initialization and control functions for managing the debugging environment.

// Initialize Eruda
function init(options?: InitOptions): void;

// Show/hide DevTools
function show(name?: string): Eruda;
function hide(): Eruda;

// Tool management
function add(tool: Tool | ((eruda: Eruda) => Tool)): Eruda;
function remove(name: string): Eruda;
function get(name?: string): Tool | DevTools;

// Configuration
function scale(s?: number): number | Eruda;
function position(p?: Position): Position | Eruda;

// Cleanup
function destroy(): void;

interface InitOptions {
  container?: HTMLElement;
  tool?: string[];
  autoScale?: boolean;
  useShadowDom?: boolean;
  inline?: boolean;
  defaults?: InitDefaults;
}

interface InitDefaults {
  transparency?: number;
  displaySize?: number;
  theme?: string;
}

interface Position {
  x: number;
  y: number;
}

Core API

Console Tool

JavaScript console with syntax highlighting, command history, and advanced logging capabilities.

// Get console tool instance
const console = eruda.get('console');

// Console methods (chainable)
console.log(...args): ErudaConsole;
console.error(...args): ErudaConsole;
console.warn(...args): ErudaConsole;
console.info(...args): ErudaConsole;

// Advanced features
console.filter(pattern: string | RegExp | ((log: Log) => boolean)): void;
console.html(htmlStr: string): void;

// Configuration
console.config.set(key: string, value: any): void;

Console Tool

Elements Inspector

DOM element inspection and manipulation with visual element selection and detailed property viewing.

// Get elements tool instance
const elements = eruda.get('elements');

// Element selection
elements.select(el: HTMLElement): void;

// Configuration
elements.config.set(key: string, value: any): void;

Elements Inspector

Network Monitor

Network request monitoring with detailed request/response inspection and filtering capabilities.

// Get network tool instance
const network = eruda.get('network');

// Network operations
network.clear(): void;
network.requests(): object[];

Network Monitor

Resource Manager

Management of browser resources including localStorage, sessionStorage, cookies, scripts, and stylesheets.

// Get resources tool instance
const resources = eruda.get('resources');

// Resource operations
resources.refresh(): void;
resources.refreshLocalStorage(): void;
resources.refreshSessionStorage(): void;
resources.refreshCookie(): void;

Resource Manager

Source Viewer

Source code viewing with syntax highlighting and support for multiple content types.

// Get sources tool instance
const sources = eruda.get('sources');

// Content display
sources.set(type: string, val: any): Sources;

Source Viewer

Info Display

Information display system for showing system details and custom information entries.

// Get info tool instance
const info = eruda.get('info');

// Info management
info.add(name: string, content: string | (() => void)): Info;
info.get(): InfoItem[];
info.get(name: string): string;
info.remove(name: string): void;
info.clear(): void;

Info Display

Code Snippets

Code snippet management and execution system for reusable debugging code.

// Get snippets tool instance
const snippets = eruda.get('snippets');

// Snippet management
snippets.add(name: string, fn: Function, desc: string): void;
snippets.remove(name: string): void;
snippets.run(name: string): void;
snippets.clear(): void;

Code Snippets

Settings Manager

Settings management system for configuring tools and creating custom settings interfaces.

// Get settings tool instance
const settings = eruda.get('settings');

// Settings creation
settings.switch(cfg: object, name: string, desc: string): void;
settings.select(cfg: object, name: string, desc: string, values: string[]): void;
settings.range(cfg: object, name: string, desc: string, options?: RangeOptions): void;
settings.button(text: string, handler: Function): void;

Settings Manager

Tool Development

Base classes and utilities for creating custom Eruda tools and extensions.

// Tool base class
class Tool {
  name: string;
  init(el: unknown): void;
  show(): Tool | undefined;
  hide(): Tool | undefined;
  destroy(): void;
}

// Create custom tool
const MyTool = eruda.Tool.extend({
  name: 'myTool',
  init(el) { /* implementation */ },
  show() { /* implementation */ },
  hide() { /* implementation */ }
});

Tool Development

Types

interface Eruda {
  // Core methods
  init(options?: InitOptions): void;
  destroy(): void;
  scale(s?: number): number | Eruda;
  position(p?: Position): Position | Eruda;
  
  // Tool management
  get(name?: string): Tool | DevTools;
  add(tool: Tool | ((eruda: Eruda) => Tool)): Eruda;
  remove(name: string): Eruda;
  show(name?: string): Eruda;
  hide(): Eruda;
  
  // Tool constructors
  Console: ErudaConsoleConstructor;
  Elements: ElementsConstructor;
  Network: NetworkConstructor;
  Sources: SourcesConstructor;
  Resources: ResourcesConstructor;
  Info: InfoConstructor;
  Snippets: SnippetsConstructor;
  Settings: SettingsConstructor;
  Tool: ToolConstructor;
  
  // Utilities
  util: Util;
  version: string;
}

interface Util {
  isErudaEl(val: any): boolean;
  isDarkTheme(theme?: string): boolean;
  getTheme(): string;
  evalCss(css: string): HTMLStyleElement;
}

interface Chobitsu {
  register(domain: string, implementation: object): void;
}

interface Log {
  type: string;
}

interface InfoItem {
  name: string;
  val: string;
}

interface ElementsConfig {
  /** Catch Event Listeners */
  overrideEventTarget?: boolean;
  /** Auto Refresh */
  observeElement?: boolean;
}

interface ResourcesConfig {
  /** Hide Eruda Setting */
  hideErudaSetting?: boolean;
  /** Auto Refresh Elements */
  observeElement?: boolean;
}

interface SourcesConfig {
  /** Show Line Numbers */
  showLineNum?: boolean;
  /** Beautify Code */
  formatCode?: boolean;
  /** Indent Size */
  indentSize?: string | number;
}

interface ConsoleConfig {
  /** Asynchronous rendering */
  asyncRender?: boolean;
  /** Enable JavaScript execution */
  jsExecution?: boolean;
  /** Catch global errors */
  catchGlobalErr?: boolean;
  /** Override console */
  overrideConsole?: boolean;
  /** Display extra information */
  displayExtraInfo?: boolean;
  /** Display unenumerable properties */
  displayUnenumerable?: boolean;
  /** Access getter value */
  displayGetterVal?: boolean;
  /** Stringify object when clicked */
  lazyEvaluation?: boolean;
  /** Auto display if error occurs */
  displayIfErr?: boolean;
  /** Max log number */
  maxLogNum?: string | number;
}

interface SettingsRangeOptions {
  min?: number;
  max?: number;
  step?: number;
}