React Academy · leksjon

Installere og åpne React DevTools

Sett opp React DevTools i Chrome/Firefox og naviger i Components-panelet.

Leksjon 1 av 413 trinn

Installere og åpne React DevTools er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen installerer du nettleserutvidelsen React DevTools og lærer å navigere i Components-panelet for å inspisere React-appen mens den kjører.

Hva er React DevTools?

React DevTools er en nettleserutvidelse som legger til to nye paneler i Chrome- og Firefox-utviklerverktøyene: **Components** (inspiser treet) og **Profiler** (mål ytelsen). Den fungerer med alle React-apper i utviklingsmodus.

Installere utvidelsen

Gå til Chrome Web Store (eller Firefox Add-ons) og søk etter **React Developer Tools**. Klikk på **Add to Chrome** (eller Firefox). React-ikonet på verktøylinjen lyser på sider som bruker React.

Åpne DevTools

Trykk på **F12** (eller Cmd+Option+I på Mac) for å åpne nettleserens DevTools. Du ser nye faner med navnene **Components** og **Profiler**, ved siden av Elements og Console.

Components-panelet

Fanen Components viser hele React-komponenttreet for den gjeldende siden. Du kan klikke på en komponent for å inspisere props, state, hooks og kildefilen som gjenga den.

Navigere i treet

Bruk søkefeltet øverst i Components-panelet for å filtrere etter komponentnavn. Klikk på en komponent i treet for å se detaljene på høyre side. Bruk pilene til å utvide eller skjule underordnede komponenter.

Inspisere props direkte

Når du klikker på en komponent, vises de gjeldende **props**-verdiene i ruten til høyre. Du kan til og med redigere prop-verdier direkte i DevTools for å forhåndsvise endringer i brukergrensesnittet uten å endre kildekoden.

Inspisere state og hooks

Under props ser du **hooks** som State, Effect, Memo og Ref. Når du utvider State, vises den gjeldende verdien for hvert useState-kall i komponenten.

Krav til utviklingsmodus

React DevTools viser bare komponentnavn når appen kjører i **utviklingsmodus**. I produksjonsbygger fjerner React komponentnavn for å lage mindre pakker, så du bør alltid feilsøke lokalt med npm start eller npm run dev.

Utheve oppdateringer

Aktiver **Highlight updates when components render** i DevTools-innstillingene (tannhjulikonet). Komponenter som gjengis på nytt, blinker med et fargeoverlegg, slik at unødvendige gjengivelser blir synlige med én gang.

Hurtigsjekk

Hvilke to faner legger React DevTools-utvidelsen til i nettleserens utviklerverktøy?

Besvar den i den interaktive leksjonen

Oppsummering

Du har installert React DevTools og utforsket Components-panelet. Nå kan du inspisere komponenttreet, lese props og state i sanntid, redigere verdier direkte og utheve gjengivelser på nytt – uten å endre kildekoden.

Neste

Neste leksjon: **Inspisere komponenttrær og props** – du skal gå i dybden på nestede hierarkier og lære å lese komplekse strukturer for props og state i DevTools-sidepanelet.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Installere og åpne React DevTools» gratis?

Ja – hele teksten i «Installere og åpne React DevTools» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Installere og åpne React DevTools»?

Sett opp React DevTools i Chrome/Firefox og naviger i Components-panelet. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Installere og åpne React DevTools»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy