Can't print $r in console

[zhouhao27]

Got an error message:

VM370:1 Uncaught ReferenceError: $r is not defined(…)

When I input $r in console. But I can see the state and props.

[ngyikp]

On the Console section, just to the left of "Preserve log" checkbox, make sure it is selected to the page you are inspecting, which is most likely top

[zhouhao27]

Still doesn't work even after I selected the page.

[jaredly]

I think it should say top, like this

I just looked at that egghead page, and $r works fine. What version of Chrome are you on?

[zhouhao27]

My version is 50.0.2661.75 (Mac).

[kevinSuttle]

That fixed it @jaredly. Thanks!

[wolfgangbecker]

For those who are still struggling with this issue: The $r object is only accessible once the React devtool tab has been selected.

[cveld]

Suggestion: from the scope of the extension itself, you could write out an instructional message when one tries to retrieve $r. Good that this is issue is present in this repository as a form of documentation / instruction anyways :)

[kevinSuttle]

Great point @cveld. Now that's thinking like Elm. :)

[gaearon]

Closing, as the mistake is related to doing it in the wrong iframe context.

from the scope of the extension itself, you could write out an instructional message when one tries to retrieve $r

Not sure I understand how we could get access to the top-level context. Also doesn't feel right to pollute a different context than the one React app is running in.

[edi]

@gaearon It's not just the iframe context. I have been struggling a few days recently, up until I realised I need to open React tab in Developer Tools first, then and only then, $r will be accessible in the console.

Hope it helps.

EDIT:
Realised some people already noted that in this thread.

[gaearon]

I'm a bit confused—what did you expect $r to be before it’s open? Since it corresponds to currently selected component to DevTools.

[edi]

Well, since I am new to this, and most likely others here asking, are just like me, i supposed $r was some globally instantiated variable, referring to React instance, just like lodash does with it's _.

I think that's what people miss out when trying to access it.

[gaearon]

Oh, that's not what it means. It's more similar to how Chrome DevTools elements view gives you $0.

How did you learn about $r in the first place? I thought the message is only visible with DevTools open. Why did it occur to you that it might contain React, or that it exists?

[edi]

I saw it inside the React tab, on the upper right corner.
What I did not realise ( until now, when I read your post ) is that $r actually reflects the currently selected component, and secondly, I did not realise that $r is instantiated by DevTools. Just thought it's a global instance of the React app. My bad I guess.

Basically, I thought it might contain React just because that message says $r in the console. So that was my first thought. Maybe that message should be altered to reflect the nature of that data.

off-topic: any reason I am seeing all components named e after using webpack ( not using uglifyJS ) ? screen here