skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

inspecting-hermes-desktop-dom

Inspect the live Hermes desktop DOM and computed CSS over Chrome DevTools Protocol.

Updated Aug 22, 2026
Search Tags:#Electron#cdp#ui verification#Chrome DevTools Protocol#dom inspection#computed styles#css debugging
One-click install
npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill inspecting-hermes-desktop-dom-vivekgoquest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspecting-hermes-desktop-dom
Source: https://github.com/vivekgoquest/hermes-agent-stable/tree/main/skills/software-development/inspecting-hermes-desktop-dom
Command: npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill inspecting-hermes-desktop-dom-vivekgoquest

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When developing the Hermes desktop app, inferring UI behavior from .tsx source files often leads to wrong conclusions. This Skill lets you read the live rendered DOM of the running Electron window — computed styles, geometry, winning CSS rules, and console output — so you verify facts instead of guessing. ## Core Features & Use Cases - Live DOM Reading: Query the running app's DOM via the CDP port on 127.0.0.1:9222 using the eval.mjs one-liner or the shared CDP client. - CSS Rule Diagnosis: Determine which CSS rule actually won on a real node, including inherited values and plugin stylesheet overrides like @tailwindcss/typography. - Isolated Probe Instances: Launch a separate Electron instance with its own HERMES_HOME and user-data-dir to inspect the UI without disturbing the user's session. - Use Case: A style change is not applying. Instead of editing every call site, evaluate the real node, discover the value is inherited from an ancestor rule, and override the shared class once. ## Quick Start Check the computed style of an element in my running Hermes desktop app and tell me which CSS rule is winning.

Frequently Asked Questions about inspecting-hermes-desktop-dom

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

FAQPage Schema
How do I inspect the DOM of a running Electron app?▼

Connect to the Chrome DevTools Protocol port the dev server opens on 127.0.0.1:9222, then evaluate JavaScript against the renderer page. The eval.mjs script in apps/desktop/scripts runs one-liners, and the shared cdp.mjs client handles multi-step queries.

How to find which CSS rule is overriding my style?▼

Query the real node with getComputedStyle and walk its parentElement chain to see own classes versus inherited values. If the node carries no class of its own, an ancestor or plugin stylesheet rule like @tailwindcss/typography prose is winning, so override the shared class rather than each call site.

Can I inspect the Hermes desktop app without disturbing the user's session?▼

Yes, launch an isolated Electron instance with a separate HERMES_HOME, --user-data-dir, and a different HERMES_DESKTOP_CDP_PORT such as 9333. This dodges Electron's single-instance lock and never touches the running app's state.

Why is the CDP port not responding on 127.0.0.1:9222?▼

The port is closed for packaged builds and for unpackaged runs without HERMES_DESKTOP_DEV_SERVER. Verify with curl against /json/version, and poll for a second or two after launch since a just-started app needs time to bind the port.

What are the limitations of inspecting the DOM over CDP?▼

CDP answers factual questions like computed padding or whether an element rendered, but cannot judge aesthetics such as color balance or spacing feel. It also is not suited for performance profiling or heap analysis, which need dedicated debugging tools.

Related Skills

Explore More Software Engineering Skills→
jakubbartnikjakubbartnik

inspecting-hermes-desktop-dom

Inspect the live Hermes desktop DOM and computed CSS over the Chrome DevTools Protocol.

Community
Intermediate
swcstudiospaceswcstudiospace

inspecting-hermes-desktop-dom

Inspect the live Hermes desktop DOM and computed CSS over the Chrome DevTools Protocol.

Official
Intermediate
curiositechcuriositech
181

photo-composition-critic

Critique photographic composition and aesthetic quality using visual analysis models.

Official
Advanced
davpatel605-beepdavpatel605-beep

node-inspect-debugger

Debug Node.js applications using the inspector and Chrome DevTools Protocol.

Community
Advanced