Inspect Element - CSS Viewer, Copy CSS & Fonts by SuperchargeBrowser

Inspect element and copy its CSS values: fonts, colors and spacing, with a note and screenshot for your AI coding tool. Local.

SuperchargeInspect is a CSS viewer and element inspector. Inspect element styles on any page: see the font, the text and background colors, the spacing, and the box model. Point at an element with the mouse or the arrow keys, then click it or press Enter to lock it. Click any value to copy it. Or copy the CSS values with your note and an annotated screenshot, and paste them into an AI coding tool. ■ WHAT THE PANEL SHOWS • Typography: the declared font family. The panel shows the first family and copies the full list. This is the font the page asks for. It does not check which font is actually rendered. • Colors: text, background, and border, in hex. A partly transparent color is shown as rgba. • Box: padding, border, and margin on all four sides, plus the content width and height. Gap, corner radius, and display are listed too. Click any value in the panel to copy just that value. ■ HOW TO COPY After you lock an element, write a note in the note field. The note tells the AI coding tool what to change. Then choose how to copy: • Copy reference: copies the text and an annotated screenshot together. • Copy text only: copies the text, with no image. • Copy image only: copies a clean screenshot of the element. • Save PNG: saves the clean screenshot as a file. Copy text only, Copy image only, and Save PNG are in the More ways to copy menu, next to Copy reference. ■ WHAT YOU PASTE INTO AN AI CODING TOOL The text holds your note, the page address, the element and its locator, the viewport size and scroll position, the element's position and size, the observed styles, and a short markup excerpt. The annotated screenshot shows the element, with your note, the page address, the locator, and a short style line under it. Some tools keep only the image, and some keep only the text. If a part is missing, copy it again with Copy text only or Copy image only. ■ KEYBOARD • Alt+Shift+E: start inspecting. You can also use the toolbar button. • Arrow keys: move to the previous or next element. • Ctrl+Up and Ctrl+Down: move to the parent or child element. On macOS, use Option+Up and Option+Down. • Enter: lock the element. Press Enter again to write a note. • Ctrl+Enter (Cmd+Enter on macOS): Copy reference. Before you lock an element, it locks and copies in one step. • Esc: go back to picking, or close the panel. • ?: show all shortcuts. ■ PRIVACY AND PERMISSIONS Everything you inspect stays on your device. The extension makes no network calls and sends no data. There is no account. It remembers your last pick on each page until the browser closes, so the next inspection can start there. It also remembers your light or dark theme choice. It keeps a small count of copies, and whether you answered or closed the rating request and the tips, so it can ask at the right time. This stays on your device. Nothing else is stored and nothing is sent. A screenshot leaves your device only when you save it or paste it somewhere. What you paste into another app is then handled by that app. Built by SuperchargeBrowser. Questions or ideas: support@superchargebrowser.com