单击任何 UI 元素即可立即跳转到 VS Code 中的 React 源代码。非常适合 React + Tailwind + ShadCN 项目。
React-DomPicker 将浏览器连接到 VS Code。单击 React 应用程序中的任何元素，VS Code 将在匹配的 JSX 节点处打开确切的源文件。
它是如何运作的
1. 安装配套的 VS Code 扩展 (React-CodeBridge)：
https://marketplace.visualstudio.com/items?itemName=RajithaDisanayaka.react-codebridge
2.安装此Chrome扩展程序
3. 在本地主机上运行你的 React 应用程序
4. 单击工具栏图标激活选择器
5. 单击页面上的任意元素
特征
- 从浏览器一键导航到源代码
- 将鼠标悬停在轮廓元素上
- Shift+单击可选择父元素
- Esc 关闭选择器
- Ctrl+Shift+P（Mac 上为 Cmd+Shift+P）从键盘进行切换
- 页面上浮动状态指示器
与
- 反应 16.8, 17, 18, 19
- Next.js（应用程序路由器和页面路由器，包括React服务器组件）
- Vite、创建 React 应用程序、混音
- TypeScript 和 JavaScript
- Tailwind、ShadCN、Material UI、样式组件、CSS 模块
需要
- 安装了 React-CodeBridge VS Code 扩展
- 在 localhost 或 127.0.0.1 上运行的 React 开发版本
隐私
- 完全在您的机器上运行
- 没有数据收集，没有分析，没有外部服务器
- 仅在 localhost 和 127.0.0.1 上激活
100% 准确度模式（可选）
为了在每个元素上实现像素完美的点击编码，请在项目配置中安装 code-inspector-plugin。 React-DomPicker 自动读取其输出。对于使用 React 服务器组件、i18n 或计算文本的 Next.js 项目很有用。
版权所有 © 2026 拉吉萨·迪萨纳亚卡
