React Native DevTools

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

React Native DevTools to nasze nowoczesne środowisko debugowania dla React Native. Zbudowane od podstaw, ma być zasadniczo bardziej zintegrowane, poprawne i niezawodne niż poprzednie metody debugowania.

React Native DevTools jest przeznaczony do debugowania problemów w aplikacjach React, a nie do zastępowania natywnych narzędzi. Jeśli chcesz badać warstwy platformy React Native (na przykład podczas tworzenia modułu natywnego), użyj narzędzi debugowania dostępnych w Android Studio i Xcode (zobacz Debugowanie kodu natywnego).

💡 Compatibility — released in 0.76

React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.

It is not possible to set up React Native DevTools with any older versions of React Native.

• Chrome Browser DevTools — unsupported
  • Connecting to React Native via chrome://inspect is no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.
• Visual Studio Code — unsupported (pre-existing)
  • Third party extensions such as Expo Tools and Radon IDE may have improved compatibility, but are not directly supported by the React team.

💡 Feedback & FAQs

We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. All the features described on this page are built with these principles in mind, and we also want to offer more capabilities in future.

We are actively iterating on the future of React Native DevTools, and have created a centralized GitHub discussion to keep track of issues, frequently asked questions, and feedback.

Kluczowe funkcje

React Native DevTools opiera się na interfejsie Chrome DevTools. Jeśli masz doświadczenie w tworzeniu stron internetowych, jego funkcje powinny być ci znajome. Jako punkt wyjścia polecamy zapoznanie się z dokumentacją Chrome DevTools, która zawiera pełne przewodniki oraz zasoby wideo.

Konsola

Panel Konsola pozwala przeglądać i filtrować komunikaty, ewaluować JavaScript, sprawdzać właściwości obiektów i wiele więcej.

Dokumentacja funkcji konsoli | Chrome DevTools

Przydatne wskazówki

• Jeśli twoja aplikacja generuje wiele logów, użyj pola filtrującego lub zmień wyświetlane poziomy logów.

• Śledź wartości w czasie za pomocą Wyrażeń na żywo.

• Zachowuj komunikaty między przeładowaniami dzięki Zachowuj logi.

• Użyj Ctrl + L, aby wyczyścić widok konsoli.

Źródła i punkty przerwania

Panel Źródła pozwala przeglądać pliki źródłowe w aplikacji i rejestrować punkty przerwania. Użyj punktu przerwania, aby określić linię kodu, w której aplikacja powinna się wstrzymać — umożliwiając sprawdzenie aktualnego stanu programu i krokowe przechodzenie przez kod.

Wstrzymaj kod za pomocą punktów przerwania | Chrome DevTools

wskazówka

Miniprzewodnik

Punkty przerwania to podstawowe narzędzie w twoim zestawie debugowania!

1. Przejdź do pliku źródłowego używając paska bocznego lub Cmd ⌘+P / Ctrl+P.
2. Kliknij w kolumnie numerów linii obok linii kodu, aby dodać punkt przerwania.
3. Użyj kontrolek nawigacyjnych w prawym górnym rogu, aby krokować przez kod podczas wstrzymania.

Przydatne wskazówki

• Nakładka "Paused in Debugger" pojawia się, gdy aplikacja jest wstrzymana. Dotknij jej, aby wznowić działanie.

• Podczas zatrzymania na punkcie przerwania zwróć uwagę na panele po prawej stronie, które pozwalają sprawdzić bieżący zakres i stos wywołań oraz ustawić wyrażenia śledzone.

• Użyj instrukcji debugger;, aby szybko ustawić punkt przerwania z edytora tekstu. Dotrze on natychmiast do urządzenia dzięki Fast Refresh.

• Istnieje wiele rodzajów punktów przerwania! Na przykład Punkty przerwania warunkowe i Punkty dziennika.

Pamięć

Panel Pamięć pozwala wykonywać migawki sterty i przeglądać użycie pamięci przez twój kod JavaScript w czasie.

Rejestrowanie migawek sterty | Chrome DevTools

Przydatne wskazówki

• Użyj Cmd ⌘+F / Ctrl+F do filtrowania konkretnych obiektów w stercie pamięci.

• Utworzenie raportu osi czasu alokacji pomaga wizualizować zużycie pamięci w formie wykresu, co ułatwia identyfikację potencjalnych wycieków pamięci.

Funkcje React DevTools

W zintegrowanych panelach Komponenty i Profiler znajdziesz wszystkie funkcje React DevTools z rozszerzenia przeglądarkowego. Działają one bezproblemowo w React Native DevTools.

Komponenty React

Panel Komponenty React pozwala inspekcjonować i aktualizować renderowane drzewo komponentów React.

• Najedź kursorem lub wybierz element w DevTools, aby podświetlić go na urządzeniu.

• Aby zlokalizować element w DevTools, kliknij przycisk "Wybierz element" w lewym górnym rogu, a następnie dotknij dowolnego elementu w aplikacji.

Przydatne wskazówki

• Właściwości (props) i stan komponentu można przeglądać i modyfikować w czasie rzeczywistym za pomocą panelu po prawej stronie.

• Komponenty zoptymalizowane za pomocą React Compiler będą oznaczone odznaką "Memo ✨".

wskazówka

Porada eksperta: Podświetlanie re-renderowań

Ponowne renderowania mogą znacząco wpływać na wydajność aplikacji React. DevTools może podświetlać komponenty podczas ich ponownego renderowania.

• Aby włączyć tę funkcję, kliknij ikonę Ustawienia widoku (⚙︎) i zaznacz "Podświetlaj aktualizacje przy renderowaniu komponentów".

Profiler React

Panel Profiler React pozwala nagrywać profile wydajności w celu analizy czasu renderowania komponentów i zatwierdzeń (commits) w React.

Więcej informacji znajdziesz w oryginalnym przewodniku z 2018 roku (uwaga: niektóre fragmenty mogą być nieaktualne).

Ponowne łączenie DevTools

Czasami DevTools może rozłączyć się z docelowym urządzeniem. Może się to zdarzyć gdy:

• Aplikacja zostanie zamknięta.

• Aplikacja zostanie przebudowana (zainstalowana jest nowa natywna wersja).

• Aplikacja ulega awarii po stronie natywnej.

• Serwer deweloperski (Metro) zostanie wyłączony.

• Urządzenie fizyczne zostanie odłączone.

Po rozłączeniu pojawi się okno dialogowe z komunikatem "Debugging connection was closed".

W tym miejscu możesz:

• Odrzucić: Wybierz ikonę zamknięcia (×) lub kliknij poza oknem dialogowym, aby wrócić do ostatniego stanu DevTools sprzed rozłączenia.

• Połączyć ponownie: Wybierz "Reconnect DevTools" po usunięciu przyczyny rozłączenia.