Support React Dev Tools

Hello,

Adding the following in the mount function allows the React Dev Tools to work inside the iframe:

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

Perhaps it’s useful for more people to have it by default.

[brian-mann]

Instead of saying window.parent !== window you should probably just write… if (window.Cypress) { }

[NoriSte]

@technomage I’ve just checked the @pedroteixeira solution and it works perfectly! I tried it in my own project and in a fresh create-react-app installation, everything works.

For the React DevTools, I’ve added

<script>
  if (window.Cypress) {
    window["__REACT_DEVTOOLS_GLOBAL_HOOK__"] = window.parent["__REACT_DEVTOOLS_GLOBAL_HOOK__"];
  }
</script>

before che </head> of the public/index.html file. For the Redux DevTools I do not need to do anything.

To check that everything works, I shared a simple cypress-react-devtools repository. Clone it and follow the instructions to check it the devtools work.