I’m not able to use React Devtools for my connect app, which is using React, and Atlaskit on the frontend.
There is one officially supported solution for apps initiated in iframe:
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
Unfortunately this won’t work for Connect apps, because it’s loaded in a cross domain iframe. There is a workaround for this problem: do development in browser with security disabled, but it sounds like a last resort.
Is there any other way to use React Devtools during AC app development?
If the React Devtools requires the global variable
__REACT_DEVTOOLS_GLOBAL_HOOK__ to be set up as you describe, then it seems you have to disable security. However, maybe you could only disble the security for a browser that you only use for development and not any other browsing tasks.
The only other solution that comes to mind involves writing a simple browser extension to copy the global from the parent frame to the app iframe.
This tool turned out to be the solution for me: https://www.npmjs.com/package/react-devtools