@linhey/react-debug-inspector 1.0.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +75 -2
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +557 -82
- package/dist/index.mjs +557 -82
- package/package.json +23 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 linhay
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,11 +1,40 @@
|
|
|
1
1
|
# @linhey/react-debug-inspector 🎯
|
|
2
2
|
|
|
3
|
+
[](https://github.com/linhay/react-debug-inspector/actions/workflows/ci.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/@linhey/react-debug-inspector)
|
|
5
|
+
[](https://www.npmjs.com/package/@linhey/react-debug-inspector)
|
|
6
|
+
[](https://github.com/linhay/react-debug-inspector/blob/main/LICENSE)
|
|
7
|
+
[](https://github.com/linhay/react-debug-inspector)
|
|
8
|
+
|
|
3
9
|
一个轻量级的 React 调试辅助工具，让你在浏览器中直接识别组件、标签及其对应的源码行号。
|
|
4
10
|
|
|
11
|
+
## 🎬 演示
|
|
12
|
+
|
|
13
|
+
### 在线演示
|
|
14
|
+
|
|
15
|
+
🌐 **[在线体验 Demo](https://linhay.github.io/react-debug-inspector/)**
|
|
16
|
+
|
|
17
|
+
> GitHub Pages 配置说明见 [GITHUB_PAGES.md](./pages/GITHUB_PAGES.md)
|
|
18
|
+
|
|
19
|
+
### 快速预览
|
|
20
|
+
|
|
21
|
+
1. 点击右下角的 🎯 按钮进入检查模式
|
|
22
|
+
2. 鼠标悬停在任何元素上查看调试信息
|
|
23
|
+
3. 直接点击元素复制完整的调试标识
|
|
24
|
+
4. 使用悬浮菜单复制文案、图片或全部上下文
|
|
25
|
+
4. 按 `Esc` 键退出检查模式
|
|
26
|
+
|
|
27
|
+
<!-- TODO: 添加演示 GIF -->
|
|
28
|
+
<!--  -->
|
|
29
|
+
|
|
30
|
+
> 📹 查看 [录制指南](./RECORDING_GUIDE.md) 了解如何制作演示视频
|
|
31
|
+
|
|
5
32
|
## 特性
|
|
6
33
|
|
|
7
34
|
- 🚀 **零配置注入**：通过 Babel 插件自动为每个 JSX 元素添加 `data-debug` 属性。
|
|
8
35
|
- 🎯 **瞄准模式**：悬浮显示元素标识，单击一键复制。
|
|
36
|
+
- 🧾 **上下文复制**：支持复制目标文案、图片信息和完整调试上下文。
|
|
37
|
+
- 📁 **完整路径**：显示文件路径、组件名、标签名和行号，精确定位源码。
|
|
9
38
|
- 🌳 **零污染**：生产环境构建时自动剔除，不增加包体积。
|
|
10
39
|
- ⌨️ **快捷键支持**：支持 Esc 退出及 Alt+右键 快速复制。
|
|
11
40
|
|
|
@@ -49,11 +78,55 @@ if (import.meta.env.DEV) {
|
|
|
49
78
|
## 交互说明
|
|
50
79
|
|
|
51
80
|
- **🎯 按钮**：位于右下角，点击进入/退出审查模式。
|
|
52
|
-
- **悬浮模式**：进入模式后，鼠标指向的元素将被高亮，并显示
|
|
53
|
-
-
|
|
81
|
+
- **悬浮模式**：进入模式后，鼠标指向的元素将被高亮，并显示 `文件名 › 组件 › 标签:行号`。
|
|
82
|
+
- **悬浮菜单**：命中元素后可使用“复制 ID / 复制文案 / 复制图片 / 全部复制”。
|
|
83
|
+
- **单击左键**：复制完整标识（`文件路径:组件:标签:行号`）到剪贴板并退出。
|
|
84
|
+
- **复制图片**：优先尝试写入图片本体；若浏览器或资源不支持，则自动降级复制图片信息文本。
|
|
54
85
|
- **Esc**：退出模式。
|
|
55
86
|
- **Alt + 右键**：非模式下亦可直接复制标识。
|
|
56
87
|
|
|
88
|
+
## 输出格式
|
|
89
|
+
|
|
90
|
+
复制到剪贴板的格式为：`src/components/Button.tsx:Button:button:42`
|
|
91
|
+
|
|
92
|
+
- `src/components/Button.tsx` - 文件相对路径
|
|
93
|
+
- `Button` - 组件名
|
|
94
|
+
- `button` - HTML 标签名
|
|
95
|
+
- `42` - 源码行号
|
|
96
|
+
|
|
97
|
+
## 开发
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
# 安装依赖
|
|
101
|
+
npm install
|
|
102
|
+
|
|
103
|
+
# 运行单元测试
|
|
104
|
+
npm test
|
|
105
|
+
|
|
106
|
+
# 运行 E2E 测试
|
|
107
|
+
npm run test:e2e
|
|
108
|
+
|
|
109
|
+
# 运行所有测试
|
|
110
|
+
npm run test:all
|
|
111
|
+
|
|
112
|
+
# 构建
|
|
113
|
+
npm run build
|
|
114
|
+
|
|
115
|
+
# 开发模式
|
|
116
|
+
npm run dev
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## 发布
|
|
120
|
+
|
|
121
|
+
本项目使用 GitHub Actions 自动化发布流程。详见 [GITHUB_ACTIONS.md](./GITHUB_ACTIONS.md)。
|
|
122
|
+
|
|
123
|
+
### 快速发布
|
|
124
|
+
|
|
125
|
+
1. 进入 GitHub Actions 页面
|
|
126
|
+
2. 选择 "Version Bump and Release" 工作流
|
|
127
|
+
3. 点击 "Run workflow"，选择版本类型（patch/minor/major）
|
|
128
|
+
4. 自动完成测试、构建、发布到 NPM
|
|
129
|
+
|
|
57
130
|
## License
|
|
58
131
|
|
|
59
132
|
MIT
|
package/dist/index.d.mts
CHANGED