tessl/npm-eruda
Console for Mobile Browsers providing comprehensive debugging tools for mobile web development
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
elements-inspector.mddocs/
Elements Inspector
DOM element inspection and manipulation with visual element selection and detailed property viewing. The Elements tool provides comprehensive DOM debugging capabilities similar to browser DevTools.
Capabilities
Element Selection
Select and inspect DOM elements with visual highlighting and navigation.
/**
* Select DOM element for inspection
* @param el - DOM element to select and inspect
*/
select(el: HTMLElement): void;Usage Examples:
const elements = eruda.get('elements');
// Select specific element
elements.select(document.querySelector('#main-header'));
elements.select(document.body);
// Select from element references
const button = document.getElementById('submit-btn');
elements.select(button);
// Select from event handlers
document.addEventListener('click', (e) => {
elements.select(e.target);
});Configuration
Elements tool configuration options for customizing inspection behavior.
// Configuration object
const config: {
set<K extends keyof ElementsConfig>(name: K, value: ElementsConfig[K]): void;
};
interface ElementsConfig {
/** Catch and display event listeners */
overrideEventTarget?: boolean;
/** Auto refresh element tree when DOM changes */
observeElement?: boolean;
}Usage Examples:
const elements = eruda.get('elements');
// Configure elements inspector
elements.config.set('overrideEventTarget', true); // Show event listeners
elements.config.set('observeElement', true); // Auto-refresh on DOM changes
// Disable auto-refresh for performance
elements.config.set('observeElement', false);Features
The Elements inspector provides several built-in features:
DOM Tree Navigation
- Hierarchical View: Complete DOM tree with expandable/collapsible nodes
- Breadcrumb Navigation: Path navigation showing selected element hierarchy
- Search: Find elements by tag name, class, ID, or attributes
- Element Highlighting: Visual overlay highlighting selected elements
Element Details
- Attributes Panel: View and edit element attributes
- Styles Panel: Computed styles and CSS rules inspection
- Event Listeners: Display attached event listeners (when overrideEventTarget enabled)
- Properties Panel: Element properties and methods
Element Manipulation
- Element Deletion: Remove elements from DOM
- HTML Editing: Edit element HTML content
- Attribute Editing: Modify element attributes
- CSS Class Management: Add/remove CSS classes
Selection Methods
- Click Selection: Enable selection mode to click on page elements
- Console Integration: Selected elements available as
$0,$1, etc. in console - History: Maintain selection history for quick navigation
Integration Examples:
const elements = eruda.get('elements');
const console = eruda.get('console');
// Enable element selection mode and log selected element
elements.select(document.querySelector('.important'));
// Selected element is available in console as $0
console.log('Selected element:', '$0'); // Logs the selected element
// Chain with other tools
eruda.show('elements');
setTimeout(() => {
elements.select(document.querySelector('form'));
eruda.show('console');
console.log('Form element properties:', '$0');
}, 1000);Install with Tessl CLI
npx tessl i tessl/npm-eruda