Jak zalogować się w React Native?

345

Jak mogę zalogować zmienną w React Native, na przykład używając console.logpodczas programowania dla sieci?

skyline75489
źródło
Wypróbuj reag-native-log-ios npm pkg, działa on natychmiast po wyjęciu z pudełka bez zdalnego debugowania JS.
bobby

Odpowiedzi:

325

console.log Pracuje.

Domyślnie w systemie iOS loguje się do okienka debugowania w Xcode.

W symulatorze IOS naciśnij ( + D) i naciśnij Zdalne debugowanie JS . Spowoduje to otwarcie zasobu http: // localhost: 8081 / debugger-ui na localhost. Stamtąd użyj konsoli Java Developer Tools do wyświetlenia konsoliconsole.log

Yinfeng
źródło
47
Jak wydrukować dziennik konsoli na Androidzie za pomocą atomu React Native?
piaszczysty
3
@sandy Zobacz tę odpowiedź . Nie jest specjalnie przeznaczony dla Atom, ale może być używany w programowaniu innym niż XCode (aka non macOS)
alexdriedger
21
Należy pamiętać, że od wersji React Native 0.29 i nowszych można uzyskać dzienniki bez uruchamiania debugera. Po prostu uruchom React-Native Log-iOS lub Reaktywuj Native Log-Android w wierszu poleceń w folderze projektu.
Martin Konicek,
1
A kiedy otworzysz Zdalne debugowanie JS, musisz nacisnąć opcje + polecenie + i i sprawdzić konsolę. Niezbędne informacje, których brakowało i które mnie zdezorientowały.
sudo,
1
pamiętaj tylko, że console.log w produkcyjnej wersji aplikacji może spowodować awarię aplikacji na iOS. więc upewnij się, że sprawdziłeś, czy środowisko jest programistyczne, możesz je poznać dzięki zmiennej globalnej DEV w miejscu reakcji native.
Yash Ojha
347

Wykorzystanie console.log, console.warnitd.

Począwszy od wersji React Native 0.29, możesz po prostu uruchomić następujące polecenia, aby wyświetlić dzienniki w konsoli:

$ react-native log-ios
$ react-native log-android
Martin Konicek
źródło
2
Jest to bardzo pomocne, ponieważ uruchomienie debuggera powoduje, że animacje są wolne.
jcollum
13
To nie działa. Ten komunikat pojawia się, gdy uruchamiam react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Uwaga>: Usługa działała tylko przez 0 sekund. Wypychanie odrodzenia o 10 sekund.
rptwsthi
@rptwsthi Mam ten sam problem. Czy potrafiłeś to rozwiązać?
Ben
2
@Denis Kniazhev Nie sądzę, że istnieje opcja tylko rejestrowania błędów, ale możesz filtrować dane wyjściowe. Jeśli korzystasz z systemu Mac lub Linux: reag-native log-android | grep „mój filtr błędów”.
Martin Konicek,
1
console.warn pomogło mi sprawdzić pewne obawy.
Madhavi Jayasinghe,
39

Pre React Native 0.29, uruchom to w konsoli:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, uruchom:

react-native log-ios

lub

react-native log-android

Jak powiedział Martin w innej odpowiedzi.

To pokazuje wszystkie console.log (), błędy, notatki itp. I powoduje spowolnienie zerowe.

Joe
źródło
3
+1 za tę prostą opcję. Skończyło się na użyciu nieco wariantu polecenia (po przeczytaniu dokładnego podręcznika), aby uzyskać także czasy:adb logcat -v time -s ReactNativeJS
spechter
Trzymanie karty debugowania w tle powoduje opóźnienie. Rozwiązaniem jest utrzymanie zakładki na pierwszym planie lub otwarcie jej w nowym oknie.
Sabbir,
Używam React Native Debugger od miesięcy i jest to najlepsza opcja, aby uniknąć opóźnień, które Sabbir powiedział: github.com/jhen0409/react-native-debugger
Fran Verona
36

Posługiwać się console.debug("text");

Zobaczysz dzienniki wewnątrz terminala.

Kroki:

  • Uruchom aplikację:
react-native run-ios        # For iOS
react-native run-android    # For Android
  • Uruchom program rejestrujący:
react-native log-ios        # For iOS
react-native log-android    # For Android
omprakash8080
źródło
2
jakikolwiek sposób, aby filtrować tylko z console.log?
Nie działa dla mnie, widzę tylko ogólne komunikaty React Native log, takie jak Initializing React Xplat Bridge..
Philipp Ludwig
21

Visual Studio Code ma przyzwoitą konsolę debugowania, która może wyświetlać plik console.log.

wprowadź opis zdjęcia tutaj

