Flutter uygulamalarında debugging mantığı #17

Merhaba bu konuda Flutter uygulamalarında debug yapma konusundan bahsedeceğim.

1- hata mesajlarını anlamak
2- "debug mode" kullanmak
3- flutter DevTools kullanmak



bu konu #17 numaralı mobil uygulama geliştirme serisi konusudur.

0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #1
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #2
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #3
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #4
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #5
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #6
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #7
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #8
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #9
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #10
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #11
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #12
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #13
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #14
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #15
Flutter & Dart Fundamentals | Örnek Quiz Uygulaması #16

son quiz uygulamasını yapanlar için o projeyi açsınlar yapmayanlar da inceleyebilir sorun değil. projeyi run without debugging yapıyorduk emülatörde önceden. diyelim ki run without debugging yaptık bir projede ve hataları aldık uygulamanın bir kısmında. hata mesajlarına iyi bakmamız gerek. bizim aldığımız hata mesajlarını kullanıcı almayacak development süreci sırasında olan aldığımız hatalar bunlar kullanıcı direkt crash yiyecek muhtemelen.

örneğin bir hata aldık

type 'String' is not a subtype of type 'int' in type cast See also: Handling errors in Flutter

diye bir hata bunun mesaja bakarak typecasting den kaynaklandığını anlıyoruz. ne yapacağız ? projede as String as int falan kullandığımız typecasting yaptığımız yerlere bakacağız. tabi bu her zaman yeterli olmayabilir. daha detaylı bir error'a ihtiyacımız var. paneli açıyoruz vscode da view>appearance>panel burada DEBUG CONSOLE sekmesini görebiliriz burada daha detaylı hatalar var. Hatta orada bu hatayla ilgili hangi widgetın hataya sebep olduğunu bile gösteriyor. questions_summary.dart:18 vermiş mesela. Tıkladığımızda bizi ilgili widgeta götürüyor orada da SummaryItem(data); kullanılmış mesela anlıyoruz SummaryItem ile ilgili olduğunu. DEBUG CONSOLE üzerinde yukarıya kaydırırsak bir sürü internal call göreceğiz bunlar bizle ilgili değil Flutter team yapıyor onları takmayın daha da yukarıya kaydırdığınızda en üst kısımda hangi widgetın ve hangi line da sıkıntı çıkıyor anlayabiliyoruz.




şu kısımda mesela 2 tane highlight almış yer var diyelim. direkt bunların yanında sizi o ilgili kod satırına götürecek. aslında String olan bir şeyi int e cast etmemizden dolayı olduğunu anlıyoruz mesela. yazmışız mesela gidiyoruz itemData'ya

görüyoruz mesela yani String olduğunu anlıyoruz. başka da bir key olsun question_index diye o da i olsun yani int. yani yazmamız gerektiğini anlıyoruz hatayı çözmek için. temel mantık bu.

Tekrar runladığımızda hatanın kaybolduğunu ve debug console üzerinde de ilgili yerde hata olmadığını anlıyoruz yani hatayı çözdük. Her zaman böyle direkt bulamayabiliriz ama nerden başlayacağımızla ilgili güzel bilgiler içeriyor o kısım.

Diyelim başka bir hata alıyoruz.


Bunun meali 0 ile 5 arasında değerleri olan bir liste(muhtemelen) ama index 6 oluyor rangeError yani sınır aşıldı 6 yok bundan. hatayı anladık. Olmayan bir liste elemanına erişmeye çalışıyor gibi.

1.adım hatayı anlamak +

2.adımda ise DEBUG CONSOLE inceleyelim
_QuestionsScreenState.build kısmında diye bir kısım highlight olmuş oraya bakıyoruz. Ve orası da bizi ilgili yere gönderiyor.

Şimdi farklı bir şeyden bahsedeceğim o da debug mode'da çalıştırmak. Run>Start Debugging

main.dart üzerinde main fonksiyonu üzerinden de Debug'a tıklayarak uygulamayı biraz daha yavaş çalıştırmış olacağız ama hata ayıklamak için ekstra bazı özellikleri bize sunacak.


*Kodlara breakpoint ekle
kod satırının sol kısmında tıklayarak ufak kırmızı bir nokta ekleyerek uygulamayı çalıştırdığımızda o kod satırına geldiğinde uygulama çalışmayı durduracak ve o sırada inceleme yapabiliyoruz. yani runtime kısmında. F5 ile veya continue diyerek devam edene kadar breakpointlerde duracak.


şu şekilde ekledik diyelim.çalıştırdık o anki değerleri inceleyebiliyoruz. üstüne gelince


şeklinde bunun bir list olduğunu ve 6 elemanlı olduğunu anlayabiliyoruz her birinin içeriğine gelerek değerlerini görebiliyoruz. textini, answerını hashCodeunu falan. currentQuestionIndex'in üzerine gelip sağ tıklayıp Add to watch diyerek sol kısımda açılan panelde WATCH kısmı altına da onu ekleyip currentQuestionIndex: 4 yazacak örneğin değerini direkt görebiliyoruz böylece soldan. Alt kısımdaki CALL STACK kısmı bize hangi metodların çağrıldığını o anki ana kadar gösterir.

3- Flutter DevTools



flutter developer tools önemli. tavsiye ederim. Flutter DevTools şimdi yeni bir tarayıcı penceresinde açılacak ve daha sonra orada bir ton şey göreceksiniz.

Çeşitli sekmeler var uygulama ile ilgili logları potansiyel hataları falan göreceksiniz. Network requestlerini debug edebilirsiniz tabii bir önceki projede yoktu o. Performans için performance sekmesinde main fonksiyonunda Profile'e tıklayarak o modda çalıştırıp yapabilirsiniz. Performans ölçmek için yani çünkü diğer modlar daha yavaş olduğu için performans analizi hoş olmaz. Debugger kısmını yine kullanabilirsiniz zaten o bir önceki panel. Flutter Inspector sekmesinde widget analizi layoutları inceleme vs. işlemleri yapabiliyoruz.

Widget tree olarak görüyoruz epey kullanışlı olur UI için hatta seçip o Widgetlarla ilgili layout explorer da width height görerek çalışmalar yapabilirsiniz. Biraz mouse'u üzerinde tutarsanız Widget Object'ine erişirsiniz propertylerine bakıp inceleyebilirsiniz. Bütün widgetlar için geçerli bu mesela işte Column ve Row'u seçip inceleme yapabilirsiniz. Column ve Row için özellikle main cross gibi axis ayarlamalarını hızlı hızlı deneyebilirsiniz UI emulatörünize yansıtır.

Toggle select widget mode

bu modu kullanarak UI üzerinde emulatörde tıklayarak tıkladığınız yere sizi DevTools'daki tree deki ilgili widgeta götürmesi gibi bir güzelliği de mevcut. Sağ üst tarafta da Overlay guidelines to assist with fixing layout butonunu görebilirsiniz. Layout hatalarına domestos gibi çözüm üretir.

Test etme olaylarında Emulatör yeterli mi ?

Bir noktada iş emulatorden de çıkıyor gerçek cihazlarda test etme gereksinimi oluyor. Onun için size şöyle birkaç makale bırakacağım flutter team tarafından hazırlanan bununla ilgili:
​

Okuduğunuz için teşekkür ederim. <3 Gauloran​