Uygulama uygulama simülatöründe çalışırken React Native ile React kodunda nasıl hata ayıklanır?

Cmd+DSimülatör içinden. Chrome açılır ve oradan Geliştirici Araçlarını kullanabilirsiniz.

Düzenle:

Bu, artık yardım belgelerine bağlanmıştır .

Yerel Uygulamalarda Hata Ayıklama

Reaksiyon uygulamanızın javascript kodunda hata ayıklamak için aşağıdakileri yapın:

1. Uygulamanızı iOS simülatöründe çalıştırın.
2. Basın Command + Dve bir web sayfası http: // localhost: 8081 / debugger-ui adresinde açılmalıdır . (Yalnızca şimdilik Chrome) veyaShake Gesture
3. Daha iyi bir hata ayıklama deneyimi için Yakalanan İstisnalarda Duraklat'ı etkinleştirin .
4. Command + Option + IChrome Geliştirici araçlarını açmak için basın veya View-> Developer-> ile açın Developer Tools.
5. Artık normalde yaptığınız gibi hata ayıklayabilirsiniz.

İsteğe bağlı

Google Chrome için React Geliştirici Araçları uzantısını yükleyin . Bu React, geliştirici araçları açıkken sekmeyi seçerseniz görünüm hiyerarşisinde gezinmenizi sağlar .

Canlı Yeniden Yükleme

Canlı Yeniden Yüklemeyi etkinleştirmek için aşağıdakileri yapın:

1. Uygulamanızı iOS simülatöründe çalıştırın.
2. Düğmesine basın Control + Command + Z.
3. Artık görecek Enable/Disable Live Reload, Reloadve Enable/Disable Debuggingseçenekler.

Bir Android Uygulaması için, Genymotion kullanıyorsanız tuşuna basarak menüyü değiştirebilirsiniz CMD + m, ancak bunu yaparak menüde etkinleştirmeniz gerekebilir.

• Widget untick
• Chrome'da hata ayıklama'yıCMD + m tıklayarak etkinleştirin

Diğer cevaplara ek olarak. Reaug-native hata ayıklayıcı deyimini kullanarak hata ayıklayabilirsiniz

misal:

debugger; //breaks execution

Bunun çalışması için chrome dev araçlarınızın açık olması gerekir

Windows'da android cihaz kullanarak hata ayıklamak istiyorsanız, sadece bir komut istemi açın ve yazın (adb'nizin düzgün çalıştığından emin olun)

adb shell input keyevent 82

görüntü gibi bir ekran isteyecektir

sonra seçin

debug JS Remotely

otomatik olarak yeni bir pencere açılacaktır. sonra denetleme elemanını açın veya konsol için F12 tuşuna basın.

Bu programı deneyin: https://github.com/jhen0409/react-native-debugger

Çalışır: windows, osxvelinux .

Destekler: react native veredux

Ayrıca, sanal bileşen ağacını inceleyebilir ve uygulamaya yansıyan stilleri değiştirebilirsiniz.

cmd ⌘+ Dgarip bir şekilde benim için çalışmadı. İOS simülatöründe ctrl+ cmd ⌘+ düğmesine basmak Zbenim için hata ayıklama tarayıcı penceresini başlattı.

Açılan ekran budur:

Daha fazla ayrıntı burada.

Debian 8'de (Jessie) reaktif yerel 0.40.0 hata ayıklama , uygulamanız android simülatöründe çalışırken Chromium veya Firebug'daki http: // localhost: 8081 / debugger- ui'ye giderek yapılabilir . Uygulama içi geliştirici menüsüne erişmek için, burada belirtildiği gibi başka bir terminal penceresinde aşağıdaki komutu çalıştırın :

adb shell input keyevent 82

Önceki cevaplar hakkında yorum yapmak için yeterli itibarım yok ki bu harika. :) İşte tepki yerli uygulama geliştirirken hata ayıklama bazı yolları.

