skills.rest
harlanljones
harlanljonesCOMMUNITY
Explore all skills by this author →
GitHub

inspecting-hermes-desktop-dom

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

Updated Dec 7, 2025
Search Tags:#electron#cdp#ui verification#dom inspection#chrome devtools protocol#computed styles#css debugging
One-click install
npx skills add https://github.com/harlanljones/dotfiles --skill inspecting-hermes-desktop-dom-harlanljones
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspecting-hermes-desktop-dom
Source: https://github.com/harlanljones/dotfiles/tree/main/dot_hermes/skills/software-development/inspecting-hermes-desktop-dom
Command: npx skills add https://github.com/harlanljones/dotfiles --skill inspecting-hermes-desktop-dom-harlanljones

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When developing the Hermes desktop app, inferring rendered UI behavior from .tsx source files leads to wrong conclusions. This Skill reads 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 inspection via CDP: Connect to the dev server's Chrome DevTools Protocol port on 127.0.0.1:9222 and evaluate expressions against the real renderer. - Winning-rule diagnosis: Determine which CSS rule actually applied to a node, including inherited values and plugin stylesheet overrides, before editing call sites. - Isolated probe instances: Launch a separate Electron instance with its own user-data dir and HERMES_HOME so the user's running app is never disturbed. - Use Case: A style change "isn't applying" in the running app. Instead of editing every call site, query the real node's computed style and ancestor classes to discover a plugin stylesheet (e.g. @tailwindcss/typography) is overriding the utility class. ## Quick Start Ask the agent to check the computed style of a specific element in the running Hermes desktop app using the CDP eval script.

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 app's Chrome DevTools Protocol port and evaluate JavaScript against the renderer. In Hermes desktop dev-server runs, the port opens on 127.0.0.1:9222, and apps/desktop/scripts/eval.mjs runs one-liner queries against the live window.

How do I find which CSS rule is overriding my style?▼

Query the real node's computed style and walk its ancestor classes via CDP. If the node carries no class of its own, the value is inherited, and a plugin stylesheet such as @tailwindcss/typography may be beating your utility class.

Can I inspect the app without disturbing the user's running window?▼

Yes. Launch an isolated Electron instance with a separate --user-data-dir, a throwaway HERMES_HOME, and a different CDP port such as 9333. This avoids Electron's single-instance lock and never touches the user's session.

Why is the CDP port not responding on 9222?▼

The port is closed for packaged builds and for unpackaged runs without HERMES_DESKTOP_DEV_SERVER. A just-launched app also needs a second or two before the port answers, so poll rather than probing once.

What are the limitations of CDP-based DOM inspection?▼

CDP answers factual questions like computed padding or whether an element rendered, but it cannot judge aesthetics such as color balance or spacing feel. It is also not suited for perf 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
howdeployhowdeploy
15

design-review

Audit UI for visual inconsistencies, spacing issues, and typographic hierarchy.

Community
Advanced
githubnextgithubnext
5.1k

pr-screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions.

Official
Intermediate
davpatel605-beepdavpatel605-beep

node-inspect-debugger

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

Community
Advanced