W jaki sposób można debugować kod React za pomocą React Native, gdy aplikacja działa w symulatorze aplikacji?

Cmd+Dz poziomu symulatora. Wyskakuje Chrome i stamtąd możesz korzystać z Narzędzi dla programistów.

Edytować:

Jest to teraz powiązane z dokumentami pomocy .

Debugowanie React Native Apps

Aby debugować kod javascript swojej aplikacji reagującej, wykonaj następujące czynności:

1. Uruchom aplikację w symulatorze iOS.
2. Naciśnij, Command + Da strona internetowa powinna otworzyć się pod adresem http: // localhost: 8081 / debugger-ui . (Na razie tylko Chrome) lub użyjShake Gesture
3. Włącz wyjątki Pause On Caught, aby uzyskać lepszą jakość debugowania.
4. Naciśnij, Command + Option + Iaby otworzyć narzędzia Chrome dla programistów, lub otwórz je za pomocą View-> Developer-> Developer Tools.
5. Powinieneś teraz mieć możliwość debugowania w normalny sposób.

Opcjonalny

Zainstaluj rozszerzenie React Developer Tools dla Google Chrome. Umożliwi to nawigację w hierarchii widoków, jeśli wybierzesz Reactkartę, gdy narzędzia programistyczne są otwarte.

Live Reload

Aby aktywować Live Reload, wykonaj następujące czynności:

1. Uruchom aplikację w symulatorze iOS.
2. Prasa Control + Command + Z.
3. Będziesz teraz zobaczyć Enable/Disable Live Reload, Reloadi Enable/Disable Debuggingopcje.

W przypadku aplikacji na Androida, jeśli korzystasz z Genymotion, możesz przełączać menu, naciskając CMD + m, ale może być konieczne włączenie go w tym menu.

• Odznacz widżet
• Włącz, CMD + mklikając debugowanie w chrome

Oprócz innych odpowiedzi. Można debugować native-reagujące za pomocą instrukcji debuggera

przykład:

debugger; //breaks execution

Aby to zadziałało, narzędzia Chrome dla programistów muszą być otwarte

jeśli chcesz debugować za pomocą urządzenia z systemem Android w systemie Windows, po prostu otwórz wiersz polecenia, a następnie wpisz (upewnij się, że adb działa poprawnie)

adb shell input keyevent 82

wyświetli się ekran podobny do obrazu

następnie wybierz

debug JS Remotely

automatycznie otworzy nowe okno. następnie otwórz element inspekcji lub naciśnij klawisz F12, aby wyświetlić konsolę.

Wypróbuj ten program: https://github.com/jhen0409/react-native-debugger

Działa na: windows, osxi linux.

Obsługuje: react nativeiredux

Możesz także sprawdzić drzewo komponentów wirtualnych i zmodyfikować style odzwierciedlone w aplikacji.

cmd ⌘+ Ddziwnie nie działało dla mnie. Naciśnięcie ctrl+ cmd ⌘+ Zw symulatorze iOS otworzyło dla mnie okno przeglądarki debugowania.

Pojawi się ekran:

Więcej informacji tutaj.

Debugowanie native-reakcyjnej wersji 0.40.0 na Debianie 8 (Jessie) można wykonać, przechodząc do http: // localhost: 8081 / debugger-ui w Chromium lub Firebug, gdy aplikacja działa w symulatorze Androida. Aby uzyskać dostęp do menu programisty w aplikacji, uruchom następujące polecenie w innym oknie terminala, jak wskazano tutaj :

adb shell input keyevent 82

Nie mam wystarczającej reputacji, aby komentować poprzednie świetne odpowiedzi. :) Oto kilka sposobów, w jaki debuguję podczas tworzenia aplikacji native-reagującej.

1. Przeładowywanie na żywo

   Reakcja-natywna sprawia, że ​​bardzo łatwo jest zobaczyć zmiany za pomocą klawiszy ⌘ + R, a nawet po prostu włączyć przeładowanie na żywo, a watchman „odświeży” symulator przy użyciu najnowszych zmian. Jeśli pojawi się błąd, możesz uzyskać wskazówkę z numeru linii z tego czerwonego ekranu. Kilka cofnięć spowoduje powrót do stanu roboczego i rozpoczęcie od nowa.

2. console.log('yeah, seriously.')

   Wolę pozwolić programowi na uruchomienie i zapisywanie niektórych informacji niż dodawanie debuggerpunktu przerwania. (trudny debugger jest przydatny podczas próby pracy z zewnętrznymi pakietami / bibliotekami i ma funkcję autouzupełniania, więc wiesz, jakich innych metod możesz użyć).

3. Enable Chrome Debuggingz debugger;punktem przerwania w twoim programie.

Zależy to od rodzaju napotkanych błędów i preferencji dotyczących debugowania. W większości przypadków undefined is not an object (evaluating 'something.something')metoda 1 i 2 będą dla mnie wystarczające.

