How to use React Devtools for Atlassian Connect apps?

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?

Thanks!

Hi @Grzegorz.Tanczyk,

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.

Regards,
Dugald

1 Like

This tool turned out to be the solution for me: https://www.npmjs.com/package/react-devtools

4 Likes