Jak debugujesz React Native?

264

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

McG
źródło
Oprócz tych odpowiedzi, jeśli pracujesz nad VS Code i chcesz debugować go zamiast Chrome, to sprawdź moją odpowiedź
gprathour
Śledź tego bloga. medium.com/javascript-in-plain-english/…
Tunvir Rahman Tusher

Odpowiedzi:

158

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 .

Xanadont
źródło
8
Używając symulatora v8.2, Cmd + D wydaje się nic nie robić. Chrome jest najnowszy. Czy potrzebna jest specjalna wtyczka w chrome lub proxy?
McG
5
Pobieranie „Debuger Websocket nie jest dostępny. Czy zapomniałeś dołączyć RCTWebSocketExecutor?”. : /
Tyler McGinnis
1
Miałem następujący błąd: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: błąd skryptu: Oczekiwano nazwy klasy, ale znaleziono właściwość. (-2741). Dowiedziałem się, że jeśli wyłączę udostępnianie aplikacji Windows Macowi w Parallels, zacznie działać. Zobacz stackoverflow.com/questions/29310936/... .
Serge van den Oever
5
To będzie Cmd+Mna OS X i Androidzie
niestabilne
2
Zauważ, że Cmd + D nic nie zrobi, jeśli konfiguracja kompilacji jest ustawiona na „Release” - upewnij się, że jest ustawiona na „Debuguj”.
jwinn
79

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.
Jiuhong Deng
źródło
Ta odpowiedź w zasadzie kopiuje dokument, który jest początkiem, ale nie szczególnie pouczający. Co w tym kontekście oznacza „debugowanie w normalny sposób”?
GreenAsJade,
6
Ważna uwaga: React Developer Tools od miesięcy nie współpracuje z React Native i pozostaje do naprawienia. Więcej informacji tutaj: github.com/facebook/react-devtools/issues/229
Lane Rettig
Kto powiedział, że to Mac?
shinzou,
@shinzou wynika z wzmianki o symulatorze (jest to symulator dla programistów iOS, emulator dla programistów Android). Tak, wiem, że minęło trochę czasu, ale nadal tylko FWIW
Konrad Morawski
58

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
John Lim
źródło
5
Wreszcie znalazłem rozwiązanie dla Androida, dzięki! W najnowszej wersji debug in chromezastąpiono go start debug remotely.
MewX
@MewX Czy możesz dać nam znać, jak to zrobić? 🤔
Mo.
@Muhammed Cześć, możesz po prostu obserwować cmd + mlub ctrl + mwybrać start debug remotelyz wyskakujących okien w swoim symulatorze
MewX
31

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

drikoda
źródło
F ya! Właśnie tego potrzebowałem! Dziękuję przyjacielu!
I_am_learning_now
27

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 wprowadź opis zdjęcia tutaj

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ę.

bpsourav21
źródło
czy istnieje odpowiednik iOS dla tego polecenia? Niedawno zacząłem od RN, a to bardzo by pomogło w przyszłości
Juan Carlos Alpizar Chinchilla
26

wprowadź opis zdjęcia tutaj

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.

Obrabować
źródło
Czy mogę wyświetlić wartość konkretnej zmiennej za pomocą tego debuggera? Próbowałem console.log(url), ale nie mogę znaleźć, gdzie jest wyjście.
QuarK
24

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:

Reaguj rodzime opcje debugowania

Więcej informacji tutaj.

bigtex777
źródło
Nie widzę tych opcji ... :(
Noah
16

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

BdN3504
źródło
14

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.

chinloong
źródło
12

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

wizerunek

Priyanga
źródło
10
adb logcat *:S ReactNative:V ReactNativeJS:V

uruchom to w terminalu dla dziennika systemu Android.

nagasundaram I
źródło
osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch
9

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ę: USTAWIAĆ BIEGAĆ

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

Poznaj Patela
źródło
9

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.

Naveen Vignesh
źródło
8

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')

Vinay
źródło
8
  1. Uruchom aplikację w symulatorze - Reaktywne natywne run-ios
  2. Naciśnij kombinację klawiszy ctrl + d i kliknij opcję Debuguj JS zdalnie

wprowadź opis zdjęcia tutaj

  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

wprowadź opis zdjęcia tutaj

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

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

Sameera Chathuranga
źródło
6

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.

McG
źródło
5

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 .

micksabox
źródło
5

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”

Olcay Ertaş
źródło
W konkretnym miejscu powinienem umieścić te 4 wiersze? W App.js lub index.js?
Julien Lamarche
@JulienLamarche Umieść w App.js
Olcay Ertaş
należy to przyjąć jako odpowiedź… dlaczego też wierzyć w polecenia…
Tushar Pandey
4

Bardzo proste tylko dwie komendy

For IOS $ react-native log-ios
For Android $ react-native log-android
Abhijit Chakra
źródło
tak to robię!
Zach Cook
To świetny sposób, aby zobaczyć, co dzieje się w twoim sklepie
Daan
4

Zakładając, że chcesz wyświetlić to menu na emulatorze Androida wprowadź opis zdjęcia tutaj

  • 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. wprowadź opis zdjęcia tutaj

  • 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ę.

wprowadź opis zdjęcia tutaj

  • A potem spróbuj ponownie ⌘+m.

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

Nkokhelox
źródło
4

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.

Nunchucks
źródło
4

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

Hardik Virani
źródło
3
  1. Jeśli używasz emulatora, użyj Ctrl+ Mi symulatora Cmd+D

  2. Kliknij zdalnie - Debuguj js

  3. Google Chrome przejdź do konsoli

Krishnendu Bhattacharyya
źródło
3

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. ;)

Youcef EL KAMEL
źródło
Dziękuję Ci! Używaliśmy RN 0,59, który nie był kompatybilny z Flipper.
chichilatte
3

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)

jatin.7744
źródło
1
Ładne wyjaśnienie.
Narendra Solanki
3

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

wprowadź opis zdjęcia tutaj

Krok 4: WybierzDeveloper Tools.

wprowadź opis zdjęcia tutaj

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: wprowadź opis zdjęcia tutaj 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 !!

Aishwarya
źródło
3

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
Hussam Kurd
źródło
3

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

wprowadź opis zdjęcia tutaj

Następnie kliknij przycisk Zdalnie debuguj JS.

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

wprowadź opis zdjęcia tutaj

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

Jinsung Sunwoo
źródło
2

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.

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

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

MJ Studio
źródło
Czy musimy ręcznie zainstalować Flipper? A może w jakiś sposób jest dostarczany z React Native? Jeśli tak, jak to otworzyć?
Charanor
@Charanor zainstalowałem przy użyciu reagującego natywnego przewodnika aktualizacji podczas aktualizacji do wersji 0.62
MJ Studio