1. Canlı yeniden yükleme

   tepki-yerel changes + R tuşları ile değişikliklerinizi görmek için süper kolaylaştırır, hatta sadece canlı yeniden yükleme etkinleştirmek ve bekçi simülatörü son değişikliklerle "yenileyecek". Bir hata alırsanız, o kırmızı ekrandan satır numarasından bir ipucu alabilirsiniz. Bir çift geri alma işlemi sizi tekrar çalışma durumuna döndürür ve yeniden başlar.

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

   Kendimi programın çalışmasına izin vermeyi ve bir debuggerkırılma noktası eklemek yerine bazı bilgileri günlüğe kaydetmeyi tercih ediyorum . (zor hata ayıklayıcı, harici paketler / kütüphanelerle çalışmaya çalışırken yararlıdır ve otomatik tamamlama ile birlikte gelir, böylece başka hangi yöntemleri kullanabileceğinizi bilirsiniz.)

3. Enable Chrome Debuggingdebugger;programınızda kırılma noktası ile .

Peki, karşılaştığınız hataların türüne ve hata ayıklama tercihlerinize bağlıdır. Çoğu için undefined is not an object (evaluating 'something.something'), yöntem 1 ve 2 benim için yeterince iyi olacaktır.

Dış kütüphaneler veya diğer geliştiriciler tarafından yazılan paketlerle uğraşmak, hata ayıklamak için daha fazla çaba gerektirecektir. Chrome Debugging

Bazen tepki-yerel platformun kendisinden geliyor, bu nedenle tepki-yerel konular için googling kesinlikle yardımcı olacaktır.

umarım bu birisine yardım eder.

Bunun yerine, Windows'ta Cmd+MAndroid Emulator Press için F10. Emülatör tüm yerel tepki ayıklama seçeneklerini göstermeye başlar.

adb logcat *:S ReactNative:V ReactNativeJS:V

android günlük için terminalde çalıştırın.

Microsoft Visual Code kullanıyorsanız, React Native Tools uzantısını yükleyin. Daha sonra sadece istenen satır numarasını tıklayarak kesme noktaları ekleyebilirsiniz. Uygulamayı kurmak ve hatalarını ayıklamak için şu adımları izleyin:

Kullanıyorsanız, Hata ayıklama JS'yi öykünücüde etkinleştirmeyi unutmayın.

Android için: Menüyü görüntülemek için Ctrl + M (emülatör) veya telefonu sallayın (Cihazda).

İOS için: Cmd + D veya menüyü görüntülemek için Telefonu sallayın

Kromunuz olduğundan emin olun.

Görünen menüde JS'de Uzaktan Hata Ayıkla Seçeneği'ni seçin.

Chrome localhost'ta otomatik olarak açılacak: 8081 / debugger-ui. Bu bağlantı ile manuel olarak hata ayıklayıcıya da gidebilirsiniz.

Orada konsol ortaya ve kaydedilen günlükleri görebilirsiniz.

Bana göre React-Native üzerinde hata ayıklamanın en iyi yolu "Reactotron" kullanmaktır .

Reactotron'u kurun ve bunları paketinize ekleyin. Json:

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

şimdi, sadece kodunuzda oturum açma meselesi. Örneğin:console.tron.log('debug')

1. Uygulamanızı simülatörde çalıştırın - tepki yerel çalıştırma-ios
2. Ctrl + d tuşlarına basın ve JS'da Uzaktan Hata Ayıkla'ya tıklayın

1. web sayfası http: // localhost: 8081 / debugger-ui adresinde açılmalıdır , URL değilse ve Chrome'da bu bağlantıya gidin
2. Sayfayı sağ tıklayın ve İncele'yi tıklayın; krom için geliştirici araçlarını açmalıdır

3. Üst menüdeki kaynaklara gidin ve sağ taraftaki dosya gezginde js sınıfı dosyanızı bulun

