All Projects → React-Sight → React Sight

React-Sight / React Sight

Licence: mit
Visualization tool for React, with support for Fiber, Router (v4), and Redux

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to React Sight

react-pits
React 中的坑
Stars: ✭ 29 (-98.93%)
Mutual labels:  react-router, react-component, react-redux
awesome-web-react
🚀 Awesome Web Based React 🚀 Develop online with React!
Stars: ✭ 31 (-98.86%)
Mutual labels:  react-router, react-component, react-redux
React Builder
⚙ A GUI tool to build your react app in the fastest way with all components and pages with routing.
Stars: ✭ 82 (-96.98%)
Mutual labels:  hacktoberfest, developer-tools, react-router
rgxp
Regular Expression Collection (ReactJS, Redux, React Router, Recompose, NodeJS, Express)
Stars: ✭ 62 (-97.72%)
Mutual labels:  react-router, react-redux, react-router-v4
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (-67.42%)
Mutual labels:  react-router, react-redux, react-router-v4
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (-97.86%)
Mutual labels:  react-router, react-redux, react-router-v4
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (-94.59%)
Mutual labels:  react-router, react-redux, react-router-v4
Redux First History
🎉 Redux First History - Redux history binding support react-router - @reach/router - wouter
Stars: ✭ 163 (-94%)
Mutual labels:  react-router, react-redux
Cutcode
A browser extension that enables double click to copy code snippet from stack overflow.
Stars: ✭ 163 (-94%)
Mutual labels:  hacktoberfest, developer-tools
Buttercup Browser Extension
🌏 Buttercup browser extension
Stars: ✭ 164 (-93.96%)
Mutual labels:  hacktoberfest, chrome
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (-93.81%)
Mutual labels:  hacktoberfest, chrome
Slack Patron
Log and view all Slack messages.
Stars: ✭ 157 (-94.22%)
Mutual labels:  react-router, react-redux
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-94.26%)
Mutual labels:  react-router, react-redux
Sponsorblock
Skip YouTube video sponsors (browser extension)
Stars: ✭ 3,627 (+33.54%)
Mutual labels:  hacktoberfest, chrome
Typescript Mern Starter
Build a real fullstack app (backend+website+mobile) in 100% Typescript
Stars: ✭ 154 (-94.33%)
Mutual labels:  react-redux, react-router-v4
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (-27.28%)
Mutual labels:  developer-tools, react-component
Chrome Extensions Reloader
A chrome extension for reloading unpacked extensions
Stars: ✭ 154 (-94.33%)
Mutual labels:  developer-tools, chrome
Ecommerce Reactjs
Full stack ecommerce online store application
Stars: ✭ 164 (-93.96%)
Mutual labels:  react-router, react-redux
React Blog
personal blog design by react
Stars: ✭ 170 (-93.74%)
Mutual labels:  react-redux, react-router-v4
React Native Pdfview
📚 PDF viewer for React Native
Stars: ✭ 198 (-92.71%)
Mutual labels:  hacktoberfest, react-component

Coverage Status Maintainability Build Status Chrome Web Store Chrome Web Store Mozilla Add-on License: MIT

Note: project isn't actively maintained. If you would like to maintain, feel free to submit PRs or reach out to @davidcsally I also suggest installing it as click-to-run or inside its own chrome profile, so that it doesn't slow down regular browsing

React Sight


React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux. Now with support for Firefox!



Set Up | Install From the Chrome Store

  1. Make sure you've added React Dev Tools to Chrome.
  2. Install React Sight from the Chrome web store
  3. If you are running local file URLs, make sure to enable "Allow access to file URLs" in the extension settings for both React Dev Tools and React Sight
  4. Run your React application, or open (almost!) any website running React!
  5. Open Chrome Developer Tools (cmd+opt+j) -> React Sight panel

Set Up | Firefox

This is the same as Chrome, except you will use the addons from the Firefox website

  1. Add React Dev Tools
  2. Add React Sight from the Firefox addons website.

Building Your Own Version

If you'd like to build your own version of React Sight from the source code, follow these steps:

  1. Clone the repo and run yarn install or npm install to install dependencies.
  2. Use yarn build to generate the build.

Adding to Chrome

  1. Open Chrome and go to the extensions page
  2. Toggle developer mode in the upper right corner if necessary
  3. Click 'Load unpacked'
  4. Load the folder ~/ReactSight/build/extension

Firefox

  1. Load the extension as a "Temporary Extension" by navigating to: about:debugging#/runtime/this-firefox
  2. Click "Load Temporary Add-on"
  3. Load the file ~/ReactSight/build/extension/manifest.json. In Firefox, you load the extension's manifest instead of the extension's folder

If you have any additional questions send us a message at [email protected] :)

Usage

Hover over nodes to see their state and props in the side panel.

Hide DOM elements, Redux components, and Router components with the built in filters, so that you can focus only on the components you've written

Zoom in by double clicking, and zoom out by shift + double clicking (mousewheel zoom coming soon!)

Why?

We built React Sight because there are no tools on the market that give you a visual representation of the structure of your App. When we were developing our own projects, we wished we had a way to see how everything was structured.

We wanted React Sight to be simple to use, which is why all you have to do is install a Chrome extension. No modifying your existing code!

How Does It Work?

When the dev tools are opened, React-Sight searches for React renderer's, and patches the render to collect data on each state change.

Data is posted to the Window, where it is read by Chrome's background.js window, and is then relayed to React-Sight's devTools page.

The raw data is then processed and fed to D3, where it is displayed to the user.

Troubleshooting

In React16 you will need to trigger a render to have your application show up. The data is not exposed until React's renderer is called.

'React not found' or no data:

Sometimes React-Sight doesn't get a snapshot of the data at load, triggering a setState ussually fixes this

Maximum call stack exceeded and other console errors:

This is a bug where the parsing functions get stuck in an infinite loop. We are working on a fix.

Testing

Run yarn test to run the test suite. Tests are run using jest.

Contributing

Found a bug? Have a suggestion? Want to make React-Sight better?

Please submit issues/pull requests if you have feedback or would like to contribute. If you're interested in joining the React Sight team as a contributor, feel free to message one of us directly, or just start submitting pull requests!

Authors

David C Sally (https://github.com/davidcsally)

Grant Kang (https://github.com/Grant05)

William He (https://github.com/hewilliam)

Contact

Like our app? Found a bug?

Tell us what you think!

[email protected]

Visit us at www.reactsight.com

Roadmap

Here's our top development priorities

  1. Better support across on React 16+.
  2. More consistent detection of root nodes when React Sight is opened.
  3. Support for multiple React Applications / mounting nodes, currently it picks the first React application in the renderers list.
  4. More robust error handling and guard blocks for extracting state, props, and store
  5. Logging / Debugging mode for development, feedback, and error reporting
  6. Performance and stability updates
  7. UX improvements
  8. Improved documentation
  9. Hook into the react-devtools-backend so that we don't have to reimplement it :)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].