Kod VS jest najczęściej przyjazny dla React Native.

goodhyun
źródło
6
Czy możesz bardziej szczegółowo wyjaśnić, w jaki sposób kod VS może odbierać dane wyjściowe debugowania z środowiska-reakcyjnego. Dzięki!
mike123
Wybierz „Debuguj JS” z aplikacji na urządzeniu i „Przełącz konsolę debugowania (shift-Command-y)” z menu widoku w kodzie VS. Potrzebujesz jednak github.com/Microsoft/vscode-react-native .
goodhyun
19

To tutaj narzędzia programistów Chrome są Twoim przyjacielem.

Poniższe kroki powinny doprowadzić Cię do Narzędzi dla programistów Chrome, gdzie będziesz mógł zobaczyć swoje console.logwyciągi.

Kroki

  1. Zainstaluj Google Chrome , jeśli jeszcze tego nie zrobiłeś
  2. Uruchom aplikację za pomocą react-native run-androidlubreact-native run-ios
  3. Otwórz menu programisty
    • Mac: ⌘+D dla systemu iOS lub ⌘MAndroid iOS
    • Windows / Linux: wstrząśnij telefonem z Androidem
  4. Wybierz Debug JS Remotely
  5. To powinno uruchomić debugger w Chrome
  6. W Chrome: Tools -> More Tools -> Developer Optionsi upewnij się, że jesteś na consolekarcie

Teraz, gdy console.loginstrukcja zostanie wykonana, powinna pojawić się w Narzędziach Chrome dla programistów. Oficjalna dokumentacja jest tutaj .

alexdriedger
źródło
2
Może to spowolnić działanie aplikacji podczas programowania.
Andrien Pecson,
17

Istnieją trzy metody debugowania podczas tworzenia aplikacji React Native:

  1. console.log(): pokazuje w konsoli
  2. console.warn(): pokazuje w żółtym polu na dole aplikacji
  3. alert(): wyświetla się jako zachęta, tak jak w sieci
Omar Samman
źródło
6

Wolę polecić was za pomocą React Native Debugger. Możesz pobrać i zainstalować za pomocą tego polecenia.

brew update && brew cask install react-native-debugger

lub

Po prostu sprawdź poniższy link.

https://github.com/jhen0409/react-native-debugger

Szczęśliwego hakowania!

Daniel Agus Sidabutar
źródło
Używam tego zamiast domyślnego startSpowoduje to otwarcie Debugera jako domyślnego debugera zamiast Chrome, a -gflaga zapobiegnie przejęciu kontroli nad przeładowaniami. "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
łuszczący się
3

Miałem ten sam problem: komunikaty konsoli nie pojawiały się w obszarze debugowania XCode. W mojej aplikacji zrobiłem polecenie cmd-d, aby wyświetlić menu debugowania, i przypomniałem sobie, że ustawiłem opcję „Debuguj w Safari”.

Wyłączyłem to, a niektóre komunikaty zostały wydrukowane na komunikacie wyjściowym, ale nie na komunikatach konsoli. Jednak jeden z komunikatów dziennika powiedział:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Stało się tak, ponieważ wcześniej dołączyłem mój projekt do testowania na prawdziwym urządzeniu za pomocą polecenia:

react-native bundle --minify

Ten pakiet jest włączony bez „trybu deweloperskiego”. Aby zezwolić na komunikaty programistów, dołącz flagę --dev:

react-native bundle --dev

Wiadomości z konsoli.log powróciły! Jeśli nie łączenie dla prawdziwego urządzenia, nie zapomnij, aby ponownie punkt jsCodeLocationw AppDelegate.mcelu localhost (zrobiłem!).

Panie marszałku
źródło
3

Naciśnij [Command + Control + Z] w Xcode Simulator, wybierz Debuguj JS zdalnie, a następnie naciśnij [Command + Opcja + J], aby otworzyć narzędzia programistyczne Chrome.

Xcode Simulator Img

refer :Debugowanie React Native Apps

Bocai
źródło
3

Logowanie w React-Native jest tak proste

Użyj console.log i console.warn

console.log('character', parameter)

console.warn('character', parameter)

Ten dziennik można wyświetlić w konsoli przeglądarki. Jeśli chcesz sprawdzić dziennik urządzenia lub powiedzieć produkcyjny dziennik APK, którego możesz użyć

adb logcat

