C-React

A Chrome Extension tool that visualizes React rendering of components

What is C-React?

C-React is an open-source Chrome Extension tool that visualizes DOM components as a tree, marks rendering patterns on web pages, and provides performance metrics to promote efficient load times. It works with React applications rendered by our Custom Renderer and also with any webpage, although some features may not be available.

Download

Extension stats

By: C-React

View on Chrome Web Store

Users: 111 ▲ 4

Rating: 5.00 (4)

Version: 1.1 (Last updated: 2023-05-21)

Creation date: 2023-05-21

Risk impact: Moderate risk impact

Risk likelihood: Low risk likelihood

Manifest version: 3

Permissions:

activeTab
scripting
contextMenus
storage

Size: 717.82K

Email: ff*****@gmail.com

Ranking

# 68970 ▲ 499

Other rankings

#8608 in Developer Tools ▼ 6 #51 in component keyword 11 ▼ 2 #246 in developer tools keyword 59 ▼ 2

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

C-React is an open-source tool that visualizes DOM components as a tree, marks rendering patterns on web pages, and displays performance metrics.

The C-React Developer Tool displays a DOM component tree within the Chrome Developer Panel, which receives data sent from our Custom Renderer (https://www.npmjs.com/package/creact-visualizer). Our Developer Tool dynamically updates and communicates with the webpage to visualize component changes and also provides performance metrics of components to promote efficient load times.

Instructions:

C-React DevTool from the Chrome Web Store
Open your React application, rendered by our Custom Renderer
Open Chrome Developer Tools and click on the C-React panel
Watch the tree update dynamically as you navigate through your web page by clicking on components
Click on tree nodes to see corresponding element highlighted on your web page

This Dev Tool also works with any webpage that is not rendered by our Customer Renderer, but it will not display loading times for specific elements or display corresponding element highlighted on your web page when a tree node is clicked.

Visit us at https://www.c-react.dev/

User reviews

If you are looking for something can grab you the react node tree

Chen SHEN, 2023-06-09

Works great on any website! But works best when used with the custom renderer as described on the description (https://www.npmjs.com/package/creact-visualizer)