VS Code Extension Troubleshooting

Solutions to common issues and problems with Element Insight in VS Code


Quick Fixes

Extension Not Working
Common
  • Restart VS Code

    Close and reopen VS Code completely

  • Check Extension Status

    View → Extensions → Element Insight

  • Verify VS Code Version

    Must be 1.97.0 or higher

Scan Issues
Performance
  • Check Internet Connection

    Ensure stable connection for web scanning

  • Verify URL Format

    Include http:// or https:// prefix

  • Select Specific Tags

    Avoid scanning all elements for better performance

Common Issues & Solutions

The Element Insight icon doesn't appear in the Activity Bar.

  • Check Installation

    Go to View → Extensions and verify Element Insight is installed and enabled

  • Reload Window

    Ctrl+Shift+P → "Developer: Reload Window"

  • Check Activity Bar

    Right-click Activity Bar → ensure "Element Insight" is checked

  • Reinstall Extension

    Uninstall and reinstall from VS Code Marketplace

Problems with Playwright installation or browser binaries.

  • Run Installation Command

    Ctrl+Shift+P → 'Element Insight: Install Playwright'

  • Install Browsers

    Ctrl+Shift+P → 'Element Insight: Install Browsers'

  • Check Permissions

    Ensure VS Code has permission to install packages

  • Manual Installation

    Run 'npm install playwright && npx playwright install' in terminal

Element scanning is taking too long or consuming too much memory.

  • Select Specific Tags

    Use tag selection to focus on relevant elements only

  • Close Other Tabs

    Reduce memory usage by closing unnecessary browser tabs

  • Use Specific URLs

    Target specific pages rather than entire websites

  • Check System Resources

    Ensure sufficient RAM and CPU available

Problems with exporting elements or generating code.

  • Check Workspace

    Ensure a workspace folder is open in VS Code

  • Verify Scan Results

    Make sure elements were successfully scanned first

  • Check File Permissions

    Ensure VS Code can write to the workspace directory

  • Try Different Format

    Export as JSON first, then try framework code

Common Error Messages

Error MessageCauseSolution
Playwright not found
Playwright not installedRun 'Element Insight: Install Playwright' command
Browsers not installed
Browser binaries missingRun 'Element Insight: Install Browsers' command
No workspace folder
No folder open in VS CodeOpen a folder via File → Open Folder
Scan failed
URL inaccessible or invalidCheck URL format and internet connection
Binary integrity failed
Corrupted extension filesReinstall extension from marketplace

Platform-Specific Issues

Windows
  • Antivirus Blocking

    Add VS Code to antivirus exclusions

  • Permission Issues

    Run VS Code as administrator if needed

  • Path Issues

    Ensure Node.js is in system PATH

macOS
  • Gatekeeper Issues

    Allow VS Code in Security & Privacy settings

  • Homebrew Conflicts

    Check for conflicting Node.js installations

  • Permission Denied

    Check folder permissions in Finder

Linux
  • Missing Dependencies

    Install required system packages

  • Permission Issues

    Check file permissions and ownership

  • Display Issues

    Ensure X11 or Wayland is properly configured

Diagnostic Commands

Built-in Diagnostics

Use these commands to diagnose and fix common issues:

  • Element Insight: Run Diagnostics

    Comprehensive system and dependency check

  • Element Insight: Install Playwright

    Install or reinstall Playwright

  • Element Insight: Install Browsers

    Install browser binaries for Playwright

  • Element Insight: Show License

    View license agreement and terms

  • Developer: Reload Window

    Restart VS Code extension host

  • Developer: Toggle Developer Tools

    Open browser dev tools for debugging

Getting Additional Help

Extension Output

Check the extension output panel for detailed error messages and debugging information.

  • Open Output Panel

    View → Output → Element Insight

  • Check Logs

    Look for error messages and warnings

  • Copy Error Details

    Include error messages when reporting issues

Report Issues

If you're still experiencing issues, report them with detailed information.

  • Include Error Messages

    Copy exact error text from output panel

  • System Information

    VS Code version, OS, Node.js version

  • Steps to Reproduce

    Detailed steps that cause the issue


Related Guides

Installation Guide

Review the installation process and system requirements.

Installation Guide
Quick Start Guide

Follow the step-by-step quick start guide for basic setup.

Quick Start Guide