[feat] 支持在 elements 面板显示组件文件路径

[tjx666]

描述

像 https://github.com/webfansplz/vite-plugin-vue-inspector 一样：

使用场景

有时候两个组件在网页上非常接近不好选中，如果可以直接在 elements 面板中清除的看到某个元素对应哪个文件就好了

[zthxxx]

@tjx666
可以添加 babel 插件，提供了 @react-dev-inspector/babel-plugin

https://react-dev-inspector.zthxxx.me/docs/compiler-plugin#react-dev-inspectorbabel-plugin

效果如：

// Input
<div />
 
// Output
<div data-inspector-relative-path="src/path/Component.tsx" data-inspector-line="10" data-inspector-column="6" />

[tjx666]

抱歉，我应该先仔细看一下文档的。

试用了下，我感觉更理想的效果：

1. 只注入一个属性：data-inspector-path="src/a.ts?line=100&col=21"
2. 应该只在快捷键开启时显示这个属性
3. 貌似和 mui 冲突

[zthxxx]

Get, 明白你说的问题点呢～

近期目标是提供一个右键菜单以支持选择父级各个组件。