手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

chrome浏览器如何查看react的组件state

时间:2024-10-13 08:21:08

1、首先,有一个如图所示react项目,其中App组件中有EntityList组件带有state。

chrome浏览器如何查看react的组件state

2、这个项目的运行效果如图所示,下面说明在chrome中查看react组件中的state/props等的办法。

chrome浏览器如何查看react的组件state

3、首先说不通过插竭惮蚕斗件的方式,除了console.log,可以在变更state的地方断点,在Scope中找到通常是this对象,展开找到state, props等。

chrome浏览器如何查看react的组件state

4、如果要通过插件,首先点击右上角菜单,如图进入扩展程序页面。

chrome浏览器如何查看react的组件state

5、在扩展程序页面找到打开chrome网上应用店。如果获取不了可以从其它地方找插件文件分享。

chrome浏览器如何查看react的组件state

6、在扩展程序中搜索react,可以找到React Developer Tools插件。点击添加到chrome。

chrome浏览器如何查看react的组件state

7、添加到chrome以后,如果当前页面没有用react,或者页面没刷新,插件标志是灰色的。

chrome浏览器如何查看react的组件state

8、如果打开了使用react的页面,标志会筐毙险裆变色。如图红色标致表示检测到development build的react。

chrome浏览器如何查看react的组件state

9、打开chrome开发者工具,在选项卡上多了Components这一个。点开可以查看react组件。

chrome浏览器如何查看react的组件state

10、选中一个react组件,如果组件是一个class component,即可看到其state。

chrome浏览器如何查看react的组件state

11、另外,使用选项卡中的Profiler可以采集一段操作,然后分析页面的渲染来分析性能。

chrome浏览器如何查看react的组件state
© 手抄报圈