React-devtools: Support inspecting elements inside iframes

Created on 11 Mar 2015 · 21Comments · Source: facebook/react-devtools

If a react component is running within an iframe there is no way to inspect it with the current version of dev tools.

enhancement

Source

byudaniel

👍35

Most helpful comment

Here's how to do it, as long as the two iframes share the same origin (so they can access each other's javascript context).
At the top of your script/page, _before_ react gets loaded, do

if (window.parent !== window) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

You can remove the surrounding if if the script will always be in an iframe

jaredly on 5 Aug 2015

👍16

All 21 comments

:+1:

JayAndCatchFire on 20 Mar 2015

Yes please!

arthurgallo on 17 Apr 2015

yes I have the same problem, any updates ?

sktguha on 29 Apr 2015

👍2

nickbouton on 16 Jul 2015

:+1:

sktguha on 16 Jul 2015

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

ghost on 4 Aug 2015

Since webpack-dev-server runs components in an iframe, this would be really helpful for those of us who use these two things together.

pcostanz on 4 Aug 2015

Any hints on how to proceed with this ?

sktguha on 5 Aug 2015

Here's how to do it, as long as the two iframes share the same origin (so they can access each other's javascript context).
At the top of your script/page, _before_ react gets loaded, do

if (window.parent !== window) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

You can remove the surrounding if if the script will always be in an iframe

jaredly on 5 Aug 2015

👍16

hackhat on 27 Jan 2016

KODerFunk on 1 Mar 2016

I guess the 30 days are long over any new updates @jaredly ?

fkrauthan on 11 Mar 2016

No new updates.

sophiebits on 11 Mar 2016

With https://github.com/facebook/react-devtools/pull/440 landed, iframe could now be debugged using the electron app under https://github.com/facebook/react-devtools/tree/master/shells/electron.

zetachang on 8 Nov 2016

This is now supported.
Please see react-devtools npm package for the documentation.

gaearon on 15 Feb 2017

@gaearon not sure I'd consider this resolved - the standalone package is certainly useful, but it lacks some of the power of the browser extensions (e.g. direct element inspection and syncing with the selected element from the elements tab). Ideally it would just work with iframes, but the next best thing would be if I could simply add something like what @jaredly suggested above (which no longer appears to activate dev tools).

ETA: it seems that method does still work, but not inside a bundle with ES6 static imports - it must happen in a separate script tag before the bundle loads.

benwiley4000 on 28 May 2017

What solved it for me was putting that code inside script tag before the main bundle. If I put it inside the bundle, it did not work.

Hurtak on 28 May 2017

👍4

The important part is that it needs to be put before react-dom executes. However ES6 imports get hoisted so even if you put it before the import, it will still execute later. Putting it outside of the bundle (or right in the HTML) is probably a good way to do it.

gaearon on 29 May 2017

👍1

@jaredly your way works well! Thanks!

qlqllu on 13 Oct 2017

Edit: it works with 2 create-react-apps. This thread has details on how to do it: https://github.com/facebook/react-devtools/issues/57

I think my problem was that I was adding the script to the outer app not the embedded one.

has anybody successfully done this lately for a webpack app?
Example I am trying is 2 instances of create-react-app one embedding another as an iframe. I have added the script to the top of .public/index.html it executes and iframe renders but this makes no difference for React dev tools - it still sees just an iframe el.
So is standalone react-devtools app:

Screen Shot 2019-04-08 at 12 39 53 PM

Any suggestions/debugging tips?

DianaSuvorova on 8 Apr 2019

2019 here, hello!

I'd like to reiterate what @Hurtak mentioned.

What worked for me was adding:

<script>
    if (window.parent !== window) {
      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  }
</script>

right at the end of our <body> tag of our main (iframe'd) .html file. In our case, WebPack injects the "React stuff" right after this script.

It's still not a perfect solution, as nodes aren't highlighted, but it's a much better experience than having no devtools or using the separate react-devtools global npm tool.