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
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…
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) =>…
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…
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!
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…
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…
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