Narzędzia deweloperskie dla Reacta

Użyj narzędzi deweloperskich dla Reacta, aby zbadać komponenty reactowe, zmienić ich właściwości (ang. props) oraz stan (ang. state), a także zidentyfikować problemy wydajnościowe w aplikacji.

W tej sekcji dowiesz się

Jak zainstalować narzędzia deweloperskie dla Reacta

Rozszerzenie dla przeglądarki

Najprostszym sposobem na debugowanie stron internetowych stworzonych w Reakcie jest zainstalowanie rozszerzenia dla przeglądarki o nazwie React Developer Tools (pol. narzędzia deweloperskie dla Reacta). Jest ono dostępne dla kilku popularnych przeglądarek:

Teraz, gdy wejdziesz na stronę zbudowaną w Reakcie, zobaczysz dodatkowe zakładki o nazwie Components oraz Profiler.

Narzędzia deweloperskie dla Reacta w przeglądarce

Safari i inne przeglądarki

Jeśli używasz innej przeglądarki (na przykład Safari), zainstaluj pakiet npm-owy o nazwie react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Następnie otwórz narzędzia deweloperskie w terminalu:

react-devtools

Później podłącz się do swojej strony internetowej dodając poniższy tag <script> na początku sekcji <head>:

<html>
  <head>
    <script src="http://localhost:8097"></script>
  </head>
</html>

Na koniec odśwież stronę w przeglądarce, aby podejrzeć ją w narzędziach deweloperskich.

Narzędzia deweloperskie dla Reacta - wersja samodzielna

Aplikacje mobilne (React Native)

Narzędzi deweloperskich dla Reacta można z powodzeniem używać również do podglądania aplikacji napisanych w React Native.

Najprościej jest zainstalować je globalnie:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Teraz uruchom narzędzia deweloperskie z terminala.

react-devtools

Powinno nastąpić połączenie do lokalnie działającej aplikacji.

Jeśli połączenie nie nastąpi w ciągu następnych kilku sekund, spróbuj załadować aplikację ponownie.

Dowiedz się więcej o debuggowaniu w React Native.

WsteczUżywanie TypeScriptu