Lucid: a React-GraphQL developer tool
Lucid is a Chrome Developer Tool designed to help engineers debug their React-GraphQL applications.
- Visualize the component hierarchy, state/props data and state changes of your React application
- See your GraphQL schema, queries, and mutations in real-time
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.
|Install from Chrome Extension Store||Build your own extension|
|1. Install React Developer Tools.||1. Clone the repo and
|2. Install Lucid or Build your own extension.||2.
|3. Restart Chrome Browser.||3. Navigate to chrome://extensions.|
|4. Run your React v16+ application using GraphQL.||4. Click Load Unpacked and select your './react-lucid/build' folder.|
|5. Open Chrome Developer Tools (Inspect) and click on the Lucid panel. Trigger a re-render!|
IMPORTANT: Lucid is in BETA mode and works best for React v16+ local projects in development environments.
How to Use
- 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.
NOTE: Lucid only listens for HTTP requests while it is open in the Chrome Developer Tool panel. To see any requests that were made upon initial page load, reload your React page after opening Lucid in your Chrome browser.
- 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.
Lucid is currently in beta release. Please let us know about bugs and suggestions at email@example.com. Feel free to fork this repo and submit pull requests!
Yong-Nicholas Kim (https://github.com/yongnicholaskim)
Nian Liu (https://github.com/nianliu18)
Eterna Tsai (https://github.com/eternalee)
Neyser Zana (https://github.com/neyser95)