adb -d logcat
jatin.7744
źródło
Wszystko pokazuje się w ADB z wyjątkiem instrukcji console.logi console.warn.
Andrew Koster
Tak @AndrewKoster Zgadzam się z tobą, możemy przeglądać wszystkie dzienniki za pomocą ADB, ale daje to dzienniki urządzeń tutaj zapytanie dotyczy logowania do rozwoju sieci. ADB zapewnia dzienniki urządzeń, a także kontrolę i sprawdzanie konfiguracji urządzeń. Możesz zebrać informacje z poniższego linku poleceń ADB, które mogą ci pomóc podczas programowania. androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744 11.1119
2

Moduł React-Native-Xlog , który może Ci pomóc, to Xlog WeChat dla React -Native. Pliki wyjściowe mogą być wyświetlane w konsoli Xcode i pliku dziennika. Pliki dziennika produktu mogą pomóc w debugowaniu.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
EngsSH
źródło
2

Rejestrowanie czasu programowania

Do rejestrowania czasu programowania można użyć console.log () . Jedną ważną rzeczą, jeśli chcesz wyłączyć logowanie w trybie produkcyjnym, a następnie w pliku aplikacji Root Js, po prostu przypisz pustą funkcję w ten sposób - console.log = {} Całkowicie wyłączy to publikowanie dziennika w całej aplikacji, co faktycznie jest wymagane w produkcji tryb jako console.log zajmuje dużo czasu.


Rejestrowanie w czasie wykonywania

W trybie produkcyjnym wymagane jest także wyświetlanie dzienników, gdy prawdziwi użytkownicy korzystają z Twojej aplikacji w czasie rzeczywistym. Pomaga to w zrozumieniu błędów, użytkowania i niepożądanych przypadków. Na rynku dostępnych jest wiele płatnych narzędzi innych firm. Jednym z nich, którego użyłem, jest Logentries

Dobrą rzeczą jest to, że Logentries ma również React Native Module . Włączenie rejestrowania w czasie wykonywania za pomocą aplikacji mobilnej zajmie więc o wiele mniej czasu.

bygirish
źródło
2

Coś, co pojawiło się około miesiąc temu, to „Create React Native App”, niesamowity szablon, który pozwala (przy minimalnym wysiłku) pokazać, jak wygląda Twoja aplikacja na żywo na urządzeniu mobilnym (DOWOLNIE z aparatem) za pomocą aplikacji Expo . Ma nie tylko bieżące aktualizacje, ale pozwoli ci zobaczyć dzienniki konsoli w twoim terminalu, tak jak podczas programowania dla Internetu , zamiast konieczności korzystania z przeglądarki, tak jak to robiliśmy wcześniej z React Native.

Oczywiście musiałbyś stworzyć nowy projekt z tym szablonem ... ale jeśli chcesz migrować swoje pliki, nie powinno to stanowić problemu. Spróbuj.

Edycja: W rzeczywistości nie wymaga nawet aparatu. Powiedziałem, że do skanowania kodu QR, ale możesz też wpisać coś, co zsynchronizuje go z serwerem, a nie tylko kod QR.

Kod Ryo
źródło
2

Istnieją dwie opcje debugowania lub uzyskania danych wyjściowych reagowanej aplikacji natywnej podczas używania

Emulator lub urządzenie rzeczywiste

Pierwsze użycie emulatora: użyj

React-native log-android lub React-Native Log-iOS

aby uzyskać dane wyjściowe dziennika

na prawdziwym urządzeniu. potrząśnij urządzeniem

więc menu pojawi się w miejscu, w którym wybierzesz zdalny debugowanie, i otworzy ten ekran w przeglądarce. dzięki czemu można wyświetlić dane wyjściowe dziennika na karcie konsoli.wprowadź opis zdjęcia tutaj

Mudassir Khan
źródło
2

wprowadź opis zdjęcia tutajUżyj reaguj natywnego debugera do rejestrowania i redux store https://github.com/jhen0409/react-native-debugg

Wystarczy go pobrać i uruchomić jako oprogramowanie, a następnie włączyć tryb debugowania z symulatora.

Obsługuje inne funkcje debugowania, takie jak element w narzędziach programistycznych chrome, który pomaga zobaczyć stylizację zapewnioną dla dowolnego komponentu.

Ostatnia pełna obsługa narzędzi programistycznych redux

Rajender Dandyal
źródło
2
  1. Wpisz console.log("My log text")swój kod
  2. przejdź do narzędzi wiersza poleceń
  3. ustaw się w folderze programistycznym

W Androidzie:

  • napisz to polecenie: React-native log-android

W IOS:

  • napisz to polecenie: React-native log-ios
Innocent TRA BI
źródło
1

Możesz użyć opcji debugowania zdalnego js ze swojego urządzenia lub możesz po prostu użyć Reaktywny log-Android i Reaktywny Log-iOS dla iOS.

Tanumay Ghosh
źródło
1

