什么是React Inspector？

React Inspector是由hand-dot开发的Chrome扩展程序，该扩展的主要功能是“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扩展crx文件

下载React Inspector扩展crx格式的文件，手动将Chrome插件安装到浏览器中，也可以将crx文件分享给朋友，轻松安装Chrome插件。

扩展使用说明

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.

■Source Code
This extension is Open source. so you can access from https://github.com/hand-dot/react-inspector.
If you find a bug, please report it via Github!

扩展基本信息

名称	React Inspector
ID	gkkcgbepkkhfnnjolcaggogkjodmlpkh
官方URL	https://chromewebstore.google.com/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
简介	The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.
文件大小	26.91 KB
安装次数	4,207
当前版本	1.2.3
更新时间	2023-04-16
上架时间	2022-09-03
评分	3.00/5 共5次评分
开发者	hand-dot
电子邮箱	[email protected]
付费类型	free
扩展官网	https://github.com/hand-dot/react-inspector
帮助页面URL	https://github.com/hand-dot/react-inspector
支持的语言	en
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 3, "name": "React Inspector", "description": "The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.", "icons": { "16": "icon\/icon16.png", "48": "icon\/icon48.png", "128": "icon\/icon128.png" }, "action": { "default_title": "React Inspector: Press Ctrl+Shift+X (Command+Shift+X on Mac)" }, "version": "1.2.3", "content_scripts": [ { "js": [ "assets\/content-script-loader.content.ts.aa66660e.526aa3f4.js" ], "matches": [ "" ] } ], "devtools_page": "src\/devtools.html", "options_page": "src\/options.html", "background": { "service_worker": "service-worker-loader.js", "type": "module" }, "commands": { "inspect": { "suggested_key": { "default": "Ctrl+Shift+X", "mac": "Command+Shift+X" }, "description": "Inspect the page using the \"React Inspector\" extension." } }, "permissions": [ "activeTab", "contextMenus", "storage" ], "web_accessible_resources": [ { "matches": [ "" ], "resources": [ "assets\/constants.918f8f6b.js", "assets\/content-main-world.8c44456d.js", "assets\/content.ts.aa66660e.js" ], "use_dynamic_url": true } ] }

React Inspector

什么是React Inspector？

扩展截图

下载React Inspector扩展crx文件

扩展使用说明

扩展基本信息

相关的扩展