Realize for React

Realize for React插件简介

Realize for React插件描述

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

Prerequisites
1. You must have React Dev Tools installed to use Realize f React. Install it from the Chrome ste
2. Realize is best used on nondeployed 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  click on the Realize panel
4. Trigger a state change to populate the component tree

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

Realize for React插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Realize for ReactChrome插件v1.0.0.0版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决