Skip to content
Beta

React DevTools

React DevTools, restyled to match your toolbox.

Inspect and profile React apps from Chrome DevTools with toolbox styling.

  • Side panel
  • DevTools
  • Active tab
Add to Chrome(opens the Chrome Web Store in a new tab)or pressCtrlShiftSpace
One Panel Search tools

React DevTools

Side panel

Components tree

Ready01 / 04

01Features

What it does

  1. 01Components tree
  2. 02Profiler
  3. 03Suspense inspector
  4. 04Elements sidebar
  5. 05Themed panels

02Use cases

When you'll reach for it

Track down a re-render storm
Inspect props and hooks on a live site

How to open it

  1. 1

    Side panel

    Click the One Panel icon in the toolbar and search for “React DevTools”.

  2. 2

    DevTools

    Open Chrome DevTools and switch to the One Panel panel.

Privacy

  • Reads the current tab only when you use it, through Chrome’s activeTab permission.

Keep going

Pairs well with

Developer

JSON Toolkit

Validate, format, minify, tree-view, path-query and convert JSON.

Developer

XML Toolkit

Validate, format, minify XML and convert XML to JSON.

Developer

YAML Toolkit

Validate and format YAML, convert between YAML and JSON.

Developer

SQL Toolkit

Format and minify SQL across dialects.

Developer

Regex Toolkit

Test, replace and explain regular expressions with a pattern library.

Developer

UUID / ID Toolkit

Generate and validate UUIDs (v4/v7) and NanoID identifiers.

Get React DevTools and 80 more

One install adds every tool to your side panel. No account, nothing to configure.

Add to Chrome(opens the Chrome Web Store in a new tab)