HN 표시: React Trace – React 구성 요소에 대한 개발 시 시각적 검사기

pnpm add -D @react-trace/kit Identify rendered components, find their source locations, and choose what to do Hover over any element to identify the React component that rendered it, its props, and the full component tree breadcrumb. Instantly jump from any rendered element to its exact source file and line number using source maps. Extend the inspector with plugins for source preview and editing, inline comments, clipboard actions, and editor integration. Every package ships a production stub. Conditional exports resolve to no-ops in production builds — zero runtime overhead. Everything you need, included in @react-trace/kit by default. Monaco-based source preview with syntax highlighting, inline editing, and project folder access. @react-trace/plugin-preview Collect inline review comments anchored to components, then copy or send them to OpenCode. @react-trace/plugin-comments Copy the selected source location as a project-relative path:lineNumber reference. @react-trace/plugin-copy-to-clipboard Open the selected source in VS Code, Cursor, Windsurf, Zed, WebStorm, or IntelliJ. @react-trace/plugin-open-editor Up and running in under a minute.