请看下面我发布的一个能够提高React开发舒适度的Chrome扩展！

我制作了一个名为React Inspector的Chrome浏览器扩展工具。

在Chrome上启动检查器，并在编辑器中以精确的方式打开所点击的React组件的源代码。（目前仅支持VSCode）

• Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh

GitHub: https://github.com/hand-dot/react-inspector

可以直接跳转到React源代码，这样就非常容易从UI中确定代码了。

• 新しく入ったプロジェクト

• 多言語対応されたサイト

昔作ったアプリのメンテ

我认为如果能在诸如此类的场景中使用，可以节省确定源代码的时间，非常方便。

它是如何运作的？

我认为大家都知道 React Developer Tools 这个由 React 团队官方提供的 Chrome 扩展程序。

React Developer Tools 在初始化时设置了一个名为 __REACT_DEVTOOLS_GLOBAL_HOOK__ 的全局变量，并在初始化过程中与该变量进行通信。

在 __REACT_DEVTOOLS_GLOBAL_HOOK__ 中，有一个名为 renderers 的 Map 对象，可以使用其中存储的方法 findFiberByHostInstance 来从网页上的 HTML 元素中找到 React Fiber。

Fiber是React的差分检测处理引擎。
然而，除了差分处理所需的信息之外，Fiber还具有一些在开发构建时可用于调试的附加信息。
https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193

React Inspector在使用Fiber中设置的_debugSource信息，在VSCode中根据文件名+行+列打开。

必要的条件

只有满足以下两个条件，才能使React Developer Tools设置REACT_DEVTOOLS_GLOBAL_HOOK并使用开发版本的React Fiber进行操作，如上所述。

启动检查员的方法

安装 React Developer Tools 并在启动 React 的开发服务器的情况下，可以通过以下三种方法启动检查器。

我的感受生成的东西。

• Chrome拡張は https://crxjs.dev/ を使うとTSで楽に開発できる。

• Reactの内部構造を少し知れた。Reactのソースコードを読むといろいろ発見がある。

GitHubレポジトリ公開しているのでアイデアや不具合があれば気軽にIssueください！

• Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh

GitHub: https://github.com/hand-dot/react-inspector