Questions tagged [react-devtools]

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).

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…
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…
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…
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?
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