Zo debug je je React Shopify app

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 worden. 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.

Hulp bij Shopify apps debuggen

We gebruiken cookies om je de best mogelijke ervaring op onze website te geven. Door verder te browsen op deze site, stem je in met het gebruik van cookies. Voor meer informatie, lees onze Cookie Policy (Engels).