反向 inspect，IDE-> Web Page

[tjx666]

效果：

1. 写个 vscode 插件，点击插件提供的 status bar 开启 inspect
2. vscode 插件监听光标位置变化，发送消息给 react-dev-inspect client 端，告诉它我当前编辑的文件和光标位置
3. react-dev-inspect client 实时框选正在编辑的组件

如果有需要我可以帮忙写这个 vscode 插件，不知道你觉得这个 idea 有没有用，技术实现上有没有我没想到的难点？

[zthxxx]

这是个好想法！

但是根据编辑的文件和光标位置，无法推断出跟页面上 react 组件 / DOM 元素的关系、并且看到的代码不一定存在渲染出的组件(比如不同路由下 / if-else 后根本没显示)

所以第 3. 步要怎么实现我没想到。

PS: 我之前的实践是

• 页面元素到代码 => inspector
• 代码到页面组件 => storybook

[tjx666]

现在应该是可以根据 dom 元素拿到对应组件的位置（不清楚是否有组件范围，例如第几行到第几行），那能否：

1. 遍历所有节点，得到 dom 节点和文件范围的映射 map, key 是 DOM node, value 是 range
2. 遍历所有 range，过滤包含编辑器中当前光标行数的 ranges
3. 框选出 ranges 对应的 dom

能想到的问题是遍历 DOM 树可以比较蠢，比较耗性能，不知道 swc 或者 babel 有没有已经注入了一个可以直接用的 map。

[zthxxx]

对于 3. 默认并没有注入你想要的 map，理论上只能由 bundler 提供而无法由 compiler 提供 (isolated 无法感知全局)

前两点的话，react fiber 和 DOM 并非一一对应关系，要遍历的话只能遍历历react trees (tree 也能有多个)，并且这个过程在大型项目中会非常慢，参见 React DevTools

另外是随便开一个文件大概率是根本没被渲染出来的，直接 hover 的话能出现和不能出现的效果不太稳定，对使用者对信心不是很好，也得考虑交互怎么做

[tjx666]

@zthxxx 发现了这个东西 https://marketplace.visualstudio.com/items?itemName=n3rds-inc.visualwind