Przejdź do treści głównej
Wersja: 0.77

Inne metody 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 →

Ta strona opisuje starsze metody debugowania JavaScript. Jeśli zaczynasz pracę z nową aplikacją React Native lub Expo, zalecamy użycie React Native DevTools.

Narzędzia deweloperskie Safari (bezpośrednie debugowanie JSC)​

Możesz używać Safari do debugowania wersji iOS swojej aplikacji, gdy jako środowisko uruchomieniowe używasz JavaScriptCore (JSC).

  1. Tylko urządzenia fizyczne: Otwórz aplikację Ustawienia, przejdź do Safari > Zaawansowane i upewnij się, że opcja "Web Inspector" jest włączona.

  2. Na swoim Macu otwórz Safari i włącz menu Deweloperskie. Można to znaleźć w Safari > Preferencje..., następnie w zakładce Zaawansowane, zaznaczając "Pokaż funkcje dla deweloperów internetowych".

  3. Znajdź swoje urządzenie w menu Deweloperskie i wybierz pozycję "JSContext" z podmenu. Spowoduje to otwarcie Web Inspector Safari, który zawiera panele Konsola i Źródła podobne do Chrome DevTools.

Otwieranie Safari Web Inspector

wskazówka

Mapy źródłowe mogą nie być domyślnie włączone. Możesz postępować zgodnie z tym przewodnikiem lub tym filmem, aby je włączyć i ustawić punkty przerwania we właściwych miejscach w kodzie źródłowym.

wskazówka

Za każdym razem, gdy aplikacja jest przeładowywana, tworzony jest nowy JSContext. Wybranie opcji "Automatycznie pokazuj Web Inspector dla JSContextów" oszczędzi konieczności ręcznego wybierania najnowszego JSContextu.

Zdalne debugowanie JavaScript (przestarzałe)​

ostrzeżenie

Zdalne debugowanie JavaScript jest przestarzałe w React Native 0.73 i zostanie usunięte w przyszłej wersji.

Zdalne debugowanie JavaScript łączy zewnętrzną przeglądarkę internetową (Chrome) z Twoją aplikacją i uruchamia kod JavaScript na stronie internetowej. Pozwala to korzystać z debugera Chrome tak jak w przypadku dowolnej aplikacji internetowej. Pamiętaj, że środowisko przeglądarki może się znacząco różnić i nie wszystkie moduły React Native będą działać podczas debugowania w ten sposób.

Konfiguracja​

Od React Native 0.73 zdalne debugowanie JavaScript musi być ręcznie włączone przy użyciu modułu NativeDevSettings.

js
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

function MyApp() {
  // Assign this to a dev-only button or useEffect call
  const connectToRemoteDebugger = () => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  };
}

Wywołanie NativeDevSettings.setIsDebuggingRemotely(true) otworzy nową kartę pod adresem http://localhost:8081/debugger-ui.

Na tej stronie otwórz Chrome DevTools poprzez:

  • Widok > Deweloperskie > Narzędzia deweloperskie

  • ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows i Linux).

Panele Konsola i Źródła pozwolą Ci sprawdzać kod React Native.

Okno zdalnego debugera w Chrome

informacja

Podczas zdalnego debugowania JavaScript, wersja internetowa React DevTools w Chrome nie będzie działać z React Native. Zobacz przewodnik React Native DevTools, aby dowiedzieć się, jak używać React DevTools w naszym zintegrowanym debugerze.

uwaga

W systemie Android, jeśli czasy debugera i urządzenia są rozsynchronizowane, elementy takie jak animacje i zachowanie zdarzeń mogą nie działać poprawnie. Można to naprawić, uruchamiając adb shell "date `date +%m%d%H%M%Y.%S%3N`". Dostęp root jest wymagany w przypadku użycia urządzenia fizycznego.

Debugowanie na urządzeniu fizycznym​

informacja

Jeśli używasz Expo CLI, to jest już skonfigurowane.

On Android 5.0+ devices connected via USB, you can use the adb command line tool to set up port forwarding from the device to your computer:

sh
adb reverse tcp:8081 tcp:8081
uwaga

Jeśli napotkasz problemy, możliwe, że jedno z Twoich rozszerzeń Chrome wchodzi w nieoczekiwane interakcje z debugerem. Spróbuj wyłączyć wszystkie rozszerzenia i włączać je pojedynczo, aż znajdziesz problematyczne rozszerzenie.