React-devtools: Not showing up when used inside an iframe

[Zinggi]

For developement I'm using webpack dev server with react-hot-loader.

With this setup, the react tab doesn't show up.
I think that's because this way, the application is displayed inside an iframe.

I tried exposing the React to global scope with both:

window.React = React;
window.top.React = React;

But it's not working with react 0.12

Note: It was working with react 0.11

[jaredly]

They changed the way that react exposes itself to the devtools. What you need to do is, before react is loaded in the child iframe, do window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__.

That ought to work.

[Zinggi]

That still doesn't work for me, window.__REACT_DEVTOOLS_GLOBAL_HOOK__ is defined, but it's not helping. window.React is also defined.

The React tab just doesn't want to show up.

I'm also using react-router, maybe this causes some problems in this constellation?

[jaredly]

I have a small working example in this gist.

[Zinggi]

I still can't get it to work.

These are all the relevant versions:

react 0.12.1
react-router 0.11.4
react-hot-loader 0.5.0
webpack 1.4.13
webpack-dev-server 1.6.6

The devtools work perfectly if I build my project, but not with the hot loader setup.
The devtools also work nice on other sites made with React.

With my setup that doesn't work, __REACT_DEVTOOLS_GLOBAL_HOOK__ is correctly exposed, but it's no use. (Using window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ or not makes no difference)
If I print it in the console, I get this:

> __REACT_DEVTOOLS_GLOBAL_HOOK__
< Object {inject: function, getSelectedInstance: null, Overlay: null}

Is there maybe a way to manually inject the devtools?
Or how exactly does this inject process work?

[yonatanmn]

@Zinggi I had the same problem. following @jaredly 's solution, I've added script tag to index.html
<script> __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ </script>
now it is working! (thanks @jaredly !!!)

[Zinggi]

@jaredly, @yonatanmn:
It works! Thanks a lot!

I tried following the gist before, but I tried putting __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ in my script file, before require("react"), but that didn't work.

So yes, the suggested solution works, this does the trick:
in index.html:

  <script> __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ </script>
  <script type="text/javascript" src="main.js"></script>

[yonida]

how can you do this when the iframe has a different origin?
I'm getting the following error: Uncaught SecurityError: Blocked a frame...

[ibash]

For @yonida you can disable security in chrome to get it to work.
But realize, you are literally disabling security, so you don't want to use this for normal browsing, use a dedicated chrome instance for this.

TLDR: Add this alias command to your .bash_profile and use it to startup an insecure instance of chrome (from which you can get the trick above to work):

alias insecure="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=/Users/$USER/Library/Application\\ Support/Google/ChromeInsecure > /dev/null 2>&1 &"

ref: http://stackoverflow.com/a/6083677/418739

[yonida]

Thanks @ibash