Published Chrome extension for streamlined React development🎉
Tags: react, webdev, javascript, opensource
Published: 2022-09-06 02:54:49

---
title: Published Chrome extension for streamlined React development🎉
published: true
description: You can detect and open the React component source code easily.
tags: react, webdev, javascript, opensource
cover_image: https://user-images.githubusercontent.com/24843808/188106077-ff409aeb-0145-4977-9be2-16d04809cc78.gif
---

I created a Chrome extension called **React Inspector**.

**It launches the inspector on Chrome and opens the source code of the clicked React component in an editor. (Currently only VSCode is supported)**
PS: ↑2022/09/12 "Open in Editor URL" can be set from the options page to open with **Any Editor** 's URL schema...!


- Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
- GitHub: https://github.com/hand-dot/react-inspector

You can jump directly to the React source code, which makes it very easy to identify the code from the UI.

- Newly joined projects
- Multilingual website
- Maintenance of old apps

I think it would be convenient and save time to identify the source code if you can use it for projects such as

---

## How it works

You are probably already familiar with [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), a Chrome extension officially provided by the React team.

React Developer Tools sets a global named `__REACT_DEVTOOLS_GLOBAL_HOOK__`, then React communicates with that hook during initialization. 

The `__REACT_DEVTOOLS_GLOBAL_HOOK__` has a Map object called `renderers`.
The method `findFiberByHostInstance` of `renderers` can be used to find React Fiber from HTML elements on a web page.

Fiber is a reconciliation engine for React.
**But in addition to the information needed for reconciliation, Fiber has some other information that the developer can use for debugging that is added during development builds.**

https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193

**React Inspector opens files in VSCode using the `_debugSource` information set in Fiber.**

---

## Requirements

As explained above, it works using the React Developer Tools setting of `REACT_DEVTOOLS_GLOBAL_HOOK` and React Fiber at development build time, so it will not work unless the following two points are satisfied.

1. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) must be installed.
2. React must be in development build.   
  If you visit a site with React in development mode, the icon will have a red background
  ![react development build](https://storage.googleapis.com/zenn-user-upload/9dc1772acda4-20220905.png)
  
---

## How to start the Inspector

With the React Developer Tools installed and the React development server up and running, you can launch the inspector in the following three ways.

1. Click on the extension icon
![chrome extension icon](https://storage.googleapis.com/zenn-user-upload/5d0a54d3ef4c-20220905.png)
2. From context menu
![context menu](https://storage.googleapis.com/zenn-user-upload/2bbe83a46578-20220906.png)
3. By Shortcut
Mac: `Command+Shift+X`
Win: `Ctrl+Shift+X`

---

## Impressions on how I made it

- I could develop Chrome extension quickly with TS using https://crxjs.dev/
- I learned a little bit about the internal structure of React, and I discovered many things when I read the source code of React.
- I've opened a [GitHub repository](https://github.com/hand-dot/react-inspector), so if you have any ideas or problems, please feel free to open an Issue!

[![CleanShot 2022-09-02 at 18 08 23](https://user-images.githubusercontent.com/24843808/188106077-ff409aeb-0145-4977-9be2-16d04809cc78.gif)](https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh)

- Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
- GitHub: https://github.com/hand-dot/react-inspector