I installed the React Developer tools a while ago and they worked fine. But now the Components and Profiler Tabs no longer show up when I bring up the tools. I've uninstalled them and reinstalled several times and still no luck. When I click on the React Icon it tells me this as it always has:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
But when I open developer tools these tabs are no longer there as they used to be.
Any ideas what's up?
Related
From this tutorial, I see a React tab in dev tools to help debug. But not getting it on my own. I have Chrome extension "React Developer Tools 4.10.1". What am I missing?
Now there is two tabs in React Dev Tools: Components and Profiler.
Components expectedly display the structure of your components. Probably it`s what you are looking for.
Profiler let`s you to take records during debugging of application and see useful diagnostic information.
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other production code is displaying the two tabs in the developer tools as expected. I was wondering if this can be resolved somehow? I triple checked if the tabs are hidden on that occasion, and they are not. As said, this only happens for development version. When I click on the extension, I get the following message:
This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
Based on this information I should have the tabs displayed.
When I go to a production app and click on the React extension, I can see the following displayed:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
And I also see those two tabs without a problem.
Any idea why this would happen? I searched for a solution, but did not encounter one. The only thing I found was someone mentioning you need to set the environment variable REACT_APP_ENV. I tried to set this value in the .env file where I defined REACT_APP_ENV='dev' as well as REACT_APP_ENV='development'. It did not resolve the issue, even with application and browser restart.
This happened to me as well. Looks like a bug in Chromium, but a temp solution is:
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.
Check this out:
https://github.com/facebook/react/issues/19002#issuecomment-637462179
Was having the same issue, the Components and Profiler tabs weren't showing up, so I tried changing the theme as suggested by BobTheBuilder, that didn't work, so tried setting the debug levels to Default + Verbose (in addition to the others) in the console and they finally showed up.
The steps that helped me:
Remove React Developer Tools extension
Install React Developer Tools extension
Open a brand new tab containing react app
Open Dev Tools
React Developer Tools should be available
I had the same issue where Components and Profiler tabs were not showing. What worked for me was to open up the DevTools settings and to click the 'Restore defaults and reload' button (under the 'Sync' heading).
The steps that worked for me
Open chrome extensions
Disable the react dev tools extension
Enable the react dev tools extension
Enable Developer mode
Refresh target page
Where steps 1 and 2 are the little slide control at the bottom right of the extension in the extension manager.
Step 4 is the slider in the top right above all the extensions in the manager.
I want the profiler(option) section in the in developer tools in the React section.
I am unable to get it.
https://www.youtube.com/watch?v=nySib7ipZdk
I have installed the react dev tools extension also.
https://reactjs.org/docs/optimizing-performance.html
I have gone through the above page and also the youtube video
https://www.youtube.com/watch?v=nySib7ipZdk
It doesn't help me.
I tried to debug the react application, after running the application and moving to the React tab on Chrome Developer tools, It shows
"Looking for React"
and freezes there, nothing shows up.
But the application executes successfully and I am able to work on it, What can be the problem?
I had a similar problem, only the React tab in the dev tools did work. My solution was to:
Open the Chrome extensions tab, chrome://extensions/
Disable the React dev tool
Go to page where the React is not working
Close devtools
Reload web page and the chrome extension page (I think this checks for updates, not sure)
Turn on React Developer Tools
Re-open the React tool on the web page and it should be working again.
This Happens when you do a server side rendering, So the React code is not available to the browser, try to render it on the client side.
Ex:
in Webpack, If you are running your application in the dev server mode like
webpack-dev-server
you will see "Looking for React" on the React tab of the Chrome Developer tools
change your url from
localhost://8080/webpack-dev-server/
to
localhost://8080/
your React tab loads, I have shown it for webpack, This is common for all run it on the client side.
I've got fairly large webapp built with React, Redux and React Router. It works fine until I open dev tools in Chrome and it noticeably slows down in 100 times. I've tryed to profile app in Chrome, but when I start profiling again using Chrome it starts working as fast as with dev tools closed and everything is OK.
Checked also Safari and Opera - their dev tools also slow down webapp. Why does React/Chrome affects performance so badly? Does it mean I misuse React or is this common issue for React+Chrome? Is there any workaround?
One thing I noticed today is that React Tools extension can significantly affect the performance of your React app in some cases. Since the purpose of the extension is to provide a realtime view of your React components, it tries to update its representation as your page changes, and on some heavy mutations this adds delays.
In my case I have a table with ~650 rows that can be sorted by clicking on column headers. Without dev tools pane open, all works pretty smoothly (page updates within a second), but once I open dev tools and switch to 'React' tab, the entire tab (both my page and dev tools pane) stays unresponsive to clicks for extra 3-4 seconds after table sort.
Per Igor's comment, I was able to resolve this issue by removing React Dev Tools.
My app generates many blocks of text on a single button click (took upwards of 400+ ms to load the state changes), and removing React Dev Tools brought it back down to practical levels.