React Inspector

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

What is React Inspector?

React Inspector is a Chrome extension for React developers for quick and efficient code navigation. The extension requires the React Developer Tools to be installed and primarily works with development builds. Users have the ability to hover over HTML elements within the inspector to pinpoint the React Fiber, which contains essential source code information. It supports opening source codes in different editors such as VSCode by changing the 'Open in Editor URL' in the extension's options.

Download

Extension stats

By: hand-dot

View on Chrome Web Store

Users: 6,000+

Rating: 3.75 (8)

Version: 1.2.3 (Last updated: 2023-04-16)

Creation date: 2022-09-03

Risk impact: Moderate risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

activeTab
contextMenus
storage

Size: 27.56K

Email: in*****@labelmake.jp

Ranking

# 13695 ▼ 22

Other rankings

#797 in Developer Tools #20 in source code keyword 26 ▲ 4 #125 in source keyword 29 ▲ 2 #143 in developer tools keyword 59 ▼ 8 #279 in development keyword 2 ▼ 3

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

Easily detect React components source code from Chrome!

■Requirements ・Installed React Developer Tools ・Works only with development builds. ・Source code must be stored on local disk

■How it works The React Inspector accesses the REACT_DEVTOOLS_GLOBAL_HOOK set globally by the React Devtools and finds the React Fiber in the HTML element that the inspector hovered over. The React Fiber contains information about the source code that will be added during development, so we use that information to open the editor.

Detail: https://dev.to/handdot/published-chrome-extension-for-streamlined-react-development-23b

■Options It is possible to change the 'Open in Editor URL' from the extension's options page so that you can open it in an editor other than VSCode.

User reviews

Nice

Ferhat Cengiz, 2024-09-12

Not working for me with vite react-ts running in dev, with `build.sourcemap: true` & VS Code

Tim Osborn, 2024-07-05

It's saving lot of time for me. In my codebase "This element cannot be opened in React Inspector." barelly not showing and most components opens correctly.