React Developer Tools lets you inspect the React component hierarchy, including component props and state. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).
Questions tagged [react-devtools]
220 questions
4
votes
1 answer
No State shown in React DevTools Profiler
For some reason I cannot see the state of the component for a particular commit.
Am I missing something really obvious or is this feature somehow not supported?
I am using Firefox 72.0.1.
In the image below I double-clicked Table (one click doesn't…

wonderingdev
- 1,132
- 15
- 28
4
votes
1 answer
Why do I have two instances of my App in React Dev. Tools?
When debugging my React Application using Chrome / React Developer Tools, I see two instances of my Application. Has anyone experienced this? Is it actually rendering two instances or is it just a developer bug?
import React from 'react';
import…

Crutio
- 41
- 3
4
votes
2 answers
React-devtools for hooks?
I use the react-devtools Chrome extension. When I set state using hooks (useState) to set an object in state, the actual setting of state seems to work fine. In devtools however, that state object shows that the Hooks > State has content ({...}),…

stever
- 1,232
- 3
- 13
- 21
4
votes
5 answers
How can I open react-devtools?
I am trying to install and run react-devtools. I am following this guide to do that: https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md
The install seems to go ok:
To verify it installed correctly I do this…

Lizza
- 2,769
- 5
- 39
- 72
4
votes
1 answer
ReactJs - Hide state and props
I'm currently working on a project and just started out working with ReactJs. (so still a noob)
And I'm asking myself: Users who use the React dev tools can see all your props and states. How can I prevent users from seeing e.g. IDs and more…

karlgustav
- 169
- 1
- 3
- 10
4
votes
0 answers
Small font in react-devtools
I am getting really small font after opening react-devtools on ubuntu 16.04.
https://github.com/facebook/react-devtools/tree/master/packages/react-devtools
You can see comparison of the react-devtools and 'normal' font size in the screen…

bsekula
- 914
- 1
- 9
- 25
4
votes
2 answers
react-devtools: By default DevTools listen to port 8097 on localhost. How to customise?
I'm trying to install the standalone react-devtools, which by default listens to port 8097. My app uses port 3001. The documentation says the following:
"By default DevTools listen to port 8097 on localhost.
If you need to customize host, port, or…

a7dc
- 3,323
- 7
- 32
- 50
3
votes
0 answers
React Native developer menu is not showing in android debug build
Blank white screen is coming instead of developer menu in android debug build.enter image description here
Compared sample project android/app/src/debug/AndroidManifest.xml with my AndroidManifest file found this line was missing in my project,…

Lokesh
- 39
- 4
3
votes
4 answers
TypeError: Cannot read properties of undefined (reading 'length')
Working my way through my first fullstack MERN app that allows a user to add multiple places to an array. Trying to map over the array to display the number of places for the user. Code works fine until I use .length, then it crashes.
import React…

SJo
- 33
- 1
- 7
3
votes
1 answer
How can I traverse React Component Tree just using __REACT_DEVTOOLS_GLOBAL_HOOK__
I am trying to traverse through React Component Tree( or somehow get access to all components)
and create my own custom UI inside the browser(most likely an extension) to manipulate different components.
this is my code:
// const root_node =…

Saif789
- 69
- 3
3
votes
0 answers
Why does LogBoxStateSubscription cause commits in the React dev tools profiler?
I am trying to profile my React Native app, but LogBoxStateSubscription seems to create commits when profiling:
I have not seen this before - how can I stop this so I only see commits caused by my React source code rendering?
I have tried to use…

Mr. Robot
- 1,334
- 6
- 27
- 79
3
votes
0 answers
Edit state variables in React devtools when using a Zustand store
In React devtools you can easily edit and toggle state variables - either stored locally, in Context, or with some fancy add-ons like redux devtools.
Is there a way to do that with Zustand store hooks? It seems to me like they're just readonly.

crevulus
- 1,658
- 12
- 42
3
votes
0 answers
Timeline profiler requires a development or profiling build of react-dom@^18
I believe 17.0.2 is the latest release, or is there also a version 18? Anyone know how to get timeline profiling working on Chrome?
Chrome version: 99.0.4844.84 (Official Build) (x86_64)
Devtools version: 4.24.0 (3/10/2022)
Timeline profiler…

Thomas
- 31
- 3
3
votes
1 answer
what does mean this number in react devTools?
I have a Nextjs app that I want to profile for performance issues.
Im using the react dev tool profiler in chrome
I profile a specific interaction and get the flamegraph and the ranked time graph in the dev tool.
Then this message shows up in the…

Никита Пахомов
- 41
- 3
3
votes
1 answer
React development server is not working Apple Macbook pro M1
I am using apple MacBook Pro M1. Started react development server with react-scripts start and it hangs their not starting the server at all.
I tried with fresh sample app using create-react-app cli and not working for that.
System config:
Version…

Chetan Kumar Rawat
- 66
- 5