11

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 3

9

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.

2
  • Works great. I put this in index.html of the app.
    – Teddy
    Aug 23, 2022 at 6:05
  • 3
    whether this works for you or not will depend on content security policy
    – darryn.ten
    Jan 2 at 3:01
4

Use this guide https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom

  1. Install react-devtools globally or locally
# Yarn
yarn global add react-devtools

# NPM
npm install -g react-devtools
  1. Launch react-devtools by command in terminal: react-devtools

After you'll see this: enter image description here

  1. Put this line to head tag in index.html/index.ejs/whatever you use and run your app

  2. Enjoy

-1

You can use a built-in extension: https://github.com/facebook/react/tree/main/packages/react-devtools

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.