de Andrew Bales

Cum să vă vedeți starea React și recuzita în browser

Cum sa va vedeti starea React si recuzita in browser

Dacă creați o aplicație web cu React, vă recomandăm să vedeți starea sau recuzita componentelor în timp real. Iată o soluție rapidă pentru Chrome și FireFox!

Reactează instrumentele pentru dezvoltatori

Instalați extensia React Developer Tools pentru Crom sau FireFox. Vă permite să inspectați ierarhiile componentelor React în cadrul instrumentelor pentru dezvoltatori – în același mod în care ați arunca o privire la elementele DOM, consolă sau rețea.

Inspectarea componentelor React

  1. Deschideți aplicația și inspectați pagina cu instrumente pentru dezvoltatori (Comandă + Opțiune + I).
  2. Selectați React Developer Tools
Cum sa va vedeti starea React si recuzita in browser

3. Alegeți o componentă din copac pentru a vedea starea și recuzita actuală.

Cum sa va vedeti starea React si recuzita in browser

De asemenea, puteți selecta un element React direct din pagină trecând peste acesta cu instrumentul de selecție:

1611235384 958 Cum sa va vedeti starea React si recuzita in browser
Pictograma meniului instrumentului de selecție în instrumentele pentru dezvoltatori

Modificarea statului

Dacă doriți să vă actualizați starea în browser – puteți! Modificați-l făcând clic și editând atributele de stare din fila Reacționează. Acest lucru va reda DOM-ul, trecând starea prin recuzită.

Codificare fericită! ?