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
11
votes
1 answer

React crashes when trying to import from symlink

I am using react build and trying to import some files from a folder outside of the create-react-app directory. It doesn't allow me to do that so I try to make a symlink of the folder inside of the directory. Then I got errors from…
Natalia
  • 153
  • 1
  • 8
11
votes
4 answers

React native Cannot connect to react-devtools using android simulator

I execute the project with react-native run-android and in another terminal, i do: npm run react-devtools and it opens the new window of electron that says: The react native app it will open in a few seconds... but nothing happens. I put in the…
Franco Coronel
  • 710
  • 1
  • 12
  • 25
10
votes
2 answers

How to open component file in VS code from Chrome React Dev Tools?

Is it possible to right click on a component visible under React Dev tools and click "show in IDE" which opens the file in the VSCode. This would beneficial as I'd not have to go searching for the component. Often I want to view source code of a…
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168
10
votes
2 answers

React devtools "highlight updates" in V4

Did they remove the ability to highlight updates in React Dev Tools V4? I can't seem to find it anywhere. I do miss it so. You know, this thing?
Galupuf
  • 2,827
  • 1
  • 12
  • 29
9
votes
3 answers

Using react dev tools inside iframe [In Chrome]

When react app is inside an iframe, dev tool chrome extension for react is not working. Refererd: https://github.com/facebook/react/issues/18945 Solution suggested by the dev tools…
9
votes
1 answer

Unable to see key value in React or Chrome devtools

Consider the following JSX with an intentionally added duplicate key: <--- same key here …
stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270
9
votes
1 answer

How can I search for a component with specific key in React Developer Tools?

I'm currently using the React Developer Tools chrome extension to debug a component based on React Virtualized. As you can see in the screenshot, I was able to highlight all the cells, but I can't figure out how can I find only a Cell that has a…
ValentinVoilean
  • 1,365
  • 1
  • 13
  • 22
8
votes
1 answer

How to detect rerenders in React JS correctly?

Let's say we have a parent component and multiple functional child components. I want to clearly know if the parent re-renders does the child re-renders or not. After going through a few articles I came to know there are 3 ways we can detect…
Deepak Kumar Padhy
  • 4,128
  • 6
  • 43
  • 79
8
votes
1 answer

React Dev Tools does not show Component Names or State Variable Names

This is a screenshot of the new React Dev Tools in Google Chrome: Only the top level component name AdminArea shows. This component is in my script's entry file, index.jsx. There should also be AddNewCoupon and ViewCoupons components. No filters…
Sean D
  • 3,810
  • 11
  • 45
  • 90
7
votes
0 answers

Search for components in React Devtools profiler?

Is there any search functionality in the React Devtools Profiler (FlameGraph or Ranked view) that I missed? I want to see how much time my new component MyGreatComponent took for rendering, but it's "hidden" between all the other components and not…
stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270
7
votes
1 answer

What changes to a component state can I make using React devtools?

I've got a component which consists of an object, which contains an array of objects, which in turn has keys and strings this.state = { dinosaurs: [ { era: "jurassic", name: "diplodocus", diet: "herbivore" }, { era: "cretaceous", name:…
Andrew Grimm
  • 78,473
  • 57
  • 200
  • 338
7
votes
2 answers

View network traffic using react native debugger

I'm developing a React Native app using create-react-native-app (so, Expo), testing on a real device using my network IP address (192.xxx.xxx.xxx). I've managed to get react-native-debugger up and running and debugging remotely. It opens…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
6
votes
0 answers

Parse Hook Names in React Dev Tools is not Working

State definitions: I really need to which state is causing a bug in my code, but the magic wand tool doesnt seem to be working. Please help.
Vedant Shah
  • 557
  • 1
  • 4
  • 15
6
votes
1 answer

React devtool does not show reason why component rerendered

The react developer tool used to show why a component was rendered, e.g. due to state change, context update or because of a rerender of the parent. This information can not be found in the flamegraph anymore. Did they remove it or are there some…
Kilian
  • 1,540
  • 16
  • 28
6
votes
1 answer

react-devtools for react-native

Recently I started developing in react-native. When trying to debug using the react-devtools extension on the browser (Chrome) I only get access to the console, because all the components and elements are the ones displayed in the devtools web-page…
Yariv Shamash
  • 91
  • 1
  • 8
1
2
3
14 15
row1_col1
row2_col1