什麼是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
官方網址	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文件

擴展使用說明

擴展基本資訊

相關的擴展