Inspect Canvas for VS Code

Open a web page inside VS Code and click any element to inspect it. From the same panel, you can edit its visual styles, send the element and its source location to AI for a code change, or run a design audit.

Inspect Canvas works with running development servers and local HTML files. It connects what you see in the preview to the code in your workspace, so you can move from a visible UI problem to the relevant source without manually searching for the element.

Features

• Click-to-inspect — Select an element in the rendered page and see its layout, spacing, dimensions, typography, color, and border properties.
• Visual style editing — Change common properties from the side panel and apply supported edits back to source.
• AI code changes — Describe the result you want and open VS Code Chat with the selected element, selector, and source location already attached.
• Focused design audits — Get prioritized usability, accessibility, responsive, hierarchy, and consistency findings without changing code.
• Source resolution — Jump from a visible element to its file:line location, with markup and authored CSS as a fallback.
• Responsive preview — Test preset and custom viewport sizes without leaving the inspector.
• Flexible targets — Open a local HTML file or inspect any app available from a development URL.
• Integrated workflow — Preview in VS Code, an external browser, or both, with target switching and reload controls.

How It Works

1. Run Inspect Canvas: Start, or right-click an HTML file or folder and choose Open with Inspect Canvas.
2. Enter a running app URL, HTML file, or folder.
3. Turn on Inspect, then select an element in the canvas.
4. Edit its properties, ask AI to fix it, or run a focused design audit.

For framework projects, start the app's development server first and use its local URL, such as http://localhost:3000. Static HTML files and folders can be opened directly.

AI Fixes

Select the sparkle button on an inspected element, describe the change, and choose Send to VS Code Chat. The request includes the element selector and resolved source location so the assistant can open the relevant file and keep unrelated code unchanged.

If source resolution is unavailable, Inspect Canvas includes the selected markup and authored CSS to help the assistant locate the matching implementation.

Design Audits

The AI panel includes a separate Design audit section. Choose Run audit in VS Code Chat to load the bundled audit workflow and receive prioritized findings covering:

• usability and interaction clarity
• accessibility and keyboard behavior
• contrast, typography, spacing, and hierarchy
• responsive behavior and content fit
• consistency with nearby components and design tokens

Audits are review-only. They do not change code unless you explicitly ask the assistant to apply a recommendation afterward.

Commands

• Inspect Canvas: Start asks for a running prototype URL, HTML file, or folder, then starts the inspector.
• Open with Inspect Canvas is available when you right-click an HTML file or folder in Explorer.
• Inspect Canvas: Stop stops the inspector process.
• Inspect Canvas: Open in VS Code opens the inspector in an editor tab.
• Inspect Canvas: Open in Browser opens the running inspector.

Settings

• inspectCanvas.target — URL or workspace-relative file or folder to inspect.
• inspectCanvas.port — Preferred local inspector port. If unavailable, the extension selects a nearby free port.
• inspectCanvas.previewLocation — Open in editor (default), browser, or both.