Tilføj React.js Explorer til Chrome med React Developer Tools

Hver webudvikler bør allerede vide om den fantastiske Chrome Developer Tools. Denne funktion er bygget lige ind i Chrome og det lader udviklere inspicere sider og rediger eller fjern elementer lige inde fra browseren.

Det er utroligt kraftfuldt, og det er den bedste måde at studie side adfærd såsom latens, side ressourcer, eller at udføre konsol kommandoer.

Facebooks team oprettet React.js bibliotek, der abstrakt et lag til frontend-udviklere til genbruge visse brugergrænseelementer.

Og nu med Reag Developer Tools du kan inspicere disse elementhierarkier og rediger dem lige på siden.

Dette er en helt gratis forlængelse ogdet er udviklet af folket på Facebook så du ved det er god kvalitet.

Du kan også studere de forskellige tilstande og stierne i objekt træer herunder hvilke elementer der er over og under andre elementer.

I sidebjælken kan du gennemse rekvisitter og stater som lader dig studere adfærd af andre elementer i samme træ. Dette er faktisk a store plugin til nyere React brugere fordi det kan hjælpe dem med at forstå mere om biblioteket.

Dette omfatter naturligvis også eventuel lyttere det kan ændre tilstanden af ​​en bestemt komponent. Og brødkrummer i bunden lad dig let skimme gennem forældre / barnelementer.

Dette er langt fra det perfekte React-værktøj. Men det vil gøre dit arbejde meget lettere, når du er bygge dynamiske applikationer fra bunden.

Det er helt åben med en officiel GitHub repo vedligeholdes af Facebook og opdateres ofte.

Du kan installere denne Chrome-udvidelse for enhver version af Chrome. Eller hvis du er en Firefox-bruger, kan du tjek FF-tilføjelsen der understøtter FireFox v38 og højere. Hidtil har jeg ikke set nogen støtte til Safari / Opera brugere, men det er en open source-udvidelse, så det kan komme i den nærmeste fremtid.