skills.rest
gitkraken
gitkrakenOFFICIAL
Explore all skills by this author →
Website𝕏@gitkrakenGitHub

live-inspect

Inspect a running GitLens extension instance in VS Code via Playwright-driven MCP tools.

9.9k|1.8k|Updated Aug 8, 2016
Search Tags:#mcp#playwright#ui testing#VSCode#gitlens#extension debugging#webview inspection
One-click install
npx skills add https://github.com/gitkraken/vscode-gitlens --skill live-inspect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: live-inspect
Source: https://github.com/gitkraken/vscode-gitlens/tree/main/.claude/skills/live-inspect
Command: npx skills add https://github.com/gitkraken/vscode-gitlens --skill live-inspect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging a VS Code extension's live UI state is slow when you cannot see what the running extension actually renders. This Skill launches a real VS Code instance with GitLens loaded and lets you programmatically inspect DOM state, read logs, execute commands, and capture screenshots without manual clicking.

Core Features & Use Cases

  • Persistent MCP inspection session: The vscode-inspector MCP server launches VS Code once and exposes tools for screenshots, DOM queries, accessibility snapshots, command execution, and log reading in an iterative loop.
  • Webview and shadow DOM inspection: Discover open webviews, wait for Lit hydration, and query shadow DOM content or computed styles via evaluate_in_webview.
  • Subscription and AI simulators: Exercise Pro-gated features with set_account plan simulation and deterministic AI responses without real accounts or provider keys.
  • Batch CLI fallback: scripts/e2e-dev-inspect.mjs supports one-shot ordered actions (commands, clicks, queries, screenshots, log searches) when the MCP server is unavailable.
  • Use Case: After editing a GitLens webview component, rebuild with pnpm run build:webviews, refresh the view, and screenshot the result to verify the change — all without leaving the agent session.

Quick Start

Launch the inspector session and take a screenshot of the GitLens Home view to see its current live state.

Frequently Asked Questions about live-inspect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect a running VS Code extension's UI programmatically?▼

Launch a persistent session with the vscode-inspector MCP server, then use tools like screenshot, inspect_dom, and aria_snapshot to examine the live UI. The session stays open so you can rebuild code and re-inspect in a loop.

How do I read shadow DOM content in a VS Code webview?▼

Use evaluate_in_webview with an expression that accesses element.shadowRoot.querySelector(), since plain document.querySelector cannot cross shadow boundaries. GitLens webviews use Lit components with root elements like gl-home-app.

Can I test Pro-gated extension features without a paid account?▼

Yes, the set_account tool simulates subscription plans such as pro, trial, or community in debug builds without touching a real account. Call set_account with plan none afterward to restore the real subscription state.

Why does read_logs show only the activation banner?▼

The read_logs tool uses a pattern argument, not filter; an unknown argument is silently ignored and falls back to matching only GitLens. Always pass read_logs with an explicit pattern and last_n to see the entries you need.

What happens to the evaluator bridge after rebuilding extension host code?▼

rebuild_and_reload restarts the extension host, but the evaluator bridge does not survive because VS Code only runs the extensionTestsPath entry point at workbench startup. Use teardown plus launch when you need evaluate or set_account after an extension-host change.

Does live inspection work on headless Linux or WSL?▼

Yes, pass download_vscode at launch or use the --download-vscode CLI flag to fetch a portable VS Code binary. Xvfb starts automatically when no display is set, though the xvfb package must be installed.

Related Skills

Explore More Software Engineering Skills→
aiguy611aiguy611

vscode-ext-dev

Query a local QMD knowledge base for VS Code extension development guidance.

Community
Advanced
joshsmithxrmjoshsmithxrm
5

ext-verify

Automate VS Code extension webview UI tests with Playwright Electron.

Community
Advanced
sharegpusharegpu

webapp-testing

Automate end-to-end web app testing with Python Playwright, including server lifecycle and visual validation.

Official
Intermediate
sajalsuhanesajalsuhane

qa-only

Run report-only QA tests on a web application and generate a health score, screenshots, and reproducible steps.

Community
Intermediate