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

What does the hook numbers in the Reactjs Dev tool correspond to?

I have a react.js app that I want to profile for performance issues. I'm using the react dev tool profiler in firefox. I profile a specific interaction and get the flamegraph and the ranked time graph in the dev tool. Then this message shows up in…
cervyvin
  • 1,533
  • 2
  • 9
  • 9
111
votes
10 answers

Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?

When I console.log(), the Chrome console gives the log but instead of showing the file and line number it just says react_devtools_backend.js:4049. How do I get the console to show the file and line number when I console.log()?
Abby Zhang
  • 1,113
  • 2
  • 5
  • 5
60
votes
9 answers

React tab doesn't appear in chrome developer tools

I have installed React Developer Tools Chrome browser extension. But i cannot see the React tab in developer tools instead there are new tabs named "Components" & "Profiler". I re-installed the extension, restarted the browser and computer, checked…
thilakshiK
  • 735
  • 2
  • 6
  • 11
41
votes
5 answers

react-devtools : Timeout unable to inspect element

When trying to inspect any modal or overlay elements, I am facing an issue with react-devtools. It shows timeout while inspecting element.
user2940383
  • 433
  • 1
  • 6
  • 10
35
votes
3 answers

React Dev Tools: "parse hook names" action throws a "Hook parsing failed" error

When I inspect my code using the react dev tools, I'm noticing some hooks trigger this error and cause the "parse hook names" action to error out. When I inspect the react dev tools, it outputs: main.js:4878 Error: Could not find runtime location…
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
21
votes
1 answer

In react-devtools, what do the various highlighting colors of the "highlightUpdates" option mean

I've been using the react-devtools to detect any unnecessary component updates, however I'm not sure I fully understand how it works. I can identify the various components that got updated by the added borders indicating that they got updated but…
Adonis K. Kakoulidis
  • 4,951
  • 6
  • 34
  • 43
17
votes
1 answer

Hooks support in react dev tools?

I read in the React Docs that: React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new lint rule called eslint-plugin-react-hooks…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
16
votes
1 answer

Why react dev tools Profiler dont show me component props?

I start to learn optimization of React. And see some learning resources, and on them, I can see component props in the Profiler. But in my Profiler, I don't see any props. Why? And how can I see a current render component props in Profiler? A make…
Konstantin Pershin
  • 233
  • 4
  • 17
16
votes
4 answers

React dev tools blank component

Hello does anybody knows what's wrong with my react dev tools? the components tab is blank
Hilman
  • 175
  • 1
  • 6
13
votes
1 answer

React DevTools show components as "Loading..."

I need to debug some props that are being used in my React application. However, if I try to inspect certain components, they appear as "Loading..." instead of the normal props list: However, I know that these components have already rendered as I…
Migwell
  • 18,631
  • 21
  • 91
  • 160
13
votes
4 answers

How to get content of Redux store in console without devtools?

With React Devtools installed, I can get store by: $r.store.getState() And how to do it without React Devtools?
ku8ar
  • 217
  • 1
  • 2
  • 9
12
votes
2 answers

React Developer Tools shows all components as "Anonymous"

I've installed the React Developer Tools extension on Google Chrome to debug a React application written in TypeScript, but once I start debugging the application and open the "Components" window, all components are shown as "Anonymous". Granted,…
RAM
  • 2,257
  • 2
  • 19
  • 41
11
votes
1 answer

Confusion about Lighthouse report of unused JS for react devtools chrome extension

When I run Lighthouse for the project I am working on, I get chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js as no1 causer of unused JS. How is that making sense from a performance optimization perspective? I…
Flip
  • 6,233
  • 7
  • 46
  • 75
11
votes
3 answers

Flipper: Flipper Hermes debugger does not show

Flipper Hermes debugger does not show I would like to ask how to make him display normally？ react-native：0.62.2 (Update from 0.61 to 0.62.2) https://fbflipper.com/ https://reactnative.dev/docs/hermes error message: Metro is connected but no Hermes…
ebyte
  • 1,469
  • 2
  • 17
  • 32
11
votes
1 answer

Component name with React hooks in DevTools

I've just updated a from a class based to a functional component. When I look in React's DevTools, I'd usually see my component named Gallery with all the named state variables. Now though, All I see is a component named _default with a bunch of…
Eli Nathan
  • 1,020
  • 2
  • 13
  • 35
1
2 3
…
14 15