LUCID: Visualize GraphQL dataflow, React components & state changes

LUCID, an open-source Chrome Developer Tool lets you: • visualize your React component hierarchy, and state/prop changes • log GraphQL schema, queries, and mutations in real-time We welcome all feedback and contributions. Try it out, let us know what you think, and drop us a Github star! And Chrome WebStore stars too!

It is a very promising development tool. Thank you for developing this. But now I'm not getting any better at 'Please trigger a setState() to activate Lucid devtool.' Even if my app is calling setState(). How do I get Lucid to work?

@sungho Thanks for checking it out! Do you have react developer tools (from chrome webstore) enabled? Also which version of react are you using? Happy to jump in a DM.

Underlying Technology 💻React: Lucid parses through your React app to generate an interactive tree graph representing your React component hierarchy, with node-specific state and props data. The tree updates upon each change to the React app's state, and displays a log of state diffs on the left. This is done by creating a persistent data bridge to the user's React application via the Javascript API for WebExtensions' background and content scripts. Lucid injects scripts utilizing React DevTool's Global Hook to recursively traverse through the React DOM each time setState is called, resulting in a tree and a log that each display real-time feedback. Our app itself uses React internally so as the state of your live app changes, the Lucid tree graph will also provide visual feedback of data flow and state changes through the React components immediately. 💻 GraphQL: Lucid intercepts HTTP requests using Chrome Devtool APIs to display a log of real-time Apollo client queries and mutations, along with associated response objects. Lucid also uses GraphQL schema introspection to display schema information from the server. This allows full-stack developers to debug their app from the front-end to the back-end, as requests are generated, responses are returned from the server, and data flows through React components to be rendered in the DOM. 👉 How It Works In the React panel is a tree graph representing your application's component hierarchy. - Hovering over any React Component in the tree displays the state and props data of that component in the top left. - The State Diff Log tracks changes in state whenever setState() is triggered. - Filter out specified higher-order components from your tree graph (e.g. Redux, Apollo-GraphQL, and React Router) by clicking the buttons. In the GraphQL panel, a chronological log of API requests is shown on the left. - A GraphQL schema of all available types, queries, and mutations is also automatically fetched from the GraphQL server when Lucid is initialized and displayed on the bottom. - Click each request log to see its associated HTTP response.

Seems to be a nice devtool! Too bad it's only working with Apollo GraphQL servers...

@pierrickgt Hi, we actually are currently talking about how to support more than just Apollo GraphQL servers. So make sure to keep an eye our for future updates. 😃

@sungho Thanks for checking it out! Do you have react developer tools (from chrome webstore) enabled? Also which version of react are you using? Happy to jump in a DM.

Seems to be a nice devtool! Too bad it's only working with Apollo GraphQL servers...

@pierrickgt Hi, we actually are currently talking about how to support more than just Apollo GraphQL servers. So make sure to keep an eye our for future updates. 😃