Connect your browser-based UI inspection tools directly to your VS Code workspace. This extension acts as a secure, local bridge for the Figma CSS Diff Chrome extension.
🚀 Features
- Locate in Code: Click a "Locate" button in your browser to instantly open the correct file and line in VS Code.
- Exact Match: When source location data is available (
data-uic-loc), jumps directly to the exact file and line — no search needed. - Smart Search: Scores files by IDs, class names, ancestor context, and CSS property/value pairs. Tailwind utility classes are automatically filtered out so they don't pollute results.
- Multi-Window Support: Intelligently follows your focus if you have multiple VS Code windows open.
- Auto-Takeover: Automatically claims the bridge port when you switch projects.
🛠 Setup
- Install from Marketplace: Search for UI Checker Bridge in the VS Code Extensions view or click the link.
- Ensure you have the Figma CSS Diff Chrome extension installed.
- The bridge starts automatically on port
9876. You can change this in VS Code settings if needed.
⚙️ Configuration
ui-checker-bridge.port: The WebSocket port (default:9876).ui-checker-bridge.autoTakeover: Enable/disable automatic port claiming on window focus.ui-checker-bridge.searchExtensions: File extensions to search (default:tsx jsx ts vue svelte astro html css scss less).ui-checker-bridge.additionalExcludePatterns: Extra glob patterns to exclude on top of the built-in list (node_modules,dist,.next,coverage, etc.). Example:["**/storybook-static/**"].ui-checker-bridge.maxFileSize: Files larger than this are skipped (default:1048576= 1 MB). Lower it to speed up search on large monorepos.
📄 License
MIT © Vinh Nguyen (Vincent)