Wanneer je een Shopify app maakt, is de kans groot dat je React gebruikt.
Tenminste, voor het gedeelte van de app dat in de admin omgeving geladen wordt. Shopify stelt namelijk hun native admin componenten beschikbaar via de library Polaris.
Een handige tool voor het debuggen van React-apps is de React Developer Tools Chrome extension.
Als je de tab Components bekijkt in de devtools sectie van Chrome, zie je echter alleen de componenten van de Shopify admin en niet van jouw app!
Dit komt doordat jouw app in een iframe geladen wordt en de React extension niet out of the box React-code in iframes behandelt.
De oplossing hiervoor is om de standalone versie van React Developer Tools te gebruiken.
Als je de installatieinstructies volgt, zorg je ervoor dat profiling code van de tool in de development versie van jouw Shopify app geladen wordt. De tool start zelf een Electron window die lijkt op de Components-sectie uit de Chrome extension.
Nu kun je je embedded Shopify app debuggen.