Podczas gdy radzenie sobie z zewnętrznymi bibliotekami lub pakietami napisanymi przez innych programistów będzie wymagało więcej wysiłku w celu debugowania, stąd dobre narzędzie takie jak Chrome Debugging

Czasami pochodzi ona z samej platformy-reakcyjnej, więc wyszukiwanie go w kwestiach związanych z reakcyjnymi z pewnością pomoże.

mam nadzieję, że to pomaga komuś tam.

Zamiast Cmd+Memulatora Androida naciśnij F10w systemie Windows. Emulator zaczyna wyświetlać wszystkie opcje debugowania w trybie macierzystym.

adb logcat *:S ReactNative:V ReactNativeJS:V

uruchom to w terminalu dla dziennika systemu Android.

Jeśli używasz Microsoft Visual Code, zainstaluj rozszerzenie React Native Tools. Następnie możesz dodać punkty przerwania, po prostu klikając żądany numer linii. Wykonaj następujące kroki, aby skonfigurować i debugować aplikację:

Nie zapomnij włączyć Debugowania JS zdalnie w emulatorze, jeśli go używasz.

W systemie Android: Ctrl + M (emulator) lub Potrząśnij telefonem (na urządzeniu), aby wyświetlić menu.

W systemie iOS: Cmd + D lub Potrząśnij telefonem, aby wyświetlić menu

Upewnij się, że masz chrom.

W ujawnionym menu wybierz opcję Debuguj JS zdalnie.

Chrome zostanie otwarty automatycznie na localhost: 8081 / debugger-ui. Możesz także ręcznie przejść do debuggera za pomocą tego linku.

Pojawia się konsola i można zobaczyć dzienniki odnotowane.

Dla mnie najlepszym sposobem na debugowanie na React-Native jest użycie „Reactotron” .

Zainstaluj Reactotron, a następnie dodaj je do pliku package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

teraz chodzi tylko o zalogowanie się w kodzie. na przykład:console.tron.log('debug')

1. Uruchom aplikację w symulatorze - Reaktywne natywne run-ios
2. Naciśnij kombinację klawiszy ctrl + d i kliknij opcję Debuguj JS zdalnie

1. strona powinna się otworzyć pod adresem http: // localhost: 8081 / debugger-ui , jeśli nie, wpisz adres URL i przejdź do tego linku w Chrome
2. Kliknij stronę prawym przyciskiem myszy, a następnie kliknij polecenie Sprawdź, co powinno otworzyć narzędzia programistyczne dla Chrome

3. Przejdź do źródeł w górnym menu i znajdź plik klasy js w Eksploratorze plików po prawej stronie

4. Możesz umieścić punkty przerwania w widoku i debugować kod, jak widać na obrazku.

Domyślnie mój symulator iOS nie odbierał naciśnięć klawiszy, dlatego cmd-D nie działał. Musiałem włączyć ustawienia klawiatury za pomocą menu symulatora:

Sprzęt> Klawiatura> Podłącz klawiaturę

Teraz cmd-D uruchamia debugowanie chrome.

Dla aplikacji na system Android. Naciśnij Ctrl + M zdalnie wybierz debugowanie js, otworzy nowe okno w chrome z adresem URL http: // localhost: 8081 / debugger-ui . Możesz teraz debugować aplikację w przeglądarce Chrome

Posiadanie miejsca w ścieżce pliku zapobiega się Cmd+ Dz pracy. Przeniosłem projekt do miejsca bez miejsca i wreszcie uruchomiłem debuger Chrome. Wygląda na błąd .

Jeśli chcesz domyślnie włączyć debugowanie:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Aby uruchomić to na Androidzie:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Odniesienie: Uruchom aplikację React Native z domyślnie włączoną funkcją „Debuguj JS”

Bardzo proste tylko dwie komendy

For IOS $ react-native log-ios
For Android $ react-native log-android

Zakładając, że chcesz wyświetlić to menu na emulatorze Androida

• Następnie spróbuj ⌘+mwyświetlić to okno dialogowe ustawień dewelopera w emulatorze Androida na komputerze Mac.

• Jeśli to nie pokazuje, przejdź do AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• A potem spróbuj ponownie ⌘+m.

• Jeśli nadal się nie wyświetla, przejdź do uruchomionych ustawień emulatora i na liście Send keyboard shortcuts torozwijanej combobox / wybierz Emulator controls (default)opcję.

• A potem spróbuj ponownie ⌘+m.

• Mam nadzieję, że to pomoże, zadziałało dla mnie.

Jeśli używasz Redux, gorąco polecam React Native Debugger. Zawiera devtools Chrome, ale także devtools Redux i React devtools.

Redux Devtools : Umożliwia przeglądanie twoich działań i przechodzenie między nimi. Pozwala także na przeglądanie sklepu redux i ma funkcję automatycznego różnicowania poprzedniego stanu ze zaktualizowanym stanem dla każdej akcji, dzięki czemu można to zobaczyć, przechodząc przez serię akcji.

