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

[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 ~

[Routeros]

404

[xihang]

Chrome 商店安装地址:https://chrome.google.com/webstore/detail/react1s/gpcoahaomdfmekggblkckofkgjggnjlp
op 漏了最后那个字母 p

[you222]

@xihang 感谢老哥

[you222]

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

[jiazhoulvke]

赞，确实好用。

[hevi]

支持 NextJS 吗？

[you222]

@hevi 支持的，可以试试

[Orangeee]

我记得 1 、2 年前这个是最早的版本，OP 做的这个有新加什么功能吗
https://github.com/zthxxx/react-dev-inspector

[you222]

@Orangeee 2 年前我也看过这位大佬的实现，他的那个需要配置改动到项目的代码。我的实现是借助了浏览器插件，无需入侵到项目改代码，零配置

[Orangeee]

@you222 👍🏻

[eachann]

坐等 OP 做一个 vue 的 23333

[you222]

@eachann OKOK ，这两周研究一下

[archxm]

他那个一周要闻，zzzq 的内容太多了，基本上有点意思的东西，也就五分之一。

[zengxianghui]

Couldn't find a React instance for the element

[you222]

@zengxianghui 本地开发的 React 项目里面报这个错吗

[zhaol]

印象中有个 locatorjs ，好像也是这个功能

[zthxxx]

如果是给团队用，或者是远程开发 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]

@eachann vue / nuxt 本身的 devtools 插件前两年都跟进了自带支持的

[Daru]

👍

[Num6]

@eachann 这有个差不多的 https://github.com/webfansplz/vite-plugin-vue-inspector