1、首先，有一个如图所示react项目，其中App组件中有EntityList组件带有state。
2、这个项目的运行效果如图所示，下面说明在chrome中查看react组件中的state/props等的办法。
3、首先说不通过插件的方式，除了console.log，可以在变更state的地方断点，在Scope中找到通常是this对象，展开找到state, props等。
4、如果要通过插件，首先点击右上角菜单，如图进入扩展程序页面。
5、在扩展程序页面找到打开chrome网上应用店。如果获取不了可以从其它地方找插件文件分享。
6、在扩展程序中搜索react，可以找到React Developer Tools插件。点击添加到chrome。
7、添加到chrome以后，如果当前页面没有用react，或者页面没刷新，插件标志是灰色的。
8、如果打开了使用react的页面，标志会变色。如图红色标致表示检测到development build的react。
9、打开chrome开发者工具，在选项卡上多了Components这一个。点开可以查看react组件。
10、选中一个react组件，如果组件是一个class component，即可看到其state。
11、另外，使用选项卡中的Profiler可以采集一段操作，然后分析页面的渲染来分析性能。
1、首先，有一个如图所示react项目，其中App组件中有EntityList组件带有state。
2、这个项目的运行效果如图所示，下面说明在chrome中查看react组件中的state/props等的办法。
3、首先说不通过插件的方式，除了console.log，可以在变更state的地方断点，在Scope中找到通常是this对象，展开找到state, props等。
4、如果要通过插件，首先点击右上角菜单，如图进入扩展程序页面。
5、在扩展程序页面找到打开chrome网上应用店。如果获取不了可以从其它地方找插件文件分享。
6、在扩展程序中搜索react，可以找到React Developer Tools插件。点击添加到chrome。
7、添加到chrome以后，如果当前页面没有用react，或者页面没刷新，插件标志是灰色的。
8、如果打开了使用react的页面，标志会变色。如图红色标致表示检测到development build的react。
9、打开chrome开发者工具，在选项卡上多了Components这一个。点开可以查看react组件。
10、选中一个react组件，如果组件是一个class component，即可看到其state。
11、另外，使用选项卡中的Profiler可以采集一段操作，然后分析页面的渲染来分析性能。
