如何用好chrome插件 react-developer-tools 调试react程序

react-developer-tools功能介绍

一、组件的结构层级关系展示

父节点，子节点，兄弟节点等，整个组件树的预览

二、组件的信息展示及操作（修改，复制，打印）

• 数据状态 （可修改）

  • 外部数据prop
  • 内部数据state:支持state，和hooks 两种写法
• 组件在源码的位置（文件名，文件行）
• 层级结构（上一级目录，可通过这个点击跳转）
• 查看组件源码内容

三、定位指定组件

• 光标定位：类似chrome html元素选择器，select an element in the page to inspect it
• 搜索定位：导出的数组需要设置导出名字，否则就是匿名组件（anonymous）
• 级层定位：需要先选中一个组件，右侧面板中，再点击目录层级可直接跳转

四、其他功能

• 定位到指定组件的html Elements位置