Command Reference
Complete reference of all Element Insight commands in VS Code
Quick Access Commands
Open Element Insight
Opens the main Element Insight panel for scanning and exporting elements.
- Command
Element Insight: Open Panel
- Shortcut
Ctrl+Alt+E (Windows/Linux) or Cmd+Alt+E (Mac)
- Alternative
Click Element Insight icon in Activity Bar
Command Palette Access
Access all Element Insight commands through the VS Code Command Palette.
- Open Command Palette
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
- Search Commands
Type 'Element Insight' to see all available commands
- Command Categories
Commands are organized by functionality
Installation & Setup Commands
Command | Description | Usage | Category |
---|---|---|---|
Element Insight: Install Playwright | Install Playwright in the global directory for web page scanning | First-time setup, dependency issues | Dependencies |
Element Insight: Install Browsers | Install browser binaries (Chromium, Firefox, WebKit) for Playwright | After Playwright installation, browser errors | Dependencies |
Element Insight: Install Dependencies | Check and install all required dependencies automatically | First-time setup, troubleshooting | Dependencies |
Element Insight: Show License | Display the license agreement and terms of use | Legal compliance, terms review | Legal |
Diagnostic & Troubleshooting Commands
Element Insight: Run Diagnostics
Comprehensive system check that verifies all components and dependencies.
- Checks VS Code Version
Verifies compatibility (1.97.0+)
- Verifies Playwright Installation
Checks global installation status
- Tests Browser Binaries
Validates browser availability
- Checks Binary Integrity
Verifies SHA-256 hashes
- Tests Network Connectivity
Validates internet access
Developer Commands
Advanced commands for debugging and development purposes.
- Developer: Reload Window
Restarts VS Code extension host
- Developer: Toggle Developer Tools
Opens browser dev tools for debugging
- Developer: Show Running Extensions
Lists all active extensions
- Developer: Open Process Explorer
Shows extension processes
Command Categories
Core Commands
- Element Insight: Open Panel
Main interface for scanning and exporting
- Element Insight: Hello World
Test command for extension functionality
Dependency Commands
- Element Insight: Install Playwright
Install Playwright globally
- Element Insight: Install Browsers
Install browser binaries
- Element Insight: Install Dependencies
Install all dependencies
Diagnostic Commands
- Element Insight: Run Diagnostics
Comprehensive system check
- Element Insight: Show License
Display license agreement
- Element Insight: Accept License
Accept terms and conditions
Keyboard Shortcuts
Default Shortcuts
These are the default keyboard shortcuts for Element Insight commands. You can customize them in VS Code settings.
Command | Windows/Linux | macOS | Description |
---|---|---|---|
Open Element Insight | Ctrl+Alt+E | Cmd+Alt+E | Opens the main Element Insight panel |
Command Palette | Ctrl+Shift+P | Cmd+Shift+P | Access all Element Insight commands |
Customizing Keyboard Shortcuts
How to Customize
- Open Keyboard Shortcuts
File → Preferences → Keyboard Shortcuts
- Search for Commands
Type 'Element Insight' in the search box
- Assign New Shortcut
Click on the command and press your desired key combination
- Save Changes
Shortcuts are automatically saved
Best Practices
- Avoid Conflicts
Check for existing shortcuts before assigning
- Use Mnemonics
Choose shortcuts that make sense (e.g., E for Element)
- Consistent Patterns
Follow VS Code's shortcut conventions
- Backup Settings
Export your keybindings.json for backup
Common Command Workflows
First-Time Setup
- 1. Run Diagnostics
Element Insight: Run Diagnostics
- 2. Install Playwright
Element Insight: Install Playwright
- 3. Install Browsers
Element Insight: Install Browsers
- 4. Open Panel
Element Insight: Open Panel
Troubleshooting
- 1. Run Diagnostics
Element Insight: Run Diagnostics
- 2. Check Output Panel
View → Output → Element Insight
- 3. Reinstall Dependencies
Element Insight: Install Dependencies
- 4. Reload Window
Developer: Reload Window
Related Resources
Troubleshooting Guide
Learn how to resolve common issues and use diagnostic commands effectively.
Troubleshooting Guide