Using react dev tools inside iframe [In Chrome]

Viewed 2962

When react app is inside an iframe, dev tool chrome extension for react is not working.

Refererd: https://github.com/facebook/react/issues/18945

Solution suggested by the dev tools team: https://github.com/zalmoxisus/redux-devtools-extension/pull/56.

"Adds the 'all_frames' option to the manifest.json to allow DevTools to access iframes that might hold the Store instead of the main page".

What should I do to enable the dev tools in iframe. should I clone the devtools repo (https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps) and add all_frames option and use it ?

3 Answers

Maybe this is too late. But, I saw this thread in some other SO conversation (which I unfortunately cannot find now)

Essentially they suggest adding this to the body of the iframe'd application.

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

This seems to work for my use-case which seems similar to what the OP mentioned.

Related