如何在Chrome浏览器的Recoil扩展中查看具体状态数值

• 首先确认你已经在项目代码中完成DevTools集成：在根组件的<RecoilRoot>内部嵌套引入<RecoilDevTools />组件，参考代码如下：

import { RecoilRoot } from 'recoil';
import { RecoilDevTools } from 'recoil/devtools';

export default function App() {
  return (
    <RecoilRoot>
      {/* 仅开发环境会加载，生产环境自动失效 */}
      <RecoilDevTools />
      {/* 你的业务组件代码 */}
    </RecoilRoot>
  );
}

• 打开Chrome开发者工具，切换到你截图中所示的Recoil标签页
• 左侧面板会自动枚举项目中所有注册的atom和selector状态，点击你需要查询的状态名称
• 右侧详情面板会直接展示该状态的当前实时数值：如果是基础类型直接展示原值，如果是对象/数组类型可点击层级展开箭头查看内部所有属性值
• 若需要查看状态的变更历史，点击顶部的Timeline标签，即可查看每次更新的前后值、触发更新的组件来源等信息

注：如果左侧没有展示任何状态，请确认当前处于开发环境，Recoil DevTools默认不会在生产环境下暴露状态信息。

内容的提问来源于stack exchange，提问作者Trương Văn Toàn