WebSpec

Overview WebSpec is a design and development toolkit for the live web. Inspect elements, copy assets, edit on the page, and preview responsive layouts without opening DevTools. Hover to inspect. Click to copy. Edit text, color, and layers locally. No account. No watermarks. Everything stays on your device. Inspect Hover any element to see live details: tag, size, colors, typography, spacing, and layout, in a clean tooltip built for design work. Copy Asset Copy text, colors, HTML, CSS, images, SVG, and other assets from the page in one click. Edit Make quick visual edits on the page: text, colors, layout, and layers. Reorder layers with drag or arrow keys, duplicate/copy/paste elements, and hide layers — all locally in your browser. Undo/redo supported. Responsive Preview the page at common device sizes and capture screenshots for your device or clipboard. HOW TO USE WEBSPEC IN CHROME Click the WebSpec icon (or press Alt+Shift+W) Choose Inspect, Copy Asset, Edit, or Responsive Hover, select, edit, or capture, then close when you are done For designers, frontend developers, and anyone who needs a clean inspect, copy, and edit loop on the live web. One extension, one shortcut.