Podstawy debugowania

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 →

uwaga

Funkcje debugowania, takie jak Menu Deweloperskie, LogBox i React Native DevTools są wyłączone w wersjach produkcyjnych.

Otwieranie Menu Deweloperskiego

React Native udostępnia w aplikacji menu deweloperskie z dostępem do funkcji debugowania. Możesz je otworzyć poprzez potrząśnięcie urządzeniem lub skróty klawiszowe:

• Symulator iOS: Ctrl + Cmd ⌘ + Z (lub Device > Shake)

• Emulatory Android: Cmd ⌘ + M (macOS) lub Ctrl + M (Windows i Linux)

Alternatywa (Android): adb shell input keyevent 82.

Otwieranie DevTools

React Native DevTools to wbudowany debuger dla React Native. Pozwala analizować działanie kodu JavaScript, podobnie jak w przeglądarce internetowej.

Aby otworzyć DevTools:

• Wybierz "Open DevTools" w Menu Deweloperskim.

• Naciśnij j w CLI (npx react-native start).

Podczas pierwszego uruchomienia DevTools otworzy panel powitalny wraz z konsolą, gdzie możesz przeglądać logi i interagować ze środowiskiem JavaScript. U góry okna znajdziesz przełączanie między panelami, w tym Inspektorem Komponentów React i Profilerem.

React Native DevTools wykorzystuje dedykowaną architekturę debugowania wbudowaną w React Native oraz zmodyfikowaną wersję interfejsu Chrome DevTools. Dzięki temu oferujemy znane funkcje debugowania, głęboko zintegrowane i zaprojektowane dla pełnej niezawodności.

Więcej informacji w naszym przewodniku React Native DevTools.

uwaga

React Native DevTools jest dostępny tylko z silnikiem Hermes i wymaga zainstalowania Google Chrome lub Microsoft Edge.

informacja

Flipper i alternatywne narzędzia debugujące

React Native DevTools zastępuje poprzednie rozwiązania: Flipper, Eksperymentalny Debugger i Hermes debugger (Chrome). Jeśli używasz starszej wersji React Native, przejdź do dokumentacji dla twojej wersji.

Dla aplikacji używających JavaScriptCore zamiast Hermesa nadal dostępne jest bezpośrednie debugowanie JSC (patrz Inne metody debugowania).

React Native DevTools służy do debugowania warstwy Reactowej aplikacji, a nie zastępuje natywnych narzędzi. Do analizy platformowych warstw React Native (np. podczas tworzenia modułów natywnych) używaj narzędzi debugowania w Xcode i Android Studio (patrz Debugowanie kodu natywnego).

Inne przydatne linki:

• Why you don’t need Flipper in your React Native app … and how to get by without it ↗

LogBox

LogBox to narzędzie w aplikacji wyświetlające ostrzeżenia i błędy logowane przez twoją aplikację.

Błędy krytyczne

Gdy wystąpi nieodwracalny błąd, np. błąd składni JavaScript, LogBox otworzy się z lokalizacją błędu. W tym stanie LogBox nie można zamknąć, ponieważ kod nie może być wykonany. LogBox automatycznie zniknie po poprawieniu błędu składni — poprzez Szybką Aktualizację (Fast Refresh) lub po ręcznym przeładowaniu.

Błędy i ostrzeżenia konsoli

Błędy i ostrzeżenia konsoli wyświetlane są jako powiadomienia na ekranie z czerwoną lub żółtą ikoną.

• Błędy pokazują liczbę powiadomień. Dotknij powiadomienia, aby zobaczyć rozszerzony widok i przejść między innymi logami.

• Ostrzeżenia wyświetlają baner powiadomienia bez szczegółów, zachęcając do otwarcia React Native DevTools.

Gdy React Native DevTools jest otwarte, wszystkie błędy (oprócz błędów krytycznych) zostaną ukryte w LogBox. Zalecamy używanie panelu Konsola w React Native DevTools jako źródła prawdy, ze względu na różne opcje LogBox, które mogą ukrywać lub zmieniać poziom niektórych logów.

💡 Ignoring logs

LogBox can be configured via the LogBox API.

js

import {LogBox} from 'react-native';

Ignore all logs

LogBox notifications can be disabled using LogBox.ignoreAllLogs(). This can be useful in situations such as giving product demos.

js

LogBox.ignoreAllLogs();

Ignore specific logs

Notifications can be disabled on a per-log basis via LogBox.ignoreLogs(). This can be useful for noisy warnings or those that cannot be fixed, e.g. in a third-party dependency.

js

LogBox.ignoreLogs([
  // Exact message
  'Warning: componentWillReceiveProps has been renamed',

  // Substring or regex match
  /GraphQL error: .*/,
]);

uwaga

LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using LogBoxData.setWarningFilter().

Monitor wydajności

W Androidzie i iOS nakładkę monitorującą wydajność można włączyć podczas rozwoju, wybierając "Perf Monitor" w Menu Deweloperskim. Więcej o tej funkcji tutaj.

informacja

Monitor wydajności działa w aplikacji i ma charakter poglądowy. Do dokładnych pomiarów wydajności zalecamy korzystanie z natywnych narzędzi w Android Studio i Xcode.