skills.rest
bitsocialnet
bitsocialnetOFFICIAL
Explore all skills by this author →
Website𝕏@bitsocialnetGitHub

inspect-elements

Resolve DOM nodes to React source files and ownership stacks.

1|1|Updated Feb 1, 2026
Search Tags:#react#debug#playwright#inspect#dom#source-code
One-click install
npx skills add https://github.com/bitsocialnet/bitsocial-web --skill inspect-elements
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspect-elements
Source: https://github.com/bitsocialnet/bitsocial-web/tree/main/.cursor/skills/inspect-elements
Command: npx skills add https://github.com/bitsocialnet/bitsocial-web --skill inspect-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Resolve on-screen Bitsocial Web DOM elements to their corresponding React source files, line numbers, and ownership context to enable precise debugging and attribution.

Core Features & Use Cases

  • Map a live DOM node to the exact file path and line in the React source.
  • Retrieve the nearest component name and its ownership stack for a given element.
  • Use during development to diagnose rerender hotspots and file-level attribution.

Quick Start

Open the dev app and run the element-source resolver against the target node to reveal its source file and component stack.

Frequently Asked Questions about inspect-elements

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

FAQPage Schema
How do I map a live DOM node to its React source file?▼

To map a live DOM node to its React source file, run the element-source resolver against the target node on the local dev server. It returns the exact file path, line number, and component name that produced the element.

What is the best way to trace which React component rendered a specific DOM element?▼

Tracing which component rendered a DOM element involves retrieving the nearest component name and its ownership stack. This resolver uses dev-only helpers and playwright-cli to identify the exact component hierarchy responsible for rendering the node.

Can I use Playwright to inspect DOM elements and find their source code during development?▼

Yes, you can use Playwright to inspect DOM elements and find source code. The resolver operates via playwright-cli against the local dev server, utilizing dev-only element-source helpers to map nodes to their React source files.

How do I diagnose React rerender hotspots for file-level attribution?▼

Diagnosing React rerender hotspots for file-level attribution is achieved by resolving on-screen DOM elements to their corresponding source files and ownership context. This allows precise identification of which components are causing unnecessary rerenders.

Does this DOM to React source mapping work on production builds?▼

This DOM to React source mapping does not work on production builds. It relies on dev-only element-source helpers and requires running playwright-cli against the local development server to return file paths and component ownership stacks.

Related Skills

Explore More Software Engineering Skills→
simonwjacksonsimonwjackson

se-polish-beta

Start a development server and open the feature in a browser.

Community
Advanced
tiankong0101-bytetiankong0101-byte

design-revise

Translate UI screenshots into exact source file changes and code diffs.

Community
Advanced
yanochka11yanochka11

webapp-testing

Automate Playwright browser tests for local web applications.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate