Sådan ser du din React-tilstand og rekvisitter i browseren

Hvis du bygger en webapp med React, kan du se tilstanden eller rekvisitterne til komponenter i realtid. Her er en hurtig løsning til Chrome & FireFox!

Reager udviklerværktøjer

Installer React Developer Tools-udvidelsen til Chrome eller FireFox. Det giver dig mulighed for at inspicere React-komponenthierarkier i udviklerværktøjerne - på samme måde som du kigger på DOM-elementerne, konsollen eller netværket.

Inspektion af reaktionskomponenter

  1. Åbn din app, og inspicér siden med udviklerværktøjer (Command + Option + I).
  2. Vælg React Developer Tools

3. Vælg en komponent i træet for at se dens tilstand og aktuelle rekvisitter.

Du kan også vælge et React-element direkte fra siden ved at svæve over det med markeringsværktøjet:

Ændring af staten

Hvis du vil opdatere din tilstand i browseren - kan du! Rediger det ved at klikke og redigere tilstandsattributter i fanen Reager. Dette gengiver DOM igen og sender staten ned gennem rekvisitterne.

God kodning! ?