Can I debug multiple sessions simultaneously?

Currently, this skill supports one debug session at a time as it uses a hardcoded port (9222) for the Chrome DevTools Protocol connection.

How do I enable debugging in my Electron app?

Start your application with the ENABLE_PLAYWRIGHT_DEBUG=1 environment variable to append the remote-debugging-port switch to the Electron command line.

Does this skill work with native file dialogs?

No, native Electron dialogs cannot be automated via CDP. It is recommended to use the provided window.electronAPI.main.initializeProject method for automation instead.

What should I do if the connection times out?

The first connection attempt can occasionally be slow. Simply retry the browser_snapshot or browser_evaluate tool to establish the link.

Playwright Electron Debugger

Name: Playwright Electron Debugger
Author: voicetreelab

byvoicetreelab

•

606

•

安全与测试

Enables live debugging and UI inspection of Electron applications using Playwright and Chrome DevTools Protocol.

The Playwright Debug skill provides a seamless bridge between Claude Code and running Electron applications, specifically optimized for the VoiceTree spatial IDE. It automates the connection to the Chrome DevTools Protocol (CDP) port, allowing users to capture screenshots, inspect accessibility trees, and interact with the live UI programmatically. By utilizing specialized helper functions like prettySetupAppForElectronDebugging, it can instantly configure complex multi-terminal environments and load test fixtures, making it indispensable for end-to-end testing and real-time interface troubleshooting during development.

主要功能

01Visual debugging with live screenshot capture and accessibility tree inspection.

02Instant multi-terminal environment setup for complex tree-style UI testing.

03Interactive UI control including clicks, typing, and hover actions within the live renderer process.

04606 GitHub stars

05Direct access to internal application APIs and Cytoscape graph data via browser evaluation.

06Automated connection to running Electron apps via CDP for live interaction.

使用场景

01Debugging layout issues and terminal tree hierarchies in real-time within a spatial IDE.

02Automating end-to-end UI testing scenarios for Electron-based desktop applications.

03Inspecting internal application state and DOM elements through the Chrome DevTools Protocol.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add voicetreelab/voicetree playwright-debug

For use in Claude.ai and ChatGPT

Download Skill