[Chrome 插件] 写了一个针对 React 项目本地开发时，点击页面上对应元素即可跳转到编辑器对应组件位置的 Chrome 插件

[you222]

安装地址：react1s

github 地址：react1s

Option+Click 页面上对应元素即可跳转到编辑器对应组件行列

预览图如下：

[no13bus]

好神奇，这是啥原理

[djs]

这个好呀，先 mark 下

[you222]

随着 React 项目越来越大，在本地开发时经常会遇到这样一个场景，想改页面上的一个功能，但是比较难去找到这个功能在编辑器中对应的页面 & 组件的位置。这时候使用本插件可以支持一键点击页面元素跳转到编辑器对应文件的行数。

[cation]

赞一个， 有些是动态展示的 dom 不知道能不能支持。

[you222]

@no13bus 主要是通过 babel-plugin-transform-react-jsx-source 这个 babel 插件去拿到 dom 节点的文件信息来实现跳转打开到对应的位置

[you222]

@cation 可以定位到动态展示的 dom 的父节点那一行的位置

[shuxge1223]

好像在 producthunt 看到类似的项目 是你吗

[sunjourney]

LocatorJS 专门做这个的

[looppppp]

太强了，赞赞赞

[chenzhe]

很好用，赞赞赞。

[rookiebulls]

刚好能解决我现在老项目碰到的问题，试用一下

[zhuangpipi]

确实好用

[bury]

看起来很不错！

[angith]

牛皮

[randomstream]

记得好像 Vue 那边也有人做过了？

[zthxxx]

楼主做的挺好的，比这个的实现简洁 https://github.com/zthxxx/react-dev-inspector

[sechi]

@randomstream 是一个 vite 的插件 https://github.com/webfansplz/vite-plugin-vue-inspector