Voeg React.js Explorer toe aan Chrome met React Developer Tools

Elke webontwikkelaar zou het verbazingwekkende al moeten weten Chrome-ontwikkelaarstools. Deze functie is ingebouwd in Chrome en het laat ontwikkelaars inspecteer pagina's en bewerk of verwijder elementen rechtstreeks vanuit de browser.

Het is ongelooflijk krachtig en het is de beste manier om dit te doen studeer pagina-gedrag zoals latentie, paginabronnen of om console-opdrachten uit te voeren.

Het team van Facebook heeft het React.js bibliotheek die een laag abstraheert voor ontwikkelaars van de frontend hergebruik bepaalde gebruikersinterface-elementen.

En nu, met Reacteer ontwikkelaarshulpmiddelen jij kan inspecteer deze elementhiërarchieën en bewerk ze direct op de pagina.

Dit is een volledig gratis extensie en zijn ontwikkeld door de mensen op Facebook dus je weet dat het van goede kwaliteit is.

Je kan ook bestudeer de verschillende toestanden en de paden van objectbomen inclusief welke elementen boven & onder andere elementen zijn.

In de zijbalk kan dat bladeren door rekwisieten en staten waarmee je het gedrag van andere elementen in dezelfde boom kunt bestuderen. Dit is eigenlijk een geweldige plug-in voor nieuwere React-gebruikers omdat het hen kan helpen meer over de bibliotheek te begrijpen.

Natuurlijk omvat dit ook Event-luisteraars dat zou de toestand van een bepaald onderdeel kunnen veranderen. En de broodkruim op de bodem laat je eenvoudig door ouder / kind elementen bladeren.

Dit is verre van het perfecte React-hulpmiddel. Maar het zal uw werk een stuk eenvoudiger maken als u dat bent het bouwen van dynamische applicaties vanuit het niets.

Haar volledig open source met een officiële GitHub repo onderhouden door Facebook en regelmatig bijgewerkt.

U kunt deze Chrome-extensie installeren voor elke versie van Chrome. Of als u een Firefox-gebruiker bent, kunt u dit doen bekijk de FF-add-on die FireFox v38 en hoger ondersteunt. Tot nu toe heb ik geen ondersteuning voor Safari / Opera-gebruikers gezien, maar het is een open source-extensie, dus dit kan in de nabije toekomst komen.