Depanarea aplicației. Instalarea extensiei React DevTools

Probabil că ați încercat deja să depanați codul în browserul web. Totul este aplicabil și proiectelor React. Puteți folosi console.log și debugger pentru depanarea aplicației în interiorul metodelor componentelor, inclusiv metoda render(). Acest lucru nu diferă de depanarea codului JavaScript. Dar React are o serie de concepte pentru depanarea cărora sunt necesare instrumente suplimentare. Unul dintre ele este React DevTools.

React DevTools este o extensie populară pentru browser care oferă mai multe posibilități în lucrul cu React. În această lecție, vom instala extensia, iar în următoarea vom învăța cum să o folosim. Instalarea extensiei este destul de simplă, așa că această lecție va fi o pauză pentru dvs.

În prezent, extensia React DevTools este disponibilă pentru browserele Firefox, Yandex.Browser și Chrome.

Instalarea în Chrome

Accesați linkul în browser.

Apăsați pe butonul „Instalați”.

Va apărea o fereastră popup. Apăsați „Adăugați extensia”. După câteva secunde, va apărea o altă fereastră care confirmă că extensia React DevTools a fost instalată cu succes. În colțul din dreapta sus (lângă bara de adrese), veți vedea această pictogramă:

Pictograma devine colorată pe site-urile cu React

Dacă pictograma a apărut, felicitări, treaba este făcută! Treceți la lecția următoare.

Instalarea în Firefox

Accesați linkul în browser.

Apăsați pe butonul „Adăugați în Firefox”.

Va apărea o fereastră popup care solicită permisiunea de a adăuga extensia în browser. Apăsați „Adăugați”.

După câteva secunde, va apărea o altă fereastră care confirmă că extensia a fost instalată cu succes. Apăsați „Ok, înțeles”. După aceea, veți vedea că în colțul din dreapta sus al browserului a apărut această pictogramă:

Pictograma devine colorată pe site-urile cu React

Dacă vedeți această pictogramă, înseamnă că v-ați descurcat!