个人开源的 Chrome 插件上了阮一峰的科技爱好者周刊,支持 React 项目点击页面元素直接跳转到代码编辑器对应组件位置

2023-07-14 09:08:26 +08:00
you222  you222

无需任何配置,针对 React 项目本地开发时,按住 ⌥ Option(Alt) 同时鼠标左键点击页面元素即可跳转

预览图如下:

科技爱好者周刊(第 262 期): https://www.ruanyifeng.com/blog/2023/07/weekly-issue-262.html

Chrome 商店安装地址: https://chrome.google.com/webstore/detail/react1s/gpcoahaomdfmekggblkckofkgjggnjl

Github: https://github.com/aaamoon/react1s

如果大家用得上,可以给个 star ~

2941 次点击
所在节点   程序员  程序员
28 条回复
Routeros
Routeros
2023-07-14 09:16:12 +08:00
404
xihang
xihang
2023-07-14 09:25:23 +08:00
Chrome 商店安装地址:https://chrome.google.com/webstore/detail/react1s/gpcoahaomdfmekggblkckofkgjggnjlp
op 漏了最后那个字母 p
you222
you222
2023-07-14 09:31:16 +08:00
@xihang 感谢老哥
you222
you222
2023-07-14 09:31:55 +08:00
jiazhoulvke
jiazhoulvke
2023-07-14 09:32:45 +08:00
赞,确实好用。
hevi
hevi
2023-07-14 09:46:05 +08:00
支持 NextJS 吗?
you222
you222
2023-07-14 09:47:47 +08:00
@hevi 支持的,可以试试
Orangeee
Orangeee
2023-07-14 09:52:36 +08:00
我记得 1 、2 年前这个是最早的版本,OP 做的这个有新加什么功能吗
https://github.com/zthxxx/react-dev-inspector
you222
you222
2023-07-14 09:55:21 +08:00
@Orangeee 2 年前我也看过这位大佬的实现,他的那个需要配置改动到项目的代码。我的实现是借助了浏览器插件,无需入侵到项目改代码,零配置
Orangeee
Orangeee
2023-07-14 10:01:29 +08:00
@you222 👍🏻
eachann
eachann
2023-07-14 11:21:04 +08:00
坐等 OP 做一个 vue 的 23333
you222
2023-07-14 11:23:34 +08:00
@eachann OKOK ,这两周研究一下
archxm
2023-07-14 11:29:08 +08:00
他那个一周要闻,zzzq 的内容太多了,基本上有点意思的东西,也就五分之一。
zengxianghui
2023-07-14 15:09:58 +08:00
Couldn't find a React instance for the element
you222
2023-07-14 15:15:00 +08:00
@zengxianghui 本地开发的 React 项目里面报这个错吗
zhaol
2023-07-14 15:46:02 +08:00
印象中有个 locatorjs ,好像也是这个功能
zthxxx
2023-07-14 15:57:46 +08:00
如果是给团队用,或者是远程开发 Codespace / Cloud IDE 的场景, 可以考虑 react-dev-inspector 这种 server 端配合的,

比如这是 stackblitz 在线的 demo

https://stackblitz.com/github/zthxxx/react-dev-inspector/tree/dev/?file=examples%2Fvite4%2Fvite.config.ts%3AL17
zthxxx
2023-07-14 15:59:29 +08:00
@eachann vue / nuxt 本身的 devtools 插件前两年都跟进了自带支持的
Daru
2023-07-14 16:51:40 +08:00
👍
Num6
2023-07-14 17:53:13 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/956638

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX