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).
Questions tagged [react-devtools]
220 questions
1
vote
1 answer
Applying tracing options to a redux-thunk setup
I've recently setup my react native app to use redux-devtools-extension and now am trying to figure out how to apply stack tracing. Currently my store is written as so:
import reduxThunk from 'redux-thunk';
const persistedReducer =…

Carl Edwards
- 13,826
- 11
- 57
- 119
1
vote
1 answer
react-native-map-clustering: Slow UI render / transition on selection change
I'm a little lost with a current issue in my app when rendering a checklist. react-devtools show no performance issues, however there's a visible delay / kind of fading render appearing on the UI when selecting the Google Maps item from the list.…

Jascha
- 21
- 6
1
vote
1 answer
React DevTools show very big background when moving cursor to a react component
Chrome Version 87.0.4280.141 (Official Build) (x86_64)
React Developer Tools
4.10.1 (12/4/2020)
Installed the React Developer Tools extension for the Chrome browser.
open a website which is developed by React tech (e.g.…

Orionpax
- 993
- 5
- 13
- 27
1
vote
1 answer
Performance issue - Only update the component that displays the data
I am running into a performance issue that I don't know how to solve.
I have a component structure like so ( being the parent component):
Data in the post state that is passed through the PostContext (see below)
{
"_id":…

Etanor
- 128
- 8
1
vote
1 answer
How to get the original files using chrome dev tools api
I am using
chrome.devtools.inspectedWindow.getResources(allFiles => {})
It works, but I get the webpack compiled code and not the original React files. In the chrome source panel, it shows the original files using source maps. Can access the…

Abdulaziz Alaboudi
- 61
- 5
1
vote
1 answer
React devtools automatically triggering debugger
I have just changed some code in my react component and saved to check those changes in browser.
But when I am going to browser then debugger is automatically getting triggered wheras I haven't used debugger in my whole codebase.
This is what I am…

Rupesh
- 840
- 1
- 12
- 26
1
vote
0 answers
Updating child component from inside the function body of a parent component
I have a parent component which contains some Filters as a child which looks like:
type TProps = {
filters: Array;
updateFilter: (field: string, selectedElements: Array) => void;
resetFilter: (field: string) =>…

ozko
- 11
- 2
1
vote
1 answer
React DevTools issue in Chrome
I am having an issue in Chrome only with the React DevTools. When I access my website, the React icon lights up and it acknowledges that React is in use, but the Components and Profiler tabs are not there. If I go to another website in Chrome that…

Mike0809
- 41
- 1
- 11
1
vote
0 answers
React DevTools Anonymous displayName
I need a displayName property for a React component. If not, React DevTools shows Anonymous. I attempted a separate line for export and const Titlebar = function(props){...}, no luck. Can DevTools read the function name directly without…

steve76
- 302
- 2
- 9
1
vote
0 answers
How to interpret React profiler flame chart?
As per the React flame chart, the NaiveSameValuesEveryRender > ArrayComponent took almost twice as long to render as the MemoizedValues > ArrayComponent. The reason is because the bar is almost twice as wide.
However, the tooltips say that the…

U Avalos
- 6,538
- 7
- 48
- 81
1
vote
0 answers
Is there any way to get an enumeration of components used on a page in the React dev tools?
I would like to know which of my components are being rendered on a page - e.g. for general documentation purposes. All this info is already present in the React Dev tools "Components" tab.
However, I have tried to copy this info without success. Is…

justin
- 3,357
- 1
- 23
- 28
1
vote
1 answer
Why Chrome React developer Tools is still red after deployed react app to Heroku
I have deployed a react app to Heroku, But after I open the Heroku link, the chrome react developer tool is still red, which means it is still under development? Thank you in advance!

pan
- 33
- 1
- 6
1
vote
1 answer
How can i secure my Component State details from React Dev Tool (on production)?
I noticed that even after building my react project (with npm run build). Any body using React Developer Tools can see all details in my Component state and can temporarily change some details therein. Although the changes can only make a change on…

Onwe Stephen
- 113
- 1
- 10
1
vote
0 answers
React Native "Show Inspector" reloads the app
Toggling inspector ("Debug Menu" -> "Show Inspector", or Cmd+i) reloads the app which navigates to the home page and makes inspecting other views not possible.
After a bit of researching, looks like it's not the expected behaviour, but not much…

Roman Pavlovskyi
- 53
- 5
1
vote
0 answers
Extending (greasemonkey?) a 3rd party, closed-source React application
I am trying to extend a 3rd party, closed-source React application. The portal containing the page with the embedded React application allows me to inject my own JS via a customizable footer. In the past, I have extended server-rendered pages in…

madannes
- 523
- 1
- 8
- 14