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.

▶

React Inspector - Chrome Extension for Streamlined React Development

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

Users: 6,000+

Rating: 3.44

(9)

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

# 13,566 ▲ 103

Other rankings

#805 in Developer Tools ▲ 5 #22 in source code keyword 26 ▲ 1 #120 in source keyword 30 ▲ 1 #288 in development keyword 1

Other platforms

Package inspector (v2.4.0)

4.10

(65) 7,113+

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

Refused to load the script ' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.