React DevTools Component Name Toggle

A Chrome extension that allows you to toggle the component name display feature in React DevTools. This feature shows component names during re-renders, which can be useful for debugging but might be distracting in some cases.

Features

• Toggle on/off the component name display in React DevTools
• Simple user interface with a toggle switch
• Persists your preference across browser sessions

Installation

From Source Code

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" by toggling the switch in the top right corner
4. Click "Load unpacked" and select the directory containing this extension
5. The extension should now appear in your extensions list and in the toolbar

Usage

1. Click on the extension icon in the Chrome toolbar to open the popup
2. Use the toggle switch to hide or show component names during re-renders
3. The status text will indicate the current state
4. The setting will be applied immediately to any open tabs with React applications

How It Works

The extension modifies the REACT_DEVTOOLS_GLOBAL_HOOK.reactDevtoolsAgent.getComponentNameForHostInstance function:

• When toggled on (hiding component names), it replaces the function with one that returns null
• When toggled off (showing component names), it restores the original function