Command Reference

Complete reference of all Element Insight commands in VS Code


Quick Access Commands

Open Element Insight
Primary

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
Universal

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

CommandDescriptionUsageCategory
Element Insight: Install Playwright
Install Playwright in the global directory for web page scanningFirst-time setup, dependency issues
Dependencies
Element Insight: Install Browsers
Install browser binaries (Chromium, Firefox, WebKit) for PlaywrightAfter Playwright installation, browser errors
Dependencies
Element Insight: Install Dependencies
Check and install all required dependencies automaticallyFirst-time setup, troubleshooting
Dependencies
Element Insight: Show License
Display the license agreement and terms of useLegal compliance, terms review
Legal

Diagnostic & Troubleshooting Commands

Element Insight: Run Diagnostics
Troubleshooting

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

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

  • Element Insight: Open Panel

    Main interface for scanning and exporting

  • Element Insight: Hello World

    Test command for extension functionality

  • Element Insight: Install Playwright

    Install Playwright globally

  • Element Insight: Install Browsers

    Install browser binaries

  • Element Insight: Install Dependencies

    Install all dependencies

  • 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.

CommandWindows/LinuxmacOSDescription
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
Quick Start Guide

Get started with Element Insight using the essential commands.

Quick Start Guide