React DevTools in Shopify Embedded App - Anyone got it working? 🤔

App Bridge
1

Hey guys, has anyone of you managed to make React DevTools work on your embedded app? I tried installing the Chrome extension but couldn’t access it since the app runs in an iframe. Does anyone manage to make it work?

2

Have you tried the script injection method? Based on this issue, looks like this should work, but it’s a super old thread.

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

If you’re looking into renders and scan, I recommend taking a look at Million instead.

1 Like
3

Thanks! I tried it before but it didn’t work I also tried installing the package but no luck
from my console I see some components are re-rendering I just want to know what’s causing it
Does Million show what’s causing re-renders in a React component? @kinngh thank you again for the suggestion

4

Million is, IMO, a more in depth tool that I personally enjoy more + it comes in with suggestions on what needs to be memoized, extracted and more. It’s great in scan mode and I personally like it more than React Dev Tools, but then again it’s all on personal preference^

5

Hello @Simo_Aissaoui
It is not possible with Chrome extension.
Instead, you need to install react-devtools npm package globally.

Here are the steps:

  • Add <script src="http://localhost:8097"></script> as the very first <script> tag in the <head> of embedded app.
  • Run react-devtools from the terminal to launch the standalone DevTools app.