React Monitor

ReactMonitor Quickly visualize React's component tree performance for improved onboarding and debugging What does it do By using…

What is React Monitor?

React Monitor is a Chrome extension that allows developers to quickly visualize React's component tree performance. It provides a visual representation of an existing codebase, displaying state, props, render times, and component types. With React Monitor, developers can easily understand and debug their React applications.

Download

Extension stats

By: reactmonitorfiber

View on Chrome Web Store

Users: 126 ▼ -5

Version: 0.0.0.1 (Last updated: 2020-06-19)

Creation date: 2020-06-19

Risk impact: Moderate risk impact

Risk likelihood: Low risk likelihood

Manifest version: 2

Permissions:

activeTab
contextMenus
<all_urls>

Size: 1.36M

Email: re*****@gmail.com

Ranking

# 66441 ▼ 1133

Other rankings

#29729 in Workflow & Planning ▼ 91 #94 in state keyword 12 ▲ 1 #99 in monitor keyword 38 ▼ 4 #104 in package keyword 9 ▼ 2 #113 in component keyword 11

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

ReactMonitor Quickly visualize React's component tree performance for improved onboarding and debugging

What does it do By using the ReactMonitor Chrome DevTool, beginning and experienced developers alike are able to get a visual representation of an existing codebase that they are working on. Built with React, this tool will dynamically traverse the fiber root object behind the scenes, displaying state, props, render times and the type of components on the page.

How to install and run? Run the NPM package in your own codebase by following the steps below.

Install the package (npm install reactmonitorfiber)
Require/Import the package (import reactMonitor from 'reactmonitorfiber')
Invoke React Monitor with an input of the DOM element that you are rendering the React Element into const container = document.querySelector('#root'); reactDOM.render(<App />, container); reactMonitor(container);