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

Invoke React Functional Component’s function from Chrome devtools

function App() { const someFn = () => { console.log('hey!') } return
...
} So once the website has loaded and the component has been mounted, is it possible to somehow access the javascript and invoke someFn()?
rehan qasim
  • 53
  • 5
0
votes
0 answers

Received NaN for the `children` attribute javascript for loop

I've seen questions asked on this error, but can't see why I'm having the issue. I set my state for allCats here: const [allCats, setAllCats] = useState([]); const [cats, setCats] = useState([]); useEffect(() => { …
Yehuda
  • 27
  • 15
0
votes
0 answers

Any chance to get hook name that changed instead of "Hook 22 changed" in React developer tools?

I'm beginning React and I'm trying to figure out why some components re-render multiple times. I've been using the profiler with the option Record why each component rendered while profiling. This is helpful but the explanation "Hook 22 changed"...…
gremo
  • 47,186
  • 75
  • 257
  • 421
0
votes
0 answers

Fail to see the state name in react devtools

I have declared some states using useState hook. But when I opened the react devtools, I can't these states's names. What I see is state, state and state...... How to display their names? For example, If I declare a state using const…
Chor
  • 833
  • 1
  • 5
  • 14
0
votes
0 answers

How to set up the Firefox Debugger together with the React Extension?

I downloaded the "Debugger for Firefox" extension for VS Code. And it launches a new Firefox Developer Browser window in "remote control" mode. This mode doesn't load any extensions or carry-over any settings, its like a brand new factory-reset…
John Mc
  • 331
  • 1
  • 3
  • 12
0
votes
1 answer

Is there any solution to the error I get while trying to install react-devtools?

I just started learning React Native. I completed my first beginner app. When i tried to install react-devtools but i got a problem. I dont know how to fix it. PS C:\Users\neveractually\my-app> npm install -g react-devtools npm WARN config global…
neveractually
  • 1
  • 1
0
votes
0 answers

Flame Chart shows long Render time but component has no long rendering children

I am currently using React Profiler to try and diagnose why the load times on my application are so long. When doing this, I saw that my PivotBody component was taking a long time to load: Image of Flame Chart The load time says 1580 ms, which is a…
user19348133
  • 11
  • 2
0
votes
1 answer

When is it required to manually set the displayName for a react component?

Recently I learned (aka read online here is an example article https://medium.com/@stevemao/do-not-use-anonymous-functions-to-construct-react-functional-components-c5408ec8f4c7) that creating React components using arrow functions should not be done…
Moon
  • 85
  • 1
  • 5
0
votes
1 answer

React dev tool doesn't show all components

In my react application, i have three component which are called like this. "APP -> Card -> Avatar". the code seems working. but, when i go to react dev tool tab in browser(components), only App and Card component is available. Avatar component is…
Groot
  • 171
  • 13
0
votes
1 answer

How to inspect React Native element with component name?

I'm looking for how to inspect elements with component names. As you know, when we use react devtools, it only shows us the unfamiliar iOS component name. I googled a lot about this, but I couldn't find about it so far. Can anyone please let me know…
Mingyu Jeon
  • 1,755
  • 5
  • 23
  • 40
0
votes
1 answer

How do I find state of hooks in the state tree with React Dev Tools?

On this React page we have many hooks and many context providers. One of the hooks I care about: const { branchDetails, branchLoadError } = useBranchValidator(); Inside of it there's some state along with a couple of useEffects: const [branchId,…
jcollum
  • 43,623
  • 55
  • 191
  • 321
0
votes
1 answer

electron-devtools-installer not working react

I'm currently starting a new project with electron and react and I don't understand but I'm trying to use React devTools, I've tried some methods and none of them worked. For instance, I followed here the method of electron-devtools-installer, which…
Occalepsus
  • 1
0
votes
2 answers

This page doesn’t appear to be using React. If this seems wrong, follow the troubleshooting instructions on Microsoft Edge

I created the build of a MERN Stack application using the npm run build command, then I ran this built application on my default browser (Microsoft Edge) using the npm start command. I then installed the react devtools extension for Edge from…
gks
  • 191
  • 1
  • 4
  • 18
0
votes
1 answer

Why does React Dev Tools profiler show me two "AppContainers"?

React dev tools profiler has started showing me two "AppContainers", whereas before I did not see one, or have any option to choose one. By selecting either one, I get different profiling data: What do they represent and how can I go back to not…
Mr. Robot
  • 1,334
  • 6
  • 27
  • 79
0
votes
1 answer

Dev Tools call stack with source files

I'm trying to trace function calls from a button click in a react app. I've set some breakpoints in the interesting parts from the network call stack that the button click initiated. As I follow the call stack down looking for the initiating…
Verbal_Kint
  • 1,366
  • 3
  • 19
  • 35
1 2 3
…
14 15