Lucid

Lucid 1.0.2 CRX for Chrome or Chromium

Updated: January 17, 2019

Downloads: 10

Lucid (pnaoeldlekbfpnalhabggkcddleelamc): 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 ... Read More > or Download CRX >

Lucid Screenshot

More about Lucid

Lucid Description: 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.

Lucid Specifications & Downloads >

Download CRX

Download

232.52 KB

Chrome Store

Tech Specs

  • • Type: Browser Extension
  • • Version: 1.0.2
  • • Price: Freeware
  • • Offline: No
  • • File name: lucid.crx

User Reviews

  • aggregateRating
  • • Rating average
  • 5 out of 5
  • • Rating users
  • 20

Download Count

  • • Total downloads
  • 10
  • • Current version downloads
  • 5
  • • Updated: January 17, 2019

Lucid is a free Developer Tools Extension published by reactlucid.io. You could download the latest version crx file or old version crx files and install it.

More Extensions to Consider (Similar or Related)

Share on Facebook    Share on Twitter    Share on Gmail    Share on Reddit    Share on StumbleUpon    Share on LinkedIn    Share on Tumblr    Save to Pocket    Save to Instapaper    Share on Pinterest    Save to Evernote    Share on Telegram    Share on VK    Email this Page