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
  • CentOS服务器挂载本地磁盘
  • 在物理机上安装虚拟机(步骤详细)
  • windows10怎么设置负屏的方向
  • 浅谈PD快充协议和Type-C接口关系
  • 怎样给HP服务器安装cpu
  • 热门搜索
    新学期手抄报图片 成语手抄报 节约用水的手抄报 唐山世园会手抄报 安全出行手抄报 中秋节 手抄报 中国梦我的梦手抄报内容 童话手抄报内容 平安校园手抄报图片 数学王国手抄报