Cos'è React Inspector?

React Inspector è un'estensione di Chrome sviluppata da hand-dot, e la sua funzione principale è "The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.".

Screenshot dell'Estensione

Scarica il file CRX dell'estensione React Inspector

Scarica i file di estensione React Inspector in formato crx, installa manualmente le estensioni di Chrome nel browser o condividi i file crx con gli amici per installare facilmente le estensioni di Chrome.

Istruzioni per l'Uso dell'Estensione

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!

Informazioni di Base sull'Estensione

Nome	React Inspector
ID	gkkcgbepkkhfnnjolcaggogkjodmlpkh
URL Ufficiale	https://chromewebstore.google.com/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
Descrizione	The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.
Dimensione del File	26.91 KB
Conteggio Installazioni	4,207
Versione Corrente	1.2.3
Ultimo Aggiornamento	2023-04-16
Data di Pubblicazione	2022-09-03
Valutazione	3.00/5 Totale 5 Valutazioni
Sviluppatore	hand-dot
Email	[email protected]
Tipo di Pagamento	free
Sito Web dell'Estensione	https://github.com/hand-dot/react-inspector
URL della Pagina di Aiuto	https://github.com/hand-dot/react-inspector
Lingue Supportate	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 } ] }