React Academy · Lektion

Installation og åbning af React DevTools

Opsæt React DevTools i Chrome/Firefox, og navigér i panelet Components.

Lektion 1 af 413 trin

Installation og åbning af React DevTools er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion installerer du browserudvidelsen React DevTools og lærer at navigere i panelet Komponenter for at inspicere din kørende React-applikation.

Hvad er React DevTools?

React DevTools er en browserudvidelse, der føjer to nye paneler til Chromes/Firefox' udviklerværktøjer: **Komponenter** (inspicer træet) og **Profiler** (mål ydeevnen). Den fungerer med alle React-applikationer i udviklingstilstand.

Installation af udvidelsen

Gå til Chrome Web Store (eller Firefox Add-ons), og søg efter **React Developer Tools**. Klik på **Føj til Chrome** (eller Firefox). React-ikonet på værktøjslinjen lyser på sider, der bruger React.

Åbning af udviklerværktøjerne

Tryk på **F12** (eller Cmd+Option+I på Mac) for at åbne browserens udviklerværktøjer. Du vil se nye faner med navnene **Komponenter** og **Profiler** ved siden af Elementer og Konsol.

Panelet Komponenter

Fanen Komponenter viser hele React-komponenttræet for den aktuelle side. Du kan klikke på en komponent for at inspicere dens props, hooks, tilstand og den kildefil, der gengav den.

Navigation i træet

Brug søgefeltet øverst i panelet Komponenter til at filtrere efter komponentnavn. Klik på en komponent i træet for at se dens detaljer i højre side. Brug pilene til at udvide eller skjule underordnede komponenter.

Inspicering af props i realtid

Når du klikker på en komponent, vises dens aktuelle **props** i højre rude. Du kan endda redigere prop-værdier direkte i udviklerværktøjerne for at forhåndsvise ændringer i brugerfladen uden at ændre kildekoden.

Inspicering af tilstand og hooks

Under props ser du **hooks** som State, Effect, Memo og Ref. Når du udvider State, vises den aktuelle værdi for hvert kald til useState i komponenten.

Krav til udviklingstilstand

React DevTools viser kun komponentnavne, når appen kører i **udviklingstilstand**. I produktionsversioner fjerner React komponentnavne for at gøre pakkerne mindre, så fejlfind altid lokalt med npm start eller npm run dev.

Fremhæv opdateringer

Aktivér **Fremhæv opdateringer, når komponenter gengives** i indstillingerne for udviklerværktøjerne (tandhjulsikonet). Komponenter, der gengives igen, blinker med en farveoverlejring, så unødvendige gengivelser straks bliver synlige.

Hurtigt tjek

Hvilke to faner føjer React DevTools-udvidelsen til browserens udviklerværktøjer?

Besvar den i den interaktive lektion

Opsummering

Du har installeret React DevTools og udforsket panelet Komponenter. Du kan nu inspicere komponenttræet, læse props og tilstand i realtid, redigere værdier direkte og fremhæve gengivelser igen — alt sammen uden at røre din kildekode.

Næste lektion

Næste lektion: **Inspicering af komponenttræer og props** — du går i dybden med indlejrede hierarkier og lærer at læse komplekse former for props og tilstand i sidepanelet i udviklerværktøjerne.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Installation og åbning af React DevTools” gratis?

Ja — hele teksten til “Installation og åbning af React DevTools” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Installation og åbning af React DevTools”?

Opsæt React DevTools i Chrome/Firefox, og navigér i panelet Components. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Installation og åbning af React DevTools”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Installation og åbning af React DevTools
Inspektion af komponenttræer og props
Brug af fanen Profiler
Fejlfinding af almindelige React-fejl

← Tilbage til React Academy