React Developer Tools is een extensie voor Chrome en Firefox die u toestaat om React-componenten te inspecteren in de broncode van de browser. Hier zijn de stappen om het te gebruiken:
1. Installeer de extensie: U kunt de extensie installeren vanuit de Chrome Web Store of Firefox Add-ons. Na installatie verschijnt het React icoon in uw werkbalk. Het is normaal grijs, maar als u zich op een pagina bevindt die React gebruikt, wordt het icoon blauw.
1. Open de dev tools: Navigeer naar de pagina met uw React-app en open de dev tools van de browser (meestal kunt u dit doen door met de rechtermuisknop op de pagina te klikken en ‘Inpecteren’ te selecteren). U zou een nieuw tabblad genaamd ‘React’ moeten zien naast de gebruikelijke tabbladen zoals ‘Elementen’ en ‘Consoles’.
1. Inspecteer componenten: Klik op het ‘React’ tabblad. U ziet een boomstructuur van uw React-componenten, vergelijkbaar met hoe de HTML-elementen worden getoond op het ‘Elementen’ tabblad. U kunt elk component selecteren en de huidige props, state en context bekijken in de zijbalk.
1. Componenten debuggen: U kunt de geselecteerde component in de Console loggen door te klikken op het icoon onderaan de zijbalk. U kunt dan met het component interactief werken in de Console.
1. Profiler gebruiken: React Dev Tools heeft ook een ‘Profiler’ tabblad waarmee u prestatieproblemen kunt diagnosticeren. U kan een opname starten, dan interactie hebben met uw applicatie en tenslotte de opname stoppen. De Profiler toont u dan waar tijd wordt uitgegeven bij het renderen.
Opmerking: Werkt de extensie niet? Zorg er dan voor dat u niet in incognitomodus bent in Chrome aangezien de extensie standaard is uitgeschakeld in deze modus. U kunt deze instelling wijzigen in de extensie-opties.
