Stack Overflow
Stack Overflow

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
3
votes
0 answers

How do I conditionally import react-devtools?

I want to conditionally import react-devtools based on an environment variable but eslint says that I can't import in the body of the module when I try to import react-dom react-devtools requires that I import it before react-dom so what do I…
feverdreme
  • 467
  • 4
  • 12
3
votes
0 answers

$r in React Devtools

I was looking for how to get an instance in the console of the component being inspected in React Devtools. I stumbled on this blog post from 2015, and happened to see that in the upper right hand corner it says $r in the console. I tried it and it…
pixelearth
  • 13,674
  • 10
  • 62
  • 110
3
votes
1 answer

React Dev Tool showing components as single letters

Wondering if it is normal for React Dev Tool on Chrome to components as many single letters on inspection? I am trying to inspect some websites to better understand how good companies structure and write their React code, but all I ever see is…
IndustryDesigns
  • 1,938
  • 2
  • 12
  • 22
3
votes
2 answers

How to preserve extensions in Firefox with VSCode and request Launch

I'm attempting to debug a React app with React Dev Tools and Firefox Developer Edition. I can't install React Dev Tools to the profile Firefox is using when it is launched via VSCode. I have React Dev Tools installed when I launch Firefox myself via…
Diesel
  • 5,099
  • 7
  • 43
  • 81
3
votes
0 answers

Empty interactions set and no props/state drilldown in React Profiler

I'm using the npm packages for React: "react": "^16.8.4", "react-dom": "^16.8.4" and React Dev tools version 4.2.0 I want to use React profiler to analyze the performance of my app however I don't see the actual content of the props nor state…
hitchhiker
  • 1,099
  • 5
  • 19
  • 44
3
votes
0 answers

React DevTools Hooks not editable

I'm using React 16.8.x and the latest version of the React DevTools. In some cases, I'm able to inspect and modify hooks like useState no problem. But in other cases, the hooks appear to be read only - I can't modify them from the dev tools.…
austinbruch
  • 323
  • 2
  • 14
3
votes
0 answers

React Dev Tools not updating state

I am having a problem with React Dev Tools that has just started happening in the last week. Before that it was working fine. The issue is that the state is not reacting to changes as they occur though they are updating in the "background" (e.g.…
dougfair
  • 348
  • 1
  • 3
  • 12
3
votes
2 answers

Error: Cannot find module 'webpack/lib/removeAndDo' at Function.Module._resolveFilename (module.js:470:15)

When ever I try to perform npm install to build my react part in project. it throws the error below: *module.js:472 throw err; ^ Error: Cannot find module 'webpack/lib/removeAndDo' at Function.Module._resolveFilename (module.js:470:15) …
Rschary
  • 161
  • 1
  • 2
  • 6
3
votes
0 answers

Why are two providers showing up in React Dev Tools

In React Dev Tools, I'm seeing two providers: As far as I know, I'm not doing anything weird when setting up the code: ReactDom.render( …
aryzing
  • 4,982
  • 7
  • 39
  • 42
3
votes
0 answers

How to view a hierarchy of all components in react dev tools?

Asking this because it is gets a bit hard to inspect them manually one by one in react dev tools (e.g. openning up the App component and travers all the way down manually is a bit cumbersome when viewing sample codes). It would be helpful if I could…
Nesa Mouzehkesh
  • 3,755
  • 2
  • 14
  • 11
3
votes
0 answers

How can I get React Developer Tool to Work with Genymotion

The instructions can be found here, or React Native's official site. And I was expecting to get something like this as shown on the official site: Whereas the reality is: I run the command to install the devtool locally into my project: npm install…
VincentZHANG
  • 757
  • 1
  • 13
  • 31
2
votes
1 answer

Start profiling button is not starting recording in Flipper React DevTools (4.24.3) for React Native?

I'm trying to create a Flame Graph for my app. I can't seem to start the Performance Recording though, as on clicking start profiling button recording is not starting: https://i.stack.imgur.com/kzJpe.jpg To Reproduce Open app Open Flipper Connect…
Rajat Bothra
  • 21
  • 3
2
votes
1 answer

How can I identify what is causing UI lag caused slow "layout effects" in React Dev Tools Profiler?

While working in React, I'm noticing a specific UI action causes the app to freeze entirely, so I decided to profile it using the React Dev Tools Profiler. Interestingly, there is a specific render that has massive 2145 millisecond duration for…
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
2
votes
1 answer

Incompatible version of react-devtools-core in react-native-debugger@0.13.0

I upgraded react-native-debugger from 0.11.6 to 0.13.0, and when I try to run my app, the debugger logs the error Unsupported Bridge operation "0" An incompatible version of react-devtools-core has been embedded in a renderer like React Native. To…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
2
votes
2 answers

React Native | Flipper | React DevTools not working

I am using Flipper to check the performance issue for a React Native project. Whenever I am selecting the React DevTools option, I am getting error on the iOS simulator. Attached screenshot for reference. I want to check the load time for…
Sujit
  • 610
  • 7
  • 26
1 2 3
…
14 15