4. Görünüme kesme noktaları koyabilir ve görüntüde gördüğünüz gibi koddaki hataları ayıklayabilirsiniz.

Varsayılan olarak, ios simülatörüm tuş vuruşlarını almıyordu, bu yüzden cmd-D işe yaramadı. Simülatörün menüsünü kullanarak klavye ayarlarını açmak zorunda kaldım:

Donanım> Klavye> Klavye Bağlama

Şimdi cmd-D krom hata ayıklamasını başlattı.

Android uygulaması için. Ctrl + M tuşlarına basın uzaktan hata ayıklama js seçin url http: // localhost: 8081 / debugger-ui ile krom yeni bir pencere açacaktır . Artık uygulamada tarayıcıda hata ayıklayabilirsiniz

Dosya yolundaki bir boşluk olması önlerCmd + Dçalışmasını. Projemi alanı olmayan bir yere taşıdım ve sonunda Chrome hata ayıklayıcısını çalıştırdım. Bir böcek gibi görünüyor .

Hata ayıklamayı varsayılan olarak etkinleştirmek istiyorsanız:

import { NativeModules } from 'react-native';

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

Bunun Android'de çalışmasını sağlamak için:

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

Referans: Varsayılan olarak “JS'de Uzaktan Hata Ayıkla” etkin bir React Native uygulaması başlatın

Çok basit sadece iki komut

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

Bu menüyü Android emülatöründe göstermek istediğinizi varsayarsak

• Ardından, ⌘+mMac'teki Android öykünücüsünde bu geliştirici ayarları iletişim kutusunu açmayı deneyin .

• Gösterilmezse o zaman gidin AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• Ve sonra tekrar dene ⌘+m.

• Hala gösterilmiyorsa, çalışan emülatör ayarlarına gidin ve Send keyboard shortcuts tobirleşik giriş / açılır menüde seçeneği seçin Emulator controls (default).

• Ve sonra tekrar dene ⌘+m.

• Umarım bu yardımcı olur, benim için çalıştı.

Redux kullanıyorsanız, React Native Debugger'ı tavsiye ederim. Chrome cihazlarını içerir, ancak Redux cihazlarını ve React cihazlarını da içerir.

Redux Devtools : Bu, eylemlerinizi görüntülemenizi ve bunlar arasında ileri geri adım atmanızı sağlar. Ayrıca redux mağazanızı görüntülemenize izin verir ve önceki eylemi her eylem için güncellenmiş durumla otomatik olarak dağıtma özelliğine sahiptir, böylece bir dizi eylemde ileri geri adım attığınızda bunu görebilirsiniz.

React Devtools : Bu, belirli bir bileşeni, yani tüm sahne parçalarını ve bileşen durumunu incelemenizi sağlar. Bileşen durumunun bir boole olan parçası varsa, geçiş yapmak ve uygulamanız değiştiğinde nasıl tepki vereceğini görmek için tıklamanıza izin verir. Harika özellik.

Chrome Devtools Tüm konsol çıktılarınızı görmenize, kesme noktalarını kullanmanıza, hata ayıklayıcıda duraklatmanıza olanak tanır ; Standart hata ayıklama özellikleri. İşlemlerinizin Redux Devtools'ta listelendiği alanı sağ tıklayıp 'Ağ İncelemesine İzin Ver' seçeneğini belirlerseniz, API çağrılarınızı tatlı olan Chrome Devtools'un ağ sekmesinde inceleyebilirsiniz.

Sonuç olarak, hepsi bir yerde olması harika! Bunlardan birine ihtiyacınız yoksa, açıp kapatabilirsiniz. React Native Debugger'ı edinin ve hayatın tadını çıkarın.

Bu, yanıt yerel hata ayıklayıcı uygulamasını kullanmanın alternatif yoludur.

Aşağıdaki bağlantıyı kullanarak uygulama indirebilirsiniz kaynak kodu ile birlikte redux mağaza yönetmek için çok iyi bir uygulama.

