Jak zalogować się w React Native?

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

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

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

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.

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

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

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

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 .

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

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!

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

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

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

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

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.

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.

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.

Uż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

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

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.

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.

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

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.

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

Możesz również użyć Reactotron, zapewni on o wiele więcej funkcji niż tylko logowanie. https://github.com/infinitered/reactotron

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.

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.

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

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

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

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.

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.