I use the react-devtools Chrome extension. When I set state using hooks (useState) to set an object in state, the actual setting of state seems to work fine. In devtools however, that state object shows that the Hooks > State has content ({...}), it also implies that the content is accessible . When I click on the “expand” (down arrow icon) nothing happens; I cannot view the object’s entries. Am I missing something or do devtools not work with hooks?
Tl:dr How do i use react-devtools to view Hooks state?
I see the same thing, though the issue is only with objects. Primitive values in state seem to show up fine.
It was logged as an issue 3 weeks ago: https://github.com/facebook/react-devtools/issues/1282
I'm surprised it hasn't already been addressed, but I suspect it will be addressed soon now that hooks are released.
I have also seen on Twitter that Brian Vaughn has been working on a rewrite of React devtools:
https://twitter.com/brian_d_vaughn/status/1093962235116810240
https://github.com/bvaughn/react-devtools-experimental
but it sounds like it will be a little while yet before that is ready for broad use.
Update with React v16.8
React Hooks are now supported by React DevTools.
Source: https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
Related
Can you See State variables in Production or are they private in the class and not viewable from outside?
According to the answer of this question: Disable chrome react DevTools for production you are able to disable the use of the react dev tools on your production site, however this would not absolutely stop the user from reading the state as they could always find & disable that line of code, or find some other way of accessing the state.
React runs entirely inside the user's browser, and because of this it is not possible to completely prevent the user from accessing the source code, or things like the state.
To view state, you will need to install React's Devtool
Then open your developer tool then switch to the component tab:
Find and click to your component that has a state, then you will see your state also your props on the right side:
You can use react devtools to inspect state and props of a component.
Yes, you can check them via something like React dev tools.
I'm using React 16.8.x and the latest version of the React DevTools. In some cases, I'm able to inspect and modify hooks like useState no problem. But in other cases, the hooks appear to be read only - I can't modify them from the dev tools. Clicking on them, there is no way to make any changes to their values.
Is there any rhyme or reason for why I can edit hooks from the dev tools sometimes but not others?
This is a screenshot of the new React Dev Tools in Google Chrome:
Only the top level component name AdminArea shows. This component is in my script's entry file, index.jsx. There should also be AddNewCoupon and ViewCoupons components. No filters are enabled.
Notice also the state hook naming inside the component only says "State". These are booth useState() hooks.
The useReducer's initial state variable names can be seen, but only because I'm directly exporting and importing that variable into the entry file index.jsx.
Anyone know how to fix these labelling issues?
Actually there's no current solution to this problem I was going to open a Github issue about this but it turned out that Bryan Vaughn opened the issue himself :). Here is the reference to Github issue. Cheers, sigfried.
Update
Now it's possible to show the names within the DevTools, click the magic wand in the top right corner:
And that will become:
I've got a component which consists of an object, which contains an array of objects, which in turn has keys and strings
this.state = {
dinosaurs: [
{ era: "jurassic", name: "diplodocus", diet: "herbivore" },
{ era: "cretaceous", name: "velociraptor", diet: "carnivore" },
]
}
When I open up the component in react devtools, I find I can edit the strings such as "jurassic" or "diplodocus" by double clicking on those strings, but I apparently can't make changes to the keys such as "era", or the array of dinosaurs. However, it could be possible to change it with React DevTools but I'm doing it incorrectly.
I'm using React DevTools within Google DevTools.
What can and can't I change in a component's state using React DevTools?
I tried looking at the GitHub readme, and I can see a mention of editing state in the section side pane, but no mention of what can and can't be edited.
I looked at How to set React component state and props from browser but there was a comment telling the user to read the friendly manual for React DevTools, plus answers that didn't address what is or isn't possible using React DevTools.
It appears that React DevTools locks out functionality based on whether the page you're looking at is using the "development build of React" or the "production build of React".
I'm currently trying to debug something between my local (development) version of an app and the deployed (production) version of the same app. To test something in the deployed (production) version, it would be helpful if I could open React DevTools, click into the component, and edit a prop. Alas, as far as I can tell, there is absolutely no way to edit one of the props in that production build version of the website via React DevTools.
Contrast that with my local (development) version. I can click into any component in React DevTools, then edit any props (or state) I want and the component immediately renders with the new prop value. That appears pretty easy and straightforward: just double-click what you want to edit and type away.
TL;DR: Certain prop/state editing features of React DevTools appear to be locked down depending on the React build version. If you're not sure which version you're looking at, see the link above. If you need to edit props on something that's a deployed, production build of React, you (probably*) can't. Aggravating, but I feel your pain.
[*Probably because A) I might be wrong (that would be great, someone please comment how to do it), it's not very clear in the first place about when it's editable vs not editable; B) If you could somehow trick the React DevTools into treating the page like it's a development build, it might be possible (or it might break hideously), but checking that requires more effort than I can spare.]
Some editorializing:
I would love for the above to not be true, and it's especially aggravating because I don't see a reason why it's necessary. Perhaps I don't understand enough about the difference between the dev and prod versions, but you can still view props/state on a production version using the React DevTools: it doesn't seem like a big leap to be able to also edit it considering that the functionality is all there when it's a development version. But once again, maybe I don't see the reasons behind this.
I'm trying to set enableSelectAll to true for a Material-UI TableHeader. This component is stateless (or at least there is no state displayed in the React Chrome (50) Developer Tool). If I try to edit one of the props, pressing enter does nothing. Perhaps this is by design as I believe props aren't meant to be modified. But I'd like to enable/disable that property nonetheless. Is there a way to do this from within the developer tools?
If you just set property, it would be overwritten on the next tree update, so it's a bad idea.
I recommend moving such properties into the state and set it with this.setState().