React Developer Tools

React Developer Tools (vývojářské nástroje pro React) slouží k prozkoumávání React komponent, k úpravám vlastností a stavů, a k detekování možných problémů s výkonem aplikace.

You will learn

  • Jak si nainstalovat React Developer Tools

Rozšíření prohlížeče

Nejjednodušší způsob, jak ladit webové stránky vytvořené pomocí Reactu, je nainstalovat si React Developer Tools jako rozšíření do prohlížeče. Tyto nástroje jsou k dispozici pro následující prohlížeče:

Nyní, když po instalaci navštívíte jakoukoliv webovou stránku vytvořenou v Reactu, uvidíte panely s názvy Components a Profiler.

React Developer Tools extension

Safari a jiné prohlížeče

Pro další prohlížeče (jako například Safari) si nainstalujte npm balíček react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Poté otevřte tyto nástroje pomocí terminálu:

react-devtools

A dále je napojte do vaší stránky přídáním <script> tagu na začátek <head>:

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

Nyní obnovte stránku v prohlížeči a nástroje se vám zobrazí. React Developer Tools standalone

Mobilní prostředí (React Native)

React Developer Tools lze zároveň využít i k prozkoumávání aplikací vytvořených za pomocí React Native.

Nejjednodušší způsob je nainstalovat tyto nástroje globálně:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Poté nástroje otevřte v terminálu:

react-devtools

Nástroje se nyní samy spojí s vaší React Native aplikací, která běží v lokálním prostředí.

Zkuste obnovit aplikaci pokud se nástroje po několika sekundách nepřipojí samy.

Zjistit více o ladění React Native.