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.
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);
});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);The Elements inspector provides several built-in features:
$0, $1, etc. in consoleIntegration 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);