How do you inspect a react element's props & state in the console?

Question

React Developer Tools give a lot of power to inspect the React component tree, and look at props, event handlers, etc. However, what I'd really like to do is to be able to inspect those data structures in the browser console.

In chrome I can play with the currently selected DOM element in the console using $0. Is there a way to extract React component info from $0, or is it possible to do something similar with the React Dev Tools?

Haven't tried this myself yet, but in React 0.13 they introduced [React. findDOMNode](http://facebook.github.io/react/docs/working-with-the-browser.html#refs-and-finddomnode). Theoretically, it might be possible to to select your DOM element, convert it to a React Element via `React.findDOMNode($0)` and access your state and props via that ReactElement? — trekforever, Mar 19 '15 at 23:55
Possible duplicate of [React - getting a component from a DOM element for debugging](http://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging) — Turadg, Apr 24 '16 at 14:47
Considering this question was asked first, wouldn't the new question be the duplicate? — Gil Birman, Apr 25 '16 at 19:46
In case anyone is wondering the logical thing to do with a more recent similar question is to determine if it has a correct general-case answer, and mark the one without or with less responses/votes as the duplicate — Peter Kionga-Kamau, Mar 03 '22 at 04:19

Jürgen Brandstetter · Accepted Answer · 2018-07-25T16:14:11.447

109

Using React Developer Tools you can use $r to get a reference to the selected React Component.

The following screenshot shows you that I use React Developer Tools to select a component (Explorer) which has a state-object callednodeList. In the console I can now simply write $r.state.nodeList to reference this object in the state. Same works with the props (eg.: $r.props.path)

edited Jul 25 '18 at 16:14

answered Jul 25 '18 at 10:07

Jürgen Brandstetter

7,066
3
35
30

Looks like $r i just the DOM node, not the react component instance. – Gil Birman Jul 25 '18 at 16:01
1

Not sure what you mean. But the question was "how to inspect the data-structure of react components". And I think the `$r` allows you to do exactly that. – Jürgen Brandstetter Jul 25 '18 at 16:16

score 20 · Answer 2 · edited May 23 '17 at 12:17

An answer to your question can be found here in a similar question I asked: React - getting a component from a DOM element for debugging

I'm providing an answer here because I don't have the necessary reputation points in order to mark as duplicate or to comment above.

Basically, this is possible if you are using the development build of react because you can leverage the TestUtils to accomplish your goal.

You need to do only two things:

Statically store the root level component you got from React.render().
Create a global debug helper function that you can use in the console with $0 that accesses your static component.

So the code in the console might look something like:

> getComponent($0).props

The implementation of getComponent can use React.addons.TestUtils.findAllInRenderedTree to search for match by calling getDOMNode on all the found components and matching against the passed in element.

score 9 · Answer 3 · answered Sep 10 '18 at 12:30

9

Open console (Firefox,Chrome) and locate any reactjs rendered DOM element or alternatively execute js script to locate it:

document.getElementById('ROOT')

Then check for element properties in object property viewer for attributes with name beginning like '__reactInternalInstace$....' expand _DebugOwner and see stateNode.

The found stateNode will contain (if it has) 'state' and 'props' attributes which is used heavily in reactjs app.

answered Sep 10 '18 at 12:30

harvyS

628
7
9

this shows null for me, does this still work? – Joseph Astrahan Jun 23 '22 at 07:23
1

in case you've got null on getElementById('ROOT') check name of react root node in your app – harvyS Jul 19 '22 at 08:12

score 8 · Answer 4 · answered Oct 23 '20 at 20:12

Though the accepted answer works, and is a great method, in 2020 you can now do a lot of inspection without using the $r method. The Components tab of React DevTools will show you props and detailed state when you select the relevant component (make sure you're on the right level), as well as let you do other things like suspend it or inspect the matching DOM element (little icons in the top right).

score 2 · Answer 5 · answered May 14 '17 at 14:48

2

Assign the state or prop object to the window object:

window.title = this.state.title

And then from the dev tools console you can try different methods on the exposed object such as:

window.title.length

8

answered May 14 '17 at 14:48

Fellow Stranger

32,129
35
168
232

Yes, purelly for debugging, something like: window.reacjs = React; window.reacjsStore = store; – harvyS Sep 10 '18 at 12:31

score 1 · Answer 6 · edited Jun 21 '23 at 06:43

You can attach a reference to the window object like

import { useSelector } from "react-redux";
function App() {

    // Development only
    window.store = useSelector((state) => state);

    return (
        <div className="App">
        </div>
    );
}

export default App;

Then access it from the console

store
{states: {…}}
states:
someProperty: false
[[Prototype]]: Object
[[Prototype]]: Object

How do you inspect a react element's props & state in the console?

6 Answers6

Linked