I'm working through a React video from 2019 and their React Developer Tools extension (in Safari) looks like this:
However, my React Developer Tools in both Firefox and Chrome extensions look like this:
One can see here that the presenter in the video is getting much more information about the React component than I am getting:
Is there a way to see the elements as in the old version of the extension? Or does one have to use React Developer Tools in a different way now?
Inline props in tree have been removed for better performances, however, you can still get an element's details by selecting it:
Also, for a more detailed DOM tree view, it can be displayed by clicking on the eye icon on the top-right which says "Inspect the matching DOM element".
Another thing I noticed is that selecting a component automatically make the $r variable refers to it.
Related
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 am trying to scrape a React based website with selenium and python, and i came to a point where, although i can retrieve all that is being 'seen' by Google DevTools Inspector, i am not being able to find the link to the next page i needed to scrape. I could, i guess, do this, in a way where i could click every single button to the next page, although, i was kind of curious to know why selenium has a problem is seeing this particular key and how to workaround this, since i have to build a database and any 'extra' request will add add up exponentially.
Google DevTools Inspect View
As you can see, there is no 'key' or href class anywhere on the tab, but if i look in React DevTools, it is there:
React DevTools Inspect View
So my question is: is there any way i can retrieve those 'keys'?
Are there any better tools to do this job?
Thank you in advance!
Is it possible to right click on a component visible under React Dev tools and click "show in IDE" which opens the file in the VSCode. This would beneficial as I'd not have to go searching for the component. Often I want to view source code of a component in VS code, and code base being too big with names that overlap and component structure that doesn't mimic the pages structure due to modular reuse of components, it's quite difficult to find the exact component if you are new to the codebase. If there was a way to simply use the component picker tool from React dev tools, then click on the highlighted component to go to the file in IDE.
Waiting for the react devtools team to land this feature.
https://github.com/facebook/react/pull/22649
You can use React Inspector, it directly opens your code in VsCode from browser.
Link -> https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh/related
Below is the screenshot of my attempt to profile some React app.
As you can see, InspectionPage component is selected, but there is no information about children components displayed in the Bottom-Up tab, like, for example, we can see here - https://twitter.com/dan_abramov/status/994577100077191168.
What's weird - it's not always the case. Sometimes it's available and sometimes not given seemingly exact same conditions.
After struggling with this myself, my answer here is the only definite workaround I've been able to find.
It appears to be an issue with the current stable release of Chrome. Using a newer version of Chrome, such as Chrome Dev or Canary, will allow you to use the breakdown until the update makes its way into a stable release of Chrome.
Sources:
React Github
Associated Chromium Forum Post
I keep receiving this warning when trying to click anywhere on my graph with Chrome's mobile helper turned on. Couldn't find much on Plotly's documentation for their hover events, and the I couldn't get much from the stack trace either. Any suggestions? I'm trying to be able to click on a certain data point and view its data just like you can when hovering on desktop (screenshots attached).
This looks like a bug in Plotly, the latest version that worked for me was 1.28.0. You can retrieve a specific version from the CDN:
<script src="https://cdn.plot.ly/plotly-1.28.0.min.js"></script>