QuickInspect

Hold Alt and hover any element to see its selectors, box model, styles, accessibility info and events without opening DevTools.

QuickInspect shows the useful 80% of DevTools element inspection without opening DevTools. Hold a key, hover any element, and a floating panel shows its selectors, Playwright locators, box model, computed styles, accessibility information and event listeners. Release the key and the page is back to normal! The extension is open source and can be found at: https://github.com/KostaD02/QuickInspect Inspecting: 1. Hold Alt (or the key picked in the popup) and move the mouse over the page. 2. The element under the cursor is highlighted with its margin, border and padding, plus the gaps between items when it is a flex or grid container, and the panel sits beside it so it does not cover the element when there is room. 3. Press a key to copy while hovering: S for the CSS selector, X for the XPath, L for the best Playwright locator, H for the outer HTML and T for the text. 4. Click while holding the key to pin the panel. A pinned panel can be scrolled, clicked and dragged by its head. 5. Use the Up and Down arrow keys to move to the parent or child - Down retraces the way you came up - and, once the panel is pinned, Left and Right to move between siblings. 6. Release the key to hide everything, or press Esc when the panel is pinned. Works on http, https and local file pages. For file:// pages, turn on "Allow access to file URLs" on the extension's details page. Edit in Place: 1. Pin the panel on the element you want to change. 2. Click a value to edit it on the page - computed styles, width and height, margin, padding, border width and gap, attributes, role, aria-* attributes, media sources and the text of leaf elements. 3. Use "+ style" and "+ attribute" to add new ones, "×" to remove an attribute, and "reset" to undo every edit on the element. 4. Edits only live in the page and are gone on reload. Open in Editor: 1. Run your app on a Vite or Next.js dev server. 2. Hover an element - the Context section shows the file and line where it was written. 3. Press O to open that line in your editor. QuickInspect reads the source markers Qwik, Astro and code-inspector-plugin stamp on elements, the template positions Nuxt DevTools records for Vue, Svelte's dev metadata and React's debug information, and follows source maps back to your original files. Production builds carry none of this, so the source row only appears in development. Settings: 1. Click the QuickInspect icon in the toolbar to open the popup. 2. Use the pill to turn the extension on and off, and the key picker to choose the hold key - Alt / Option, Ctrl, Shift or Cmd / Win. 3. Click the gear icon to open the rest of the settings. 4. Turn editing in place on or off. 5. Show or hide whether the current page can open sources in your editor. 6. Turn the margin, border, padding and gap highlight around the hovered element on or off. 7. Choose which panel sections to show - Box, Events, Styles, Accessibility, Attributes, Media, Context and Selectors. Every setting is saved automatically and applies to open tabs immediately - no reload needed. Features: 1. Zero Friction: Hold Alt (configurable) and hover. The panel and highlight only appear while the key is down, and the page is back to normal the moment you let go. 2. Selectors: A short unique CSS selector and an XPath for every element. 3. Playwright Locators: Every applicable strategy ranked the way Playwright codegen ranks them (getByTestId, getByRole, getByLabel, getByPlaceholder, getByAltText, getByTitle, getByText and a CSS fallback), each with a live match count so you can see which one is unique. 4. Box Model: Position, size, margin, padding, border and the gap of flex and grid containers, with DevTools-style margin, border, padding and gap bands drawn on the page. 5. Computed Styles: The values that matter - display, position, typography, colors with swatches, and anything that differs from the default such as z-index, opacity, border-radius, box-shadow, flex and grid properties. 6. Accessibility: Computed role, accessible name, focusability, tabindex and every aria-* attribute. 7. Context: Ancestor chain, child count, text content, the shadow host for elements inside an open shadow root, and the owning React, Vue, Angular or Svelte component when one can be found. 8. Media: Natural size, source, alt text and duration for images, video, audio, canvas and SVG. 9. Event Listeners: Listeners added with addEventListener (with capture, once and passive flags), inline on* handlers, React props, Vue invokers and jQuery handlers - no debugger permission needed. 10. Open in Editor: On a Vite or Next.js dev server, including Nuxt, see where an element was written and open that line in your editor with one key. 11. Copy Anything: One key per payload while hovering - selector, XPath, best locator, outer HTML or text. 12. Pin and Navigate: Pin the panel to scroll, click and drag it, walk up and back down the tree with Up and Down, and move between siblings with Left and Right. 13. Out of the Way: The panel opens beside the element you are inspecting instead of on top of it whenever the page has room. 14. Edit in Place: Change styles, sizes, spacing, gaps, attributes, ARIA, media sources and text right on the page, and undo it all with one click. 15. Shadow DOM Aware: Hit testing reaches into open shadow roots, selectors are scoped to the element's root, and locator counts pierce shadow roots like Playwright does. 16. Framework Agnostic: Works on any page, whether it is plain HTML or built with React, Vue, Angular, Svelte or anything else. Use cases: 1. Test Automation: Grab a unique Playwright locator or CSS selector in one key press, with the match count already checked. 2. Front-end Debugging: Check an element's box model, gaps, computed styles and event listeners without opening DevTools. 3. Accessibility Reviews: See the computed role, accessible name, focusability and ARIA attributes of anything on the page. 4. Live Tweaking: Try style, spacing, attribute and text changes on the page before touching the code. 5. Jumping to Code: On a local dev server, go from an element on the page straight to the line that renders it. 6. Exploring Sites: See how a page is built - which framework, which component and which listeners sit behind an element. Privacy: QuickInspect works entirely within your browser. No data is sent to any external server. Page content is only read to show the panel and is never stored, and your settings are saved locally to Chrome storage. On a Vite or Next.js dev server, the only requests go to that same server, to find and open an element's source file. Edits only live in the page and are gone on reload.