React Devtools : Umożliwia sprawdzenie określonego komponentu, a mianowicie wszystkich jego rekwizytów, a także jego stanu. Jeśli masz element stanu komponentu, który jest wartością logiczną, pozwala kliknąć go, aby przełączyć go i zobaczyć, jak Twoja aplikacja reaguje na zmiany. Świetna funkcja.

Chrome Devtools Umożliwia wyświetlanie wszystkich danych wyjściowych konsoli, używanie punktów przerwania, wstrzymywanie debuggera; itp. Standardowe funkcje debugowania. Jeśli klikniesz prawym przyciskiem myszy obszar, w którym Twoje działania są wymienione w Redux Devtools i wybierzesz „Zezwalaj na inspekcję sieci”, możesz następnie sprawdzić połączenia API na karcie sieciowej Devtools Chrome, co jest miłe.

Podsumowując, posiadanie ich wszystkich w jednym miejscu jest fantastyczne! Jeśli nie potrzebujesz jednego z nich, możesz go włączyć / wyłączyć. Pobierz React Native Debugger i ciesz się życiem.

Jest to alternatywny sposób użycia zareaguj na natywną aplikację debuggera.

możesz pobrać aplikację, korzystając z poniższego linku. Jest to bardzo dobra aplikacja do zarządzania sklepem redux wraz z kodem źródłowym.

reaguj-rodzimy-debugger

a także dni, w których możesz bezpośrednio skorzystać z poniższego linku, aby uzyskać pomoc.

chrome-developer-tools

1. Jeśli używasz emulatora, użyj Ctrl+ Mi symulatora Cmd+D

2. Kliknij zdalnie - Debuguj js

3. Google Chrome przejdź do konsoli

Istnieje również bardzo dobra nazwa debugera Reactotron. https://github.com/infinitered/reactotron

Nie musisz być w trybie debugowania, aby zobaczyć jakąś wartość danych i jest wiele opcji.

idź, zobacz, który jest naprawdę przydatny. ;)

Debugowanie w React-Native jest znacznie łatwiejsze.

• Aby debugować w IOS, użyj

cmd + d

ctrl + cmd + z (dla symulatora)

• Aby debugować w Androidzie

Potrząśnij urządzeniem za pomocą dotyku (upewnij się, że opcja programisty jest włączona)

Krok 1: Miejsce, w debuggerktórym chcesz zatrzymać skrypt, na przykład:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

Spowoduje to wstrzymanie debugera, gdy tylko kontrola przyjdzie do tego bloku kodu.

Krok 2: Naciśnij Cmd+Dna iOS emulatorze i Cmd+Mna symulatorze Android . Jeśli masz prawdziwe urządzenie, potrząśnij nim, aby otworzyć menu programatora, jeśli nie chcesz wstrząsać urządzeniem, postępuj zgodnie z tym blogiem

Krok 3: Wybierz Enable Remote JS Debugging, otworzy to Chrome

Krok 4: WybierzDeveloper Tools.

Krok 5: Twój debugger jest wstrzymywany w Sourceszakładce, gdziekolwiek napisałeś debuggerw swoim kodzie. Przejdź do konsoli i wpisz dowolne parametry, które chcesz debugować (obecne w bloku kodu), takie jak: Aby ponownie przejść do następnego punktu debugowania, przejdź do Źródła -> kliknij przycisk Wznów wykonywanie skryptu (niebieski przycisk w prawym rogu)

Umieść debugger w dowolnym miejscu, w którym chcesz wstrzymać skrypt.

Ciesz się debugowaniem !!

Możesz użyć Safari do debugowania wersji aplikacji na iOS bez konieczności włączania opcji „Debuguj JS zdalnie”. Wystarczy wykonać następujące czynności:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

Najpierw w swoim symulatorze iOS, jeśli naciśniesz klawisz [Command + D], możesz zobaczyć ten ekran.

Następnie kliknij przycisk Zdalnie debuguj JS.

Po wyświetleniu strony React Native Debugger takiej jak ta.

A następnie otwórz swojego inspektora [f12] i przejdź do zakładki konsoli debuguj go! :)

Wydano React Native 0.62 - Oficjalnym rozwiązaniem jest Flipper 🚀

Flipper to mobilne narzędzia do debugowania w Androidzie i iOS bez użycia trybu debugowania w reakcyjnym środowisku macierzystym.

Od wersji RN 0.62 (Zobacz ten link ) Flipper jest inicjowany domyślnym projektem.

Flipper ma kilka wtyczek do debugowania. Wtyczki to Layout, Network,Shared preferences

Największą zaletą Flippera jest również brak wielu wtyczek, ale łatwo można również debugować konsolę urządzeń z Androidem / iOS.

Flipper ostrzega również o awarii lub odrzuceniu sieci.

Wtyczka układu zawiera tryb ułatwień dostępu i tryb docelowy.

Możesz również zobaczyć nieprzetworzone żądanie / odpowiedź sieci w aplikacji.