Legg til React.js Explorer til Chrome med React Developer Tools

Hver webutvikler burde allerede vite om det fantastiske Utviklerverktøy for Chrome. Denne funksjonen er bygget rett inn i Chrome og det lar utviklere inspiser sider og rediger eller fjern elementer rett fra nettleseren.

Det er utrolig kraftig og det er den beste måten å studie side oppførsel for eksempel latens, side ressurser, eller å utføre konsoll kommandoer.

Facebooks lag opprettet React.js bibliotek som abstrakterer et lag for frontend utviklere til Gjenbruk visse UI-elementer.

Og nå med Reag utviklerverktøy du kan inspiser disse elementhierarkiene og rediger dem rett på siden.

Dette er en helt gratis forlengelse og dets utviklet av folkene på Facebook så du vet det er god kvalitet.

Du kan også studere de forskjellige tilstandene og stiene til objekttrær inkludert hvilke elementer som er over og under andre elementer.

I sidefeltet kan du bla gjennom rekvisitter og stater som lar deg studere oppførselen til andre elementer i det samme treet. Dette er faktisk a flott plugin for nyere React-brukere fordi det kan hjelpe dem å forstå mer om biblioteket.

Naturligvis inkluderer dette også Eventuelle lyttere som kan endre tilstanden til en bestemt komponent. Og breadcrumbs på bunnen lar deg enkelt skumme gjennom foreldre / barnelementer.

Dette er langt fra det perfekte React-verktøyet. Men det vil gjøre jobben din mye lettere når du er bygge dynamiske applikasjoner fra bunnen av.

Det er helt åpen med en offisiell GitHub repo vedlikeholdt av Facebook og oppdatert ofte.

Du kan installere denne Chrome-utvidelsen for hvilken som helst versjon av Chrome. Eller hvis du er en Firefox-bruker kan du sjekk ut FF-tillegget som støtter FireFox v38 og høyere. Så langt har jeg ikke sett noen støtte til Safari / Opera-brukere, men det er en åpen kildekodeutvidelse, så dette kan komme i nær fremtid.