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.

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.

PreviousEditor Setup