console.log () to łatwy sposób na debugowanie kodu, ale należy go używać z funkcją strzałki lub bind () podczas wyświetlania dowolnego stanu. Link może być przydatny.

Arun Kumar
źródło
1

Możesz to zrobić na 2 sposoby

1> za pomocą warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Korzystając z alertu To nie jest dobre za każdym razem, gdy osiągnie alert, za każdym razem pop będzie otwierany, więc jeśli wykonywanie pętli oznacza, że ​​nie należy go używać

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);
keerthi c
źródło
1

Użytkownicy systemów Windows i Android Studio:

Znajdziesz go pod Logcat w Android Studio. Wyświetlanych jest wiele komunikatów rejestrujących, dlatego może być łatwiej utworzyć filtr dla „ReactNativeJS”, który będzie wyświetlał tylko komunikaty console.log, które są tworzone w Twojej natywnej aplikacji.

David Hudman
źródło
1

Każdy programista, który boryka się z tym problemem debugowania za pomocą native speakera, nawet ja się z tym zmierzyłem i odsyłam to, a rozwiązanie jest dla mnie wystarczające na poziomie początkowym, obejmuje kilka sposobów, które pomagają nam spróbować użyć tego, co kiedykolwiek było dla nas wygodne

  1. Debugowanie za pomocą console.log
  2. Kod debugowania (logika) za pomocą Nuclide
  3. Kod debugowania (logika) w Chrome
  4. Użyj Xcode do debugowania GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Chetan Sheladiya
źródło
1

Istnieje kilka sposobów, aby to osiągnąć, wymieniam je i uwzględniam także wady korzystania z nich. Możesz użyć:

  1. console.logi przeglądaj instrukcje logowania, bez rezygnacji z opcji zdalnego debugowania z narzędzi programistycznych, Android Studio i Xcode. lub możesz zrezygnować z opcji zdalnego debugowania i przeglądać logowanie do narzędzi Chrome Dev lub vscode lub dowolnego innego edytora obsługującego debugowanie, musisz zachować ostrożność, ponieważ spowolni to cały proces.
  2. Możesz użyć console.warn ale wtedy ekran telefonu komórkowego zostałby zalany tymi dziwnymi żółtymi polami, które mogą, ale nie muszą być wykonalne w zależności od twojej sytuacji.
  3. Najbardziej skuteczną metodą, na jaką natknąłem się, jest użycie narzędzia innej firmy, Reactotron . Proste i łatwe w konfiguracji narzędzie, które pozwala zobaczyć każdą instrukcję rejestrowania na różnych poziomach (błąd, debugowanie, ostrzeżenie itp.). Udostępnia narzędzie GUI, które wyświetla wszystkie rejestracje aplikacji bez spowalniania wydajności.
Anus Kaleem
źródło
1

Używasz tego samego, co w zwykłej sieci. consoleKomenda działa również w tym przypadku. Na przykład, można użyć console.log(), console.warn(), console.clear()itd.

Możesz użyć programisty Chrome, aby użyć consolepolecenia podczas logowania podczas uruchamiania aplikacji React Native.

zixuan
źródło
0

console.log() jest najlepszym i prostym sposobem, aby zobaczyć swoją logowaną konsolę, gdy używasz zdalnego debugera js z menu programisty

Nirali Vasoya
źródło
0

Chrome Devtool to najlepszy i najprostszy sposób na logowanie i debugowanie.

akshay gore
źródło
0

Jeśli korzystasz z systemu OSX i używasz emulatora, możesz wyświetlić swoje console.logbezpośrednio w inspektorze safari.

Safari => Development => Simulator - [Twoja wersja symulatora tutaj] => JSContext

Paulin Trognon
źródło
0

Zwykle są dwa scenariusze, w których potrzebujemy debugowania.

  1. Kiedy mamy do czynienia z problemami związanymi z danymi i chcemy w takim przypadku sprawdzić nasze dane i debugowanie związane z danymi console.log('data::',data)

    i zdalne debugowanie js jest najlepszą opcją.

  2. Innym przypadkiem są problemy związane z interfejsem użytkownika i stylami, w których musimy sprawdzić styl komponentu. W takim przypadku reakcja-narzędzia-narzędzia jest najlepszą opcją.

    obie metody tu wymienione.

Waheed Akhtar
źródło
0

Plik console.log może być używany w dowolnym projekcie JS. Jeśli uruchamiasz aplikację na localhost, to oczywiście jest ona podobna do każdego projektu javascript. Ale podczas korzystania z symulatora lub dowolnego urządzenia podłącz ten symulator do naszego hosta lokalnego, a my zobaczymy w konsoli.

Thamizhselvan
źródło