React Native Dersleri 06 - Debugging

React Native'de Debug Etmek

1.Chrome'la Debug

Kodumuzu debug etmenin en kolay yolu Chrome'u kullanmaktır. Herhangi bir program indirmemize gerek kalmaz. 

• Android emülatörümüzde iOS için cmd+D, windows içinse ctrl+M tuşlarına basarak (veya cihazınızı sallayarak) android developer menüyü açıp "Debug Js Remotely" diyoruz. Bu komut bizi otomatik olarak chrome'a yönlendiriyor.
• Daha sonra sağ üst köşede ki "Chrome'u özelleştirin ve kontrol edin" kısmından Diğer Araçlar>Geliştirici Araçları'nı seçiyoruz.
• Eğer otomatik olarak  http://localhost:8081/debugger-ui/ ekranı gelmezse (port'unuz farklı olabilir burada sorun yaşıyorsanız) manuel olarak yazarak açabilirsiniz.

Ve geleneği bozmayarak böyle bir hata aldım:

Çözüm: 

Emülatörünüzde uzaktan hata ayıklamayı etkinleştirmeden önce,

http://localhost:8088/debugger-ui/ sayfasını chrome'da açın. Sonra uzaktan hata ayıklamayı etkinleştirin ve chrome sayfasına geri dönün.

Sonrasındaysa geliştirici araçlarını açıyoruz:

2-Nuclide'le Debug

Nuclide, Facebook tarafından geliştirilen bir Atom metin editörü eklentisidir. React Native uygulamaları için kullanışlıdır. (Nuclide indirmek için)

Nuclide'de debugging yapmak için:

1. Atom menüsünü tıklayarak Nuclide> Debugger> Show 
2. "Attack debugger..." butonuna tıklayın.
3. Çıkan popup'dan "React Native"i seçin.
4. “Workspace path (package.json içermelidir):” metin alanına, projenizin tam yolunu yazın.
5. "Ekle” (Attach) butonuna tıklayın.
6. Son olarak Uygulama geliştirici (app developer) menüsünü açın. “Debug JS Remotely” diyin. Chrome'u kullanarak uygulamada hata ayıklama yapıyorduysanız, önce "Stop Remote JS Debugging" demeniz ve Chrome'u kapatmanız gerekiyor.

Breakpoint'leri direkt olarak Atom'dan ayarlayabilirsiniz ve Call Stack'ten son durumu kontrol edebilirsiniz. Editörden ayrılıp Chrome'u açmanız gerekmez. Debug'ınızı editör üzerinden kolayca kontrol edebilirsiniz.

3-Console.log ile Debug

Terminal'de react-native log-ios ya da react-native log-android yazarak debug yapabilirsiniz.

➤Aynı zamanda kodlarımızı Xcode ve Android Studio ile de debug edebiliriz.

Debugger ya da Console.log

İkisi de kullanılabilir, duruma göre değişir ancak debugger çok fazla RAM/CPU kullanır.

+ Toggle Inspector

React native'in sunduğu built-in inspector özelliği sayesinde dinamik olarak görebiliriz.

Kaynakça :

https://stackoverflow.com/questions/40898934/unable-to-connect-with-remote-debugger
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
https://nuclide.io/static/images/docs/promo-debugger.png