Situ Design Inspector
Visual React element inspection and interactive editing for VS Code.
Features
- Visual Element Inspection: Hover outlines and preview chips to see element properties
- Interactive Layout Editing: Gap detection, padding inspection, and distance measurements
- Real-time Style Editing: Comprehensive sidebar with color picker and gradient editor
- IDE Integration: Direct navigation to source code locations
- Account-based Access: Secure authentication with plan-based features
Installation
- Install from VS Code Marketplace
- Open a React project in VS Code
- Use the command palette: Ctrl+Shift+P (or Cmd+Shift+P on Mac)
- Run "Situ Design: Login to Situ Design"
- Complete the authentication flow in your browser
- Run "Situ Design: Setup Inspector" to configure your project
- Restart your development server
Usage
Activation
- Open your React project in VS Code
- Start your development server
- The inspector will automatically activate in development mode
- Hold Alt key to enable inspector mode in your browser
Element Inspection
- Alt + Click: Select an element to inspect
- Hover: View outline and dimensions of elements
- Sidebar: View and edit styles in real-time
Features by Plan
- Pro: Full inspector access, unlimited projects, priority support
- Enterprise: All Pro features + custom branding, advanced analytics
Requirements
- VS Code 1.74 or later
- React 16.8 or later
- Development environment (inspector only works in dev mode)
- Valid Situ Design account with Pro or Enterprise plan
Commands
| Command |
Description |
| Situ Design: Login |
Log in to your Situ Design account |
| Situ Design: Logout |
Log out of your account |
| Situ Design: Setup Inspector |
Install inspector in current React project |
| Situ Design: Check Account Status |
View your account and plan information |
| Situ Design: Upgrade Plan |
Visit pricing page to upgrade your plan |
Settings
The inspector respects your project's build configuration:
- Vite: Auto-configured
- Webpack: Auto-configured
- Create React App (with CRACO): Auto-configured
Troubleshooting
Inspector not showing up
- Verify you're running in development mode
- Check that your app is a React application
- Ensure the setup command completed successfully
- Restart your dev server
Authentication issues
- Clear VS Code's secret storage: Run the Logout command
- Try logging in again
- Check your internet connection
Build issues
- Verify your build tool is supported (Vite, Webpack, CRA with CRACO)
- Check build logs for errors
- Restart VS Code
Security & Privacy
- Your credentials are stored securely in VS Code's credential storage
- The inspector only works in development mode
- All communication with Situ Design servers is encrypted
Support
License
This extension requires a valid Situ Design account. See the license agreement for details.
Version: 1.0.0
Publisher: Situ Design
Repository: https://github.com/situ-design/inspector
| |
