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 파일 다운로드

크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.

확장 프로그램 사용 설명서

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 } ] }