Reactインスペクター:Chromeから簡単にReactコンポーネントのソースコードを検出する
React Inspectorは、hand-dotによって開発された無料のChrome拡張機能で、開発者が簡単にReactコンポーネントのソースコードを検出できます。単純なキーボードショートカット(WindowsではCtrl+Shift+X、MacではCommand+Shift+X)で、ユーザーはインスペクタを起動し、Reactコンポーネントを検査することができます。
React Inspectorを使用するには、ユーザーはReact Developer Toolsをインストールし、開発ビルドで作業している必要があります。この拡張機能は、React Devtoolsによってグローバルに設定された__REACT_DEVTOOLS_GLOBAL_HOOK__にアクセスし、インスペクタがホバーするHTML要素内のReact Fiberを特定します。React Fiberにはソースコードに関する貴重な情報が含まれており、さらなる分析や開発のためにエディタで開くことができます。
React Inspectorの主な特徴の1つは、その柔軟性です。ユーザーは拡張機能のオプションページから「エディタで開くURL」をカスタマイズできます。これにより、VSCode以外のエディタでソースコードを開くことができます。