Realize for React

A React component tree visualizer

什么是Realize for React?

Realize for React是由Realize for React开发的Chrome扩展程序,该扩展的主要功能是“A React component tree visualizer”。

扩展截图

screenshot

下载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 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
电子邮箱 [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"
}