tepki-doğal-ayıklayıcı

ve şimdi size yardımcı olmak için aşağıdaki bağlantıyı doğrudan kullanabilirsiniz.

krom geliştirici araçları

1. Emülatör kullanıyorsanız Ctrl+ M& simulator Cmd+ kullanınD

2. Tıklayın - Uzaktan hata ayıklama js

3. Google Chrome konsola git

Reactotron adında çok iyi bir hata ayıklayıcı adı da vardır. https://github.com/infinitered/reactotron

Bazı veri değerlerini görmek için hata ayıklama modunda olmanız gerekmez ve birçok seçenek vardır.

gerçekten yararlı bir göz atın. ;)

React-Native'de hata ayıklama çok daha kolaydır.

• IOS kullanımında hata ayıklamak için

cmd + d

ctrl + cmd + z (Simülatör için)

• Android'de hata ayıklamak için

Cihazı dokunarak sallayın (Geliştirici seçeneğinizin etkinleştirildiğinden emin olun)

1. Adım: Yeri debuggerDur komut gibi istediğiniz her zamankinden:

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

Bu kod bloğuna kontrol geldiğinde hata ayıklayıcıyı duraklatacaktır.

Adım 2: Basın Cmd+Düzerindeki iOS emülatörü ve Cmd+Müzerinde Android simülatörü . Gerçek bir cihazınız varsa cihazı dev menüsünü açmak için sallayın, cihazı sallamak istemiyorsanız bu blogu takip edin

3. Adım: Seçin Enable Remote JS Debugging, bu Chrome'u açacaktır

4. Adım: SeçinDeveloper Tools.

5. Adım: Hata ayıklayıcınız, kodunuzda Sourcesyazdığınız her yerde sekmede duraklatılır debugger. Konsola gidin ve hata ayıklamak istediğiniz tüm parametreleri yazın (kod bloğunda bulunur): Bir sonraki hata ayıklayıcı noktasına tekrar gitmek için Kaynaklar'a gidin -> Kod yürütmeyi sürdür düğmesine tıklayın (Sağ köşe mavi düğme)

Hata ayıklayıcıyı, komut dosyasını duraklatmak istediğiniz yere yerleştirin.

Hata ayıklamanın tadını çıkarın !!

Safari'de "JS'de Uzaktan Hata Ayıkla" özelliğini etkinleştirmek zorunda kalmadan uygulamanızın iOS sürümünde hata ayıklamak için kullanabilirsiniz, aşağıdaki adımları izlemeniz yeterlidir:

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

İlk önce ios simülatörünüzde, [command + D] tuşuna basarsanız bu ekranı görebilirsiniz.

Ardından JS'de uzaktan hata ayıkla düğmesini tıklayın.

Bunun ardından Native Debugger'ı Yanıtla sayfasını görebilirsiniz.

Ve sonra müfettişinizi açın [f12] ve konsol sekmesine gidin ve hata ayıklayın! :)

React Native 0.62 Yayınlandı - Resmi çözüm Flipper 🚀

Flipper , yerel olarak hata ayıklama modunu kullanmadan Android ve iOS Mobile hata ayıklama araçlarıdır.

RN 0.62'den beri (Bu bağlantıya bakın ), Flipper varsayılan projeyle başlatılır.

Flipper, hata ayıklama için birkaç eklentiye sahiptir. Eklentileri içerir Layout, Network,Shared preferences

Flipper'ın en büyük yararı da pek çok eklenti değildir, ancak Android / iOS cihaz konsolu hata ayıklamasını da kolayca görebilirsiniz.

Flipper da kilitlenme veya ağ reddetme konusunda sizi uyarır.

Düzen eklentisi erişilebilirlik modunu ve hedef modu içerir.

Uygulamanızda ham ağ isteğini / yanıtını da görebilirsiniz.