Lägg till React.js Explorer till Chrome med React Developer Tools

Varje webbutvecklare borde redan veta om den fantastiska Utvecklarverktyg för Chrome. Den här funktionen är byggt direkt in i Chrome och det låter utvecklare inspektera sidor och redigera eller ta bort element direkt från webbläsaren.

Det är otroligt kraftfullt och det är det bästa sättet att studie sidans beteenden såsom latens, sidresurser eller att utföra konsolkommandon.

Facebook: s lag skapade React.js bibliotek som abstraherar ett lager för frontendutvecklare till återanvänd vissa användargränssnitt.

Och nu med Reakt Utvecklarverktyg du kan inspektera dessa elementhierarkier och redigera dem direkt på sidan.

Det här är en helt gratis förlängning och det är det utvecklad av folket på Facebook så du vet att det är bra kvalitet.

Du kan också studera de olika tillstånden och vägarna för objektträd inklusive vilka element som ligger ovanför och under andra element.

I sidofältet kan du bläddra igenom rekvisita och stater som låter dig studera beteendet hos andra element i samma träd. Detta är faktiskt en bra plugin för nyare React-användare eftersom det kan hjälpa dem att förstå mer om biblioteket.

Naturligtvis inkluderar detta också någon händelse lyssnare som kan ändra tillståndet för en viss komponent. Och den brödsmulor i botten Låt dig enkelt skumma genom föräldra- / barnelement.

Detta är långt från det perfekta React-verktyget. Men det kommer att göra ditt jobb mycket enklare när du är bygga dynamiska applikationer från början.

Dess helt öppen med en officiell GitHub repo underhållen av Facebook & uppdateras ofta.

Du kan installera den här Chrome-tillägget för alla versioner av Chrome. Eller om du är en Firefox-användare kan du kolla in FF-tillägget som stöder FireFox v38 och högre. Hittills har jag inte sett något stöd för Safari / Opera användare, men det är ett open source förlängning så detta kan komma inom en snar framtid.