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

Stats

By: hand-dot

View on Chrome Web Store

Users: 4,000+

Rating: 3.00 (5)

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

URLs: Website

Stats date:

Chrome-Stats Rank

# 16134 ▼ 131

Other rankings

#714 in Developer Tools

#37 in source code keyword 28 ▼ 6

#123 in developer tools keyword 73 ▲ 8

#143 in source keyword 35 ▲ 2

#211 in development keyword 3 ▼ 3

Upgrade to see more rankings

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.

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

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.

Andrey Bazhanov, 2024-04-25

"This element cannot be opened in React Inspector.".

David Cornell, 2023-12-17

After some time it stopped redirecting. but showing the components on hover

Pavan jadhav, 2023-11-17

View all user reviews

Safety

Risk impact

React Inspector may not be safe to use and it requires some risky permissions. Exercise caution when installing this extension. Review carefully before installing.