React Academy · Lektion

Installera och öppna React DevTools

Konfigurera React DevTools i Chrome/Firefox och navigera i panelen Components.

Lektion 1 av 413 steg

Installera och öppna React DevTools är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen installerar du webbläsartillägget React DevTools och lär dig att navigera i panelen Components för att granska din React-app medan den körs.

Vad är React DevTools?

React DevTools är ett webbläsartillägg som lägger till två nya paneler i Chromes/Firefox utvecklarverktyg: **Components** (granska trädet) och **Profiler** (mäta prestanda). Det fungerar med alla React-appar i utvecklingsläge.

Installera tillägget

Gå till Chrome Web Store (eller Firefox Add-ons) och sök efter **React Developer Tools**. Klicka på **Add to Chrome** (eller motsvarande i Firefox). React-ikonen i verktygsfältet aktiveras på sidor som använder React.

Öppna DevTools

Tryck på **F12** (eller Cmd+Option+I på Mac) för att öppna webbläsarens utvecklarverktyg. Du ser de nya flikarna **Components** och **Profiler** bredvid Elements och Console.

Panelen Components

Fliken Components visar hela React-komponentträdet för den aktuella sidan. Du kan klicka på valfri komponent för att granska dess props, state, hooks och källfilen som renderade den.

Navigera i trädet

Använd sökrutan högst upp i panelen Components för att filtrera efter komponentnamn. Klicka på en komponent i trädet för att se dess information på höger sida. Använd pilarna för att expandera eller fälla ihop underordnade komponenter.

Granska props live

När du klickar på en komponent visas dess aktuella **props** i den högra panelen. Du kan till och med redigera prop-värden direkt i DevTools för att förhandsvisa ändringar i gränssnittet utan att ändra källkoden.

Granska state och hooks

Under props ser du **hooks** som State, Effect, Memo och Ref. När du expanderar State visas det aktuella värdet för varje anrop av useState i komponenten.

Krav på utvecklingsläge

React DevTools visar komponentnamn endast när appen körs i **utvecklingsläge**. I produktionsbyggen tar React bort komponentnamn för att skapa mindre paket, så felsök alltid lokalt med npm start eller npm run dev.

Markera uppdateringar

Aktivera **Highlight updates when components render** i DevTools-inställningarna (kugghjulsikonen). Komponenter som renderas på nytt blinkar med ett färgöverlägg, vilket gör onödiga omrenderingar omedelbart synliga.

Snabbtest

Vilka två flikar lägger React DevTools-tillägget till i webbläsarens utvecklarverktyg?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har installerat React DevTools och utforskat panelen Components. Nu kan du granska komponentträdet, läsa props och state i realtid, redigera värden direkt och markera omrenderingar – utan att röra källkoden.

Nästa steg

Nästa lektion: **Granska komponentträd och props** – du går på djupet i nästlade hierarkier och lär dig att läsa komplexa prop- och state-strukturer i sidopanelen i DevTools.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Installera och öppna React DevTools” gratis?

Ja – hela texten till ”Installera och öppna React DevTools” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Installera och öppna React DevTools”?

Konfigurera React DevTools i Chrome/Firefox och navigera i panelen Components. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Installera och öppna React DevTools”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy