React Native'de günlük kaydı nasıl yapılır?

React Native'de, console.logweb için geliştirirken kullanmak gibi bir değişkeni nasıl kaydedebilirim ?

console.log İşler.

İOS'ta varsayılan olarak, Xcode içindeki hata ayıklama bölmesinde oturum açar.

IOS simülatöründe ( ⌘+ D) tuşuna ve Uzak JS Hata Ayıklaması'na basın . Bu, localhost üzerinde http: // localhost: 8081 / debugger-ui kaynağını açar . Oradan görüntülemek için Chrome Geliştirici araçları javascript konsolunu kullanınconsole.log

Kullanımı console.log,console.warn vb

React Native 0.29'dan itibaren konsoldaki günlükleri görmek için aşağıdakileri çalıştırabilirsiniz:

$ react-native log-ios
$ react-native log-android

Pre React Native 0.29, bunu konsolda çalıştırın:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, çalıştırın:

react-native log-ios

veya

react-native log-android

Martin'in başka bir cevapta söylediği gibi.

Bu, tüm console.log (), hataları, notları vb. Gösterir ve sıfırın yavaşlamasına neden olur.

kullanım console.debug("text");

Terminalin içindeki günlükleri göreceksiniz.

Adımlar:

• Uygulamayı çalıştırın:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Kaydediciyi çalıştırın:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code, console.log'unuzu gösterebilecek iyi bir hata ayıklama konsoluna sahiptir.

VS Kodu, çoğu zaman, React Native dostudur.

Bu noktada Chrome Geliştirici Araçları arkadaşınız vardır.

Aşağıdaki adımlar sizi console.logbildirimlerinizi görebileceğiniz Chrome Geliştirici Araçları'na yönlendirmelidir .

adımlar

1. Henüz yapmadıysanız Google Chrome'u yükleyin
2. react-native run-androidVeya kullanarak uygulamayı çalıştırreact-native run-ios
3. Geliştirici menüsünü aç
   • Mac: ⌘+D iOS veya ⌘MAndroid iOS için
   • Windows / Linux: Android telefonu sallayın
4. seçmek Debug JS Remotely
5. Bu, hata ayıklayıcıyı Chrome'da başlatmalıdır
6. Chrome'da: Tools -> More Tools -> Developer Optionsve consolesekmede olduğunuzdan emin olun

Artık bir console.logifade yürütüldüğünde, bu ifadenin Chrome Geliştirici Araçları'nda görünmesi gerekir. Resmi belgeler burada .

React Native uygulamaları geliştirirken hata ayıklamak için kullandığım 3 yöntem var:

1. console.log(): konsolda gösterilir
2. console.warn(): uygulamanın altındaki sarı kutuda gösterilir
3. alert(): tıpkı web'de olduğu gibi bir istem olarak gösterilir

React Native Debugger'ı kullanmanızı tavsiye ederim. Bu komutu kullanarak indirip yükleyebilirsiniz.

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

veya

Sadece aşağıdaki bağlantıyı kontrol edin.

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

Mutlu Hacking!

Aynı sorun vardı: konsol mesajları XCode hata ayıklama alanında görünmüyordu. Benim app cmd-d hata ayıklama menüsünü getirmek için yaptım ve "Safari hata ayıklama" ayarlamıştı hatırladı.

Bunu kapattım ve çıkış mesajına bazı mesajlar yazdırıldı, ancak konsol mesajlarıma yazdırılmadı. Ancak, günlük iletilerinden biri şunları söyledi:

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

Bunun nedeni, projemi daha önce gerçek bir cihazda test etmek için şu komutla bir araya getirmiş olmamdı:

react-native bundle --minify

Bu, "dev-mode" olmadan paketlenmiştir. Geliştirici iletilerine izin vermek için --dev bayrağını ekleyin:

react-native bundle --dev

Ve console.log mesajları geri döndü! Gerçek cihaz için donatılacak değilseniz, yeniden noktaya unutma jsCodeLocationiçinde AppDelegate.m(ben yaptım!) Localhost'a.

Xcode Simulator'da [command + control + Z] tuşlarına basın, JS'de Uzaktan Hata Ayıkla'yı seçin, ardından Chrome geliştirici araçlarını açmak için [command + seçenek + J] tuşlarına basın.

Xcode Simülatörü Resim

bakınız: Hata ayıklama Yerli Apps Tepki

React-Native'de günlük almak çok kolay

Console.log ve console.warn kullanın

console.log('character', parameter)

console.warn('character', parameter)

Tarayıcı günlüğünde görüntüleyebileceğiniz bu günlük. Cihaz günlüğünü kontrol etmek veya üretim APK günlüğü demek istiyorsanız kullanabilirsiniz

adb logcat

adb -d logcat

Size yardımcı olabilecek tepki-native-xlog modülü, tepki-native için WeChat'ın Xlog'u . Xcode konsolunda ve günlük dosyasında çıktı alabilen Ürün günlük dosyaları hata ayıklamanıza yardımcı olabilir.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Geliştirme Zaman Kaydı

Geliştirme zamanı günlüğü için console.log () kullanabilirsiniz . Önemli bir şey, üretim modunda günlüğe kaydetmeyi devre dışı bırakmak istiyorsanız, uygulamanın Root Js dosyasına, böyle boş bir işlev atamanız yeterlidir - console.log = {} Uygulamada tüm günlük yayınlamayı tamamen devre dışı bırakacak, aslında üretimde gerekli olacak console.log olarak zaman alır.

Çalışma Süresi Günlüğü

Üretim modunda, gerçek kullanıcılar uygulamanızı gerçek zamanlı kullandıklarında günlükleri görmek de gerekir. Bu, hataların, kullanımın ve istenmeyen vakaların anlaşılmasına yardımcı olur. Bunun için piyasada birçok 3. taraf ücretli araç bulunmaktadır. Kullandığım bunlardan biri Logentries

İyi olan, Logentries'in React Native Module'a sahip olmasıdır . Bu nedenle, mobil uygulamanızla Çalışma süresi günlüğünü etkinleştirmeniz çok daha az zaman alacaktır.

Yaklaşık bir ay önce ortaya çıkan bir şey, "React Native App Oluştur", Expo uygulamasını kullanarak uygulamanızın mobil cihazınızda (kamera ile HERHANGİ) canlı olarak neye benzediğini göstermenizi sağlayan harika bir kaynaktır. . Sadece canlı güncellemeler değil, aynı zamanda web için geliştirirken olduğu gibi , daha önce React Native ile yaptığımız gibi tarayıcıyı kullanmak yerine , konsol günlüklerinizi terminalinizde görmenize izin verecektir .

Tabii ki, bu ortak plaka ile yeni bir proje yapmak zorunda kalacaksınız ... ancak dosyalarınızı taşımanız gerekiyorsa, bu bir sorun olmamalı. Bi dene.

Düzenleme: Aslında kamera gerektirmez. Bir QR kodunu taramak için söyledim, ancak sadece bir QR kodu ile değil, sunucunuzla senkronize etmek için bir şeyler de yazabilirsiniz.

Kullanırken yerel yerel uygulamanızda hata ayıklamak veya çıktı almak için iki seçenek vardır

Emülatör veya Gerçek Cihaz

İlk Kullanım Öykünücüsü için: kullanın

tepki yerel günlük android veya tepki yerel günlük ios

günlük çıktısını almak için

gerçek cihazda. cihazınızı sallayın

böylece menü uzaktan hata ayıklamayı seçtiğiniz yerden gelir ve tarayıcınızda bu ekranı açar. böylece günlük çıktınızı konsol sekmesinde görebilirsiniz.

Günlüğe kaydetme ve redux deposu için yerel hata ayıklayıcıyı kullan https://github.com/jhen0409/react-native-debugg

Sadece indirin ve yazılım olarak çalıştırın, ardından simülatörden Hata Ayıklama modunu etkinleştirin.

Herhangi bir bileşene sağlanan stili görmeye yardımcı olan krom geliştirici araçlarındaki öğe gibi diğer hata ayıklama özelliklerini destekler.

Redux dev araçları için son tam destek

1. Put console.log("My log text")Kodunuzdaki
2. komutuna git Çizgi araçları
3. kendini geliştirme klasöründe konumlandırın

Android'de:

• bu komutu yaz: React-native log-android

IOS'ta:

• bu komutu yaz: React-native log-ios

Cihazınızdan uzak js hata ayıklama seçeneğini kullanabilir veya ios için reat -native log-android ve reat -native log- ios kullanabilirsiniz.

console.log () kodunuzda hata ayıklamanın kolay yoludur, ancak herhangi bir durumu görüntülerken ok işlevi veya bind () ile kullanılması gerekir. Bağlantıyı faydalı bulabilirsiniz .

Bunu 2 yöntemle yapabilirsiniz

1> kullanarak uyar

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

2> Alert kullanarak Bu uyarıya ulaştığında her seferinde iyi değildir, o zaman pop her açıldığında açılır, eğer bunu yapmak tercih edilmezse

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Windows ve Android Studio kullanan kullanıcılar:

Android Studio'da Logcat altında bulacaksınız. Burada gösterilen çok sayıda günlük iletisi vardır, bu nedenle yalnızca "ReactNativeJS" için, yalnızca yerel yanıt uygulamanızda oluşturulan console.log iletilerinizi gösteren bir filtre oluşturmanız daha kolay olabilir.

Bu tür hata ayıklama sorunuyla karşılaşan her geliştirici, ben de karşı karşıya kaldım ve buna değindim ve çözüm başlangıç ​​seviyesinde benim için yeterli, bizimle rahat olanı denememize ve kullanmamıza yardımcı olan birkaç yolu kapsıyor

1. Console.log ile hata ayıklama
2. Nüklid ile kod (mantık) hata ayıklama
3. Kod (mantık) ile Chrome'da hata ayıklama
4. GUI'de hata ayıklamak için Xcode kullanma

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

Reactotron'u da kullanabilirsiniz, sadece günlüğe kaydetmekten çok daha fazla işlevsellik verecektir. https://github.com/infinitered/reactotron

Bunu başarmanın birkaç yolu var, onları listeliyorum ve bunları kullanırken de eksilerini dahil ediyorum. Kullanabilirsiniz:

1. console.logve dev araçlarından, Android Studio ve Xcode'dan uzaktan hata ayıklama seçeneğini devre dışı bırakmadan günlük bildirimlerini görüntüleyin. veya uzaktan hata ayıklama seçeneğini devre dışı bırakabilir ve krom geliştirici araçlarında veya vscode veya hata ayıklamayı destekleyen başka bir düzenleyicide günlüğe kaydetmeyi görüntüleyebilirsiniz, bu işlemi bir bütün olarak yavaşlatacağından dikkatli olmanız gerekir.
2. Kullanabilirsiniz, console.warnancak daha sonra mobil ekranınız, durumunuza göre mümkün olabilecek veya olmayabilecek tuhaf sarı kutularla doludur.
3. Karşılaştığım en etkili yöntem, üçüncü taraf bir araç olan Reactotron'u kullanmak . Farklı düzeylerde (hata, hata ayıklama, uyarma, vb.) Her günlük deyimini görmenizi sağlayan basit ve yapılandırması kolay bir araçtır. Performansınızı yavaşlatmadan uygulamanızın tüm günlük kaydını gösteren GUI aracı sağlar.

Normal web için kullanılanla aynı şeyi kullanırsınız. consoleKomut ayrıca bu durumda çalışır. Örneğin, kullanabilirsiniz console.log(), console.warn(), console.clear()vb

consoleReact Native uygulamanızı çalıştırırken oturum açarken bu komutu kullanmak için Chrome Geliştirici'yi kullanabilirsiniz .

console.log() geliştirici menünüzden uzak js hata ayıklayıcısını kullandığınızda oturum açma konsolunuzu görmenin en iyi ve basit yoludur

Chrome Devtool, günlüğe kaydetmenin ve hata ayıklamanın en iyi ve en kolay yoludur.

Osx kullanıyorsanız ve bir emülatör kullanıyorsanız, console.logdoğrudan safari web denetçisinde görüntüleyebilirsiniz.

Safari => Geliştirme => Simülatör - [simülatör sürümünüz burada] => JSContext

Normalde hata ayıklamaya ihtiyaç duyduğumuz iki senaryo vardır.

1. Verilerle ilgili sorunlarla karşılaştığımızda ve bu durumda verilerimizle ve verilerle ilgili hata ayıklamalarımızı kontrol etmek istediğimizde console.log('data::',data)

   ve js hata ayıklama en iyi seçenektir.

2. Diğer durum, bileşenin stilini kontrol etmemiz gereken kullanıcı arayüzü ve stillerle ilgili sorunlardır, bu durumda tepki-dev-araçları en iyi seçenektir.

   her iki yöntem de burada belirtilmiştir.

console.log herhangi bir JS projesi için kullanılabilir. Uygulamayı localhost'ta çalıştırıyorsanız, açıkçası herhangi bir javascript projesine benzer. Ancak simülatörü veya herhangi bir cihazı kullanırken, bu simülatörü yerel ana bilgisayarımıza bağlayın ve konsolda görebiliriz.