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
2
votes
0 answers
Get exact line number on console warning with React Devtools
I'm trying to clean the warnings on my app, but I can't find the line numbers when this occurs (it's a big app), it would be useful if after each 'at span' for example I get the line number as well.
react_devtools_backend.js:4026 Warning: Received…

r342346
- 119
- 1
- 15
2
votes
1 answer
What is Layout Effect in React Profiler
I am currently trying to improve my React App performance and I noticed in the Profiler that the bottleneck is in the Layout effects. Any idea what this Layout effect means?
I am using Material Table and Material UI, which rerenders when a checkbox…

Fransedo Ravelino
- 33
- 3
2
votes
1 answer
Next.js TypeError: Cannot set properties of undefined (setting 'hook')
This error just "explodes" when starting the app or just update the redux state
sometimes it do not shows for few state updates, but for some reason it appears all along the app
What I tried:
delete node modules and package-lock.json
dig up for…

Zhivko Nikolov
- 145
- 1
- 11
2
votes
0 answers
How to manipulate the DOM of React.JS app in chrome browser and need to add a event listener for a specific button present in source code
Is it possible to manipulate the DOM of react app especially the JavaScript functionality? I tried chrome extension React Dev Tools and able to change HTML content only and if the application is in UAT it is not working. I appreciate any suggestion…

Siri Damineni
- 31
- 1
2
votes
1 answer
How to downgrade React Devtools Chromium extension version?
React Devtools extension no longer works in our app and I've ruled out basically everything except for a change in the version of the devtools themselves. Is there some way I can download older versions of the React Devtools extension? Either packed…

Slbox
- 10,957
- 15
- 54
- 106
2
votes
0 answers
How disable message in console "Download the React DevTools" in React 18
How disable message in console "Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
" in React v.18 without install this app in browser?

Roma N
- 175
- 11
2
votes
1 answer
Why can't I change state using React devtools?
I want to be able to change state in a React app using React devtools, for example, setting loaded to false instead of true. I am not able to edit the value. This is true both on localhost and on the live web app. Why do some boolean values have a…

Ollie Williams
- 1,996
- 3
- 25
- 41
2
votes
0 answers
Using React Dev Tools with Chrome Extension based on manifest v3
I am developing a Chrome Extension based on manifest v3 and can't get React dev tools to work.
Here is what I did:
yarn add -D react-devtools
Add script tag to page of extension:
Add content…

siva
- 1,183
- 3
- 12
- 28
2
votes
1 answer
react-devtools is empty for new react-native project
I just generated a clean React Native (w/ TS) project. When I run it in the iOS simulator then try to connect to react-devtools, devtools is completely blank.
I would expect to see the default component tree here. Any idea how I should debug?
Here…

David
- 2,430
- 2
- 15
- 13
2
votes
1 answer
React Dev tools won't initialize
I am new to react and am following a tutorial where they ask to install react developer tools. However on installing the react developer tools doesnot light up. It does not activate. I followed the trouble shooting options and allowed access to file…

Sambit
- 43
- 4
2
votes
1 answer
React Dev Tools not showing name of the components
I joined a team. There are thousands of components and codes. It takes so much time to find the exact place of the component. That's why when I open the React Dev Tools I see this picture below.I did so much research about it and I understand that…

Ufuk UYSAL
- 87
- 8
2
votes
0 answers
Access react devtools `$r` from a chrome extension
I'm trying to programmatically access the name of the currently inspected component from ReactDevTools (i.e, $r.type.name).
How can I programmatically active ReactDevtools to access this value?

libby
- 585
- 4
- 15
2
votes
0 answers
Change port of react devtools
I'm trying to setup my environment to develop with react-native and react-devtools.
Per default the react-devtool uses port 8097 to connect with the app on the emulator.
Unfortunatley, this port is blocked at my workplace. Where/How can i change…

Marcel B.
- 21
- 1
2
votes
0 answers
How to debug "Critical dependency: the request of a dependency is an expression"?
Just recently I started seeing this message from several pages in my React project. I don't recall seeing it before:
react_devtools_backend.js:2430 ./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an…

HHung
- 49
- 5
2
votes
1 answer
Understanding React Webpack bundles
So I have a few questions regarding how Webpack serves its bundles. I have a React application created using create-react-app. When I inspect the JS bundles in Chrome dev tools, I can see all the individual js files I created in my React app (eg.…

darKnight
- 5,651
- 13
- 47
- 87