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.

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.

Więcej informacji w naszym przewodniku React Native DevTools.

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.