Realize for Reactとは何ですか？

Realize for ReactはRealize for Reactによって開発されたChromeの拡張機能で、その主な機能は「A React component tree visualizer」です。

拡張機能のスクリーンショット

Realize for React拡張機能のCRXファイルをダウンロード

Realize for React拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.

Prerequisites
1. You must have React Dev Tools installed to use Realize for React. Install it from the Chrome store
2. Realize is best used on non-deployed applications. This uglification of deployed websites makes the component structure pretty unreadable.

How to use
1. Click the blue 'Add to Chrome' button
2. Once installed, navigate to your React website
3. Open the dev tools window and click on the Realize panel
4. Trigger a state change to populate the component tree

Functionality:
- Utilize the search bar to search for any component that exists in the tree.
- Clicking a node component will display information about state, children, props, and hooks in the right hand panel.
- You can zoom and pan the tree by holding shift and dragging/scrolling
- Click the 'State' button to view the flow of state through the component tree

拡張機能の基本情報

名前	Realize for React
ID	llondniabnmnappjekpflmgcikaiilmh
公式URL	https://chromewebstore.google.com/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh
説明	A React component tree visualizer
ファイルサイズ	160 KB
インストール数	5,086
現在のバージョン	1.0.0.0
最終更新日	2020-06-20
公開日	2020-06-20
評価	1.88/5 合計 8 レビュー
開発者	Realize for React
Eメール	[email protected]
支払い方法	free
拡張機能のウェブサイト	http://www.realizeforreact.com
ヘルプページのURL	http://www.realizeforreact.com
対応言語	en-US
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Realize for React", "version": "1.0.0.0", "description": "A React component tree visualizer", "icons": { "16": "16.png", "32": "32.png", "48": "48.png", "128": "128.png" }, "permissions": [ "activeTab", "" ], "background": { "scripts": [ "background.js" ] }, "web_accessible_resources": [ "hook.js" ], "devtools_page": "devtools-root.html" }