Chrome浏览器如何查看React vDOM树

2024-10-19 01:40:44

1、首先,查看React插件在当前页面下是否激活,且是否处于development build状态。

Chrome浏览器如何查看React vDOM树

3、打开开发者工具后,点击Components选项卡,可以看到React组件树结构,如图。这个树是省略了一些类别的元素后的vDOM。

Chrome浏览器如何查看React vDOM树

5、选中一个组件,在右侧可以看到几个小按钮,点击如图的查看源码按钮。

Chrome浏览器如何查看React vDOM树

7、如果要在控制台查看React组件的数据,可以点击小虫子图标,如图。

Chrome浏览器如何查看React vDOM树Chrome浏览器如何查看React vDOM树
猜你喜欢