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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 1203 days ago, the information mentioned may be changed or developed.

安装地址：react1s

github 地址：react1s

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

预览图如下： demo

react1s

对应

Chrome

插件

17 replies • 2023-01-12 08:52:51 +08:00

no13bus

Jan 11, 2023

好神奇，这是啥原理

djs

Jan 11, 2023

这个好呀，先 mark 下

you222

Jan 11, 2023

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

cation

Jan 11, 2023

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

you222

Jan 11, 2023

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

you222

Jan 11, 2023

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

shuxge1223

Jan 11, 2023

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

sunjourney

Jan 11, 2023

LocatorJS 专门做这个的

looppppp

Jan 11, 2023

太强了，赞赞赞

chenzhe

PRO

Jan 11, 2023

很好用，赞赞赞。

rookiebulls

Jan 11, 2023 via iPhone

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

zhuangpipi

Jan 11, 2023

确实好用

bury

Jan 11, 2023

看起来很不错！

angith

Jan 11, 2023

牛皮

randomstream

Jan 11, 2023

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

zthxxx

Jan 11, 2023

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

sechi

Jan 12, 2023

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