Lucid是一个React / GraphQL开发人员工具，旨在帮助开发人员调试依赖GraphQL资源的React应用程序。 Lucid开发人员工具可让您并排可视化React应用程序的组件层次结构和GraphQL模式，查询和变异，从而使调试更加轻松。

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

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

Lucid使用Chrome开发人员工具API和GraphQL的架构自检功能拦截HTTP请求，以显示实时Apollo客户端/服务器查询和变异的日志，以及它们的GraphQL架构和响应对象。这样，当生成请求时，全栈开发人员就可以从前端调试整个应用程序，直到后端进行调试，然后再流经服务器再返回到DOM。