<p><strong>React Inspector</strong> というChrome拡張機能を作りました。</p>
<p><strong>Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応)</strong></p>
<p>追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...!</p>
<p><a href="https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh" target="_blank" rel="nofollow noopener noreferrer"><img src="https://user-images.githubusercontent.com/24843808/188106077-ff409aeb-0145-4977-9be2-16d04809cc78.gif" alt="CleanShot 2022-09-02 at 18 08 23" loading="lazy" class="md-img"></a></p>
<ul>
<li>Chrome web store: <a href="https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh" target="_blank" rel="nofollow noopener noreferrer">https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh</a>
</li>
<li>GitHub: <a href="https://github.com/hand-dot/react-inspector" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hand-dot/react-inspector</a>
</li>
</ul>
<p>Reactのソースコードに直接ジャンプできるのでUIからのコードの特定がすごく楽になります。</p>
<ul>
<li>新しく入ったプロジェクト</li>
<li>多言語対応されたサイト</li>
<li>昔作ったアプリのメンテ</li>
</ul>
<p>などで使ってもらえるとソースコードを特定する時間が削減されて便利だと思います。</p>
<hr>
<h2 id="%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E5%8B%95%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E5%8B%95%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B" aria-hidden="true"></a> どうやって動いているのか</h2>
<p><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi" target="_blank" rel="nofollow noopener noreferrer">React Developer Tools</a>というReactチームが公式に提供しているChrome拡張機能はみなさんご存知かと思います。</p>
<p>React Developer Tools は <code>__REACT_DEVTOOLS_GLOBAL_HOOK__</code> というグローバル変数を設定し、その後Reactは初期化中にその変数と通信します。</p>
<p><code>__REACT_DEVTOOLS_GLOBAL_HOOK__</code> には <code>renderers</code> というMapオブジェクトがあるのですが、その値に格納されている <code>findFiberByHostInstance</code> というメソッドを使ってWebページ上のHTML要素からReact Fiberを探すことができます。</p>
<p>FiberはReactの差分検出処理エンジンです。<br>
<strong>しかし差分処理に必要な情報以外にも、Fiberには開発ビルド時に追加されるデバッグに使える情報がいくつかあります。</strong><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__73f09ef4611a5" src="https://embed.zenn.studio/github#zenn-embedded__73f09ef4611a5" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ff0efa1164b7ca8523b081223954d05c88e92053b%2Fpackages%2Freact-reconciler%2Fsrc%2FReactInternalTypes.js%23L193" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193</a></p>
<p><strong>React Inspectorは Fiberに設定されている <code>_debugSource</code> という情報を使ってエディタでファイル名+行+列で開く ということをやっています。</strong></p>
<hr>
<h2 id="%E5%BF%85%E8%A6%81%E6%9D%A1%E4%BB%B6">
<a class="header-anchor-link" href="#%E5%BF%85%E8%A6%81%E6%9D%A1%E4%BB%B6" aria-hidden="true"></a> 必要条件</h2>
<p>上記で説明したように、React Developer Toolsの設定する <code>REACT_DEVTOOLS_GLOBAL_HOOK</code> と開発ビルド時のReact Fiberを利用して動作するため、下記の2点が満たされないと動きません。</p>
<ol>
<li>
<a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi" target="_blank" rel="nofollow noopener noreferrer">React Developer Tools</a> がインストールされている</li>
<li>Reactが開発用ビルドであること<br>
React DevToolで開発モードの React のサイトを訪れた場合、アイコンは下記のような赤い背景となっています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/9dc1772acda4-20220905.png" alt loading="lazy" class="md-img">
</li>
</ol>
<hr>
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%9A%E3%82%AF%E3%82%BF%E3%81%AE%E8%B5%B7%E5%8B%95%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%9A%E3%82%AF%E3%82%BF%E3%81%AE%E8%B5%B7%E5%8B%95%E6%96%B9%E6%B3%95" aria-hidden="true"></a> インスペクタの起動方法</h2>
<p>React Developer Toolsをインストールし、Reactの開発サーバーを立てた状態で、下記の3通りの方法でインスペクタを起動できます。</p>
<ol>
<li>拡張機能のアイコンをクリック<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5d0a54d3ef4c-20220905.png" alt loading="lazy" class="md-img">
</li>
<li>コンテキストメニュー<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2bbe83a46578-20220906.png" alt loading="lazy" class="md-img">
</li>
<li>ショートカット<br>
Mac: <code>Command+Shift+X</code><br>
Win: <code>Ctrl+Shift+X</code>
</li>
</ol>
<hr>
<h2 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E6%84%9F%E6%83%B3">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 作った感想</h2>
<ul>
<li>Chrome拡張は <a href="https://crxjs.dev/" target="_blank" rel="nofollow noopener noreferrer">https://crxjs.dev/</a> を使うとTSで楽に開発できる。</li>
<li>Reactの内部構造を少し知れた。Reactのソースコードを読むといろいろ発見がある。</li>
<li>
<a href="https://github.com/hand-dot/react-inspector" target="_blank" rel="nofollow noopener noreferrer">GitHubレポジトリ</a>公開しているのでアイデアや不具合があれば気軽にIssueください！</li>
</ul>
<p><a href="https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh" target="_blank" rel="nofollow noopener noreferrer"><img src="https://user-images.githubusercontent.com/24843808/188106077-ff409aeb-0145-4977-9be2-16d04809cc78.gif" alt="CleanShot 2022-09-02 at 18 08 23" loading="lazy" class="md-img"></a></p>
<ul>
<li>Chrome web store: <a href="https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh" target="_blank" rel="nofollow noopener noreferrer">https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh</a>
</li>
<li>GitHub: <a href="https://github.com/hand-dot/react-inspector" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hand-dot/react-inspector</a>
</li>
</ul>


React開発を快適にするChrome拡張を公開したので見てください！

kiyomizu

Kyohei Fukuda

<p>現在他の方からも要望いただきましたので時間を見つけてリリースします！しばしおまちを！</p>


<p>修正したものを審査に出しました... 公開までしばしお待ちください！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fffe3acbbebc2" src="https://embed.zenn.studio/card#zenn-embedded__fffe3acbbebc2" data-content="https%3A%2F%2Fgithub.com%2Fhand-dot%2Freact-inspector%2Fissues%2F1%23issuecomment-1242609608" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/hand-dot/react-inspector/issues/1#issuecomment-1242609608" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hand-dot/react-inspector/issues/1#issuecomment-1242609608</a></p>


Discussion