Reactコンポーネントのソースコードを見つけてくれるChrome拡張機能

(chromewebstore.google.com)

10 ポイント投稿者 unqocn 2024-11-16 | 1件のコメント | WhatsAppで共有

ブラウザにレンダリングされた要素から、Reactコンポーネントのソースコードをすばやく見つけられるChrome拡張機能です。

社内でReactソースコード読解の勉強会をしていた際に、「Reactのソースコードを読めばこんなこともできますよ」というコンセプトで作った拡張機能です。特に宣伝や紹介をしたことはなかったのですが、口コミでアメリカやインドの開発者の方々にもかなり使っていただいているので、紹介も兼ねて投稿します。

拡張機能をインストールした後、開発者ツール内の React Code Finder タブを開くと、開発環境でコンポーネントのコードをすばやく見つけてIDEで開いたり編集したりできます。

アプリの規模が大きくなるにつれて、レンダリングされた要素をもとにソースコードをすばやく見つけるのが難しい方、react-devtools 拡張機能の使い勝手に物足りなさを感じていた方、コードをリアルタイムで修正してブラウザで変更内容を確認したい方にとって便利だと思います。

詳しい使い方は以下の README.md をご覧ください！

Github リンク

1件のコメント

unqocn 2024-11-16

ちなみに、拡張機能を公開してみたところ、すでに似た拡張機能／ライブラリとして Locatorjs という名前の製品があることを知りました！

個人的な使用感では自分の拡張機能のほうが少し使いやすかったのですが、単に自分が慣れているからかもしれないとも思います（笑）

こうした機能に関心がある方は、こちらの製品も参考にしてみるとよいと思います。