挂起组件模拟组件加载缓慢场景
- 点击右上角⏰按钮，Suspend the selected component
快速定位组件对应的真实DOM
- 点击右上角的👁按钮，Inspect the matching dom element
定位组件 props 中某个函数在何处创建
- 选中组件，点开props，找到变量，点击函数即可跳转过去，go to definition
props实时修改
- 选中组件，点击props变量中对应的值做修改
快速定位组件在哪个文件被创建
- 选中组件，点击右上角代码图标， view source for this element
快速定位组件在哪个文件被使用（精确到行）
- 选中组件，看到右侧source选项下，有对应的文件及行数
过滤无意义组件层让组件结构更清晰
- 点击search后的⚙，点击components,在hide components where...，类型和value
了解组件无效渲染严重层度
点击search后的⚙，点击general里的Highlight updates when components render
当开启渲染高亮后，之后我们的每次操作，只要涉及到 render 的组件都会有一个颜色的框框标注出来，而渲染的维度涉及两个方面：
- 颜色，只有绿色或者黄色，绿色表示渲染次数很少，颜色越偏黄说明渲染越多。
- 框框持续时间，如果高亮迟迟不消失，也说明渲无效渲染持续非常久。
