React-Scope:在与您应用程序交互时可视化您的React组件
React-Scope:在与您应用程序交互时可视化您的React组件
React 其它杂项
共316Star
详细介绍
Visualize your React components as you interact with your application.
Setup
- Install React Scope from Chrome web store.
- (Important) Install React Developer Tools if you haven't already.
- Enable "Allow access to file URLs" in the extension settings for React Scope.
- Run your React application.
- Open Chrome Developer Tools -> React Scope panel.
Usage
Hover over the nodes within the DOM tree visualization to see each component's state and props.
Use your app to make changes to state (e.g., trigger click events, submit data, etc.).
Every state change will update the visualization. You can click the next / prev buttons to navigate between current and previous states of your application.
Notes
This is an early stable release undergoing continuous development. Currently, this version is optimized for use in developing smaller-scale React applications.
If you experience duplicate state/props information being displayed, please try refreshing the page.
Contact
If you have suggestions or want to help make React Scope better, feel free to submit an issue or contact us at reactscope@gmail.com. (Pull requests for typographical errors will likely be ignored.)
Check us out at reactscope.com
Authors:
Kevin Gabinete - https://github.com/kgabinete08
Jonathan Lee - https://github.com/GoingInfinity
Tiffany Lin - https://github.com/misstiffanylin
Ringo Yip - https://github.com/ringoyip0901
© React Scope 2018
-
10612 Star
-
607 Star
-
154 Star
-
342 Star
-
2628 Star
-
7498 Star
-
7397 Star