Quick DOM

About

Quick DOM supercharges your front-end debugging workflow by bringing powerful DevTools-style DOM utilities directly into your everyday browsing experience.

Instantly store any element as a global variable, inspect elements with a keyboard shortcut, copy advanced DOM data in seconds, and track real-time element events — without digging through DevTools menus.

Core Features:

Store as Global Variable
Right-click any element and instantly assign it to window.temp1, temp2, and so on, just like in Chrome DevTools.

Keyboard-Powered DOM Inspector
Activate Inspector Mode with a shortcut and hover to highlight elements in real time. Click to instantly capture and store.

Advanced Copy Utilities
Copy outerHTML, unique CSS selectors, JavaScript query paths, computed styles, XPath, and full XPath with a single action.

Element Event Observer
Spy on DOM interactions effortlessly. Select an element and toggle which events to monitor (Mouse, Keyboard, Form, High-Frequency, etc.). All fired events are intercepted and logged silently to your console, color-coded by category with extracted payload data.

Manage Active Observers
Keep track of everything you are monitoring. Open the inline Manage Active list to see all running event observers. Hovering an active observer highlights the target element on the webpage, and a single click lets you unbind the listeners.

Clean, Developer-Focused Experience
Includes a subtle highlight overlay, lightweight action menu, and in-page toast notifications that confirm exactly what was saved.

Feature Request Form: https://forms.gle/qAxCMAWsMP5Rx9WW8