https://github.com/jantimon/chrome-react-scan-inspector

Chrome Extension to automatically detect and analyze performance issues in any React application
https://github.com/jantimon/chrome-react-scan-inspector

Last synced: about 2 months ago
JSON representation

Chrome Extension to automatically detect and analyze performance issues in any React application

• Host: GitHub
• URL: https://github.com/jantimon/chrome-react-scan-inspector
• Owner: jantimon
• Created: 2024-11-29T11:26:34.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-11-29T12:14:21.000Z (11 months ago)
• Last Synced: 2025-01-02T13:52:30.381Z (10 months ago)
• Language: JavaScript
• Size: 33.2 KB
• Stars: 27
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• my-awesome-list - chrome-react-scan-inspector - Scan Chrome Extension to automatically detect and analyze performance issues in any React application | jantimon | 108 | (JavaScript)

README

          
# React Scan Inspector

![Demo](https://github.com/user-attachments/assets/0ca7c272-0407-4413-921f-56e6fcb4b6a0)

## Installation from Source

1. Download or clone this repository

2. Open Chrome and navigate to `chrome://extensions/`

3. Enable "Developer mode" in the top right

4. Click "Load unpacked" and select the extension directory

5. Click the extension icon in your toolbar to start scanning

## How It Works

React Scan Inspector automatically detects React applications and monitors their performance in real-time. When enabled, it will:

- Track component render times

- Identify unnecessary re-renders

- Log performance insights to the console

- Highlight optimization opportunities

## Usage

1. Click the extension icon in your toolbar

2. Toggle scanning on/off using the switch

## Credits

The logo, the idea, the scanner itself, and the initial implementation are all based on [React Scan](https://github.com/aidenybai/react-scan) by Aiden Bai

## License

MIT License