CRX id
pnaoeldlekbfpnalhabggkcddleelamc
pnaoeldlekbfpnalhabggkcddleelamc
Description from extension meta
A React-GraphQL developer tool.
Image from store
Description from store
Lucid is a React / GraphQL Developer Tool designed for helping developers debug their React applications that depend on GraphQL resources. Lucid developer tool allows you to visualize the component hierarchy of your React application and your GraphQL schema, queries, and mutations side by side, making debugging easier.
IMPORTANT:
- Download React Developer Tool before using the Lucid Developer Tool.
- Lucid is in BETA mode and works best for React v16+ local projects in development environments.
How It Works
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 with each change to user app state and displays a log of state diffs on the side. This is done by creating a persistent data bridge to the user application via Chrome 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 log that display real-time feedback. Our app itself uses React 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.
Lucid intercepts HTTP requests using Chrome developer tool APIs and GraphQL's schema introspection to display a log of real-time Apollo client/server queries and mutations, along with their GraphQL schema and response objects. This allows full-stack developers to debug their app from the front-end through to the back-end, as requests are generated, flow through the server and back to the DOM.
Latest reviews
- (2020-02-07) Ryan Shea: It's heading in the right direction but not really usable. The GQL request log is extremely bulky. It should work similar to the network tab by showing small rows then expanding details when you click on it. I'm also getting a schema parse error on a completely valid schema. I debugged the extension and found this error: "Syntax Error GraphQL (33:37) Unexpected character "&". 32: 33: type Address implements Timestamped & CreateTimestamped { ^ 34: createdBy: ID! " Looks like it doesn't know how to handle interface unions. Maybe update the parser?
- (2019-02-27) Magentacarrot89: it fortnite epic victory royale
- (2019-01-11) Thompson Plyler: Wow. Lucid simplifies the process of debugging in React in a way that's intuitive and smart, and it's inexcusably beautiful at the same time. If you're a React developer, this just became mandatory.
- (2019-01-10) Alyson Swerdloff: Useful for debugging. Nicely done.
- (2019-01-08) Shaun Tung: Beautiful and relatively simple to use
- (2018-12-30) Frank Ma: Beautiful design and easy to use. Helpful for someone like me learning about GraphQL.
- (2018-12-30) Anthony Terruso: Very intuitive
- (2018-12-29) niantendo: Great tool for devs who are building applications with React/Redux with RESTful architecture or even with newer Apollo/GraphQL.
- (2018-12-29) Tai Hyun Lee: I love the state log and visualization of state changes on the tree graph!!
- (2018-12-29) Ting Chen: Awesome tool for developers! Highly recommended.
- (2018-12-29) Yuchen You: Extremely helpful, user friendly, cool design.
- (2018-12-29) Joanna Chao: Easy to use. Love it!
- (2018-12-27) Yong-Nicholas Kim: Great tool for inspecting React & GraphQL in your app!
- (2018-12-27) Eterna T: helpful for debugging local apps
Statistics
Installs
1,000
history
Category
Rating
4.9 (22 votes)
Last update / version
2019-05-10 / 1.0.3
Listing languages
en