inspect-elements

Name: inspect-elements
Availability: InStock
Author: Bitsocial

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

Ready to run

npx skills add https://github.com/bitsocialnet/bitsocial-web --skill inspect-elements

💬 Prompt for ChatGPT / Claude Chat▼

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.