lucid

Lucid 是一个 React / GraphQL 开发人员工具，旨在帮助开发人员调试依赖于 GraphQL 资源的 React 应用程序。 Lucid 开发人员工具允许您并排显示 React 应用程序的组件层次结构和 GraphQL 模式、查询和变更，从而使调试更容易。

重要的：
- 在使用 Lucid Developer Tool 之前下载 React Developer Tool。
- Lucid 处于 BETA 模式，最适合开发环境中的 React v16+ 本地项目。

怎么运行的
Lucid 解析您的 React 应用程序以生成一个交互式树形图，用特定于节点的状态和道具数据表示您的 React 组件层次结构。树随着用户应用程序状态的每次更改而更新，并在侧面显示状态差异日志。这是通过 Chrome 后台和内容脚本创建到用户应用程序的持久数据桥来完成的。 Lucid 使用 React DevTool 的 Global Hook 注入脚本，在每次调用 setState 时递归遍历 React DOM，从而生成显示实时反馈的树和日志。我们的应用程序本身使用 React，因此当您的实时应用程序的状态发生变化时，Lucid 树图还将通过 React 组件提供数据流和状态变化的视觉反馈。

Lucid 使用 Chrome 开发者工具 API 和 GraphQL 的模式自省拦截 HTTP 请求，以显示实时 Apollo 客户端/服务器查询和更改的日志，以及它们的 GraphQL 模式和响应对象。这允许全栈开发人员从前端到后端调试他们的应用程序，因为请求被生成，流经服务器并返回到 DOM。