Flutter DevTools Hakkında Herşey

 


Herkese merhaba. Bu makalemde sizin için Flutter ile proje geliştirmeye başladığımdan beri karşıma çıkan Flutter DevTools ekranı ve sekmeleri ile ilgili bildiklerimi, bilmem gerekenleri ve yeni öğrendiklerimi derledim. Umarım hepimiz için faydalı olur. Hadi başlayalım.

Ben IDE olarak VsCode kullanıyorum bu yüzden DevTools ekranında buradan ulaşıyorum. Command Palette’ye DevTools yazarsak karşımıza geldiğini görebiliriz. Burada her bir sekmeyi ayrı ayrı da açabiliriz, hepsini aynı ekranda browserda web sayfası olarak da görüntüleyebiliriz, ki ben daha çok bu yöntemi tercih ediyorum. Aynı şekilde AndroidStudio’dan da benzer şekilde ulaşabiliriz.

Web Browser görünümü şu şekilde:



Bunun dışında terminale aşağıdaki komutları yazarak da DevTools’u açabiliyoruz.
flutter pub global activate devtools
flutter run --debug
devtools

DevTools’u önce ne olduğunu öğrenerek incelemeye başlayalım.

Flutter DevTools Nedir?

Flutter DevTools, uygulamanın performansını izlemek, hataları tespit etmek ve optimize etmek için kullanılan bir geliştirme aracıdır. Konularına göre çeşitli sekmeleri bulunur. Aşağıda hangi sekmenin ne için kullanıldığına dair bir tablo hazırladım. Sonrasında herbirini detaylıca anlatmaya çalışacağım.


Flutter DevTools — Connected App



Ne İşe Yarar?

Bu, DevTools’un Flutter uygulamaya bağlandığını gösteren ana ekrandır. Uygulama debug modunda çalışırken buradan hangi analiz araçlarının aktif olduğunu görebilirsin.

Burada yapabileceklerin:

  • Bağlantının aktif olup olmadığını kontrol edebilirsin.
  • Farklı profiler sekmelerine buradan yönlendirme yapabilirsin.
  • Eğer bağlantı koparsa, DevTools’u yeniden başlatıp tekrar bağlanabilirsin.

Inspector Sekmesi: Widget Ağacı ve UI Yapısı





Ne İşe Yarar?

Bu sekme, uygulamanın widget ağacını (widget tree) ve görsel yapılarını incelemeni sağlar. Eğer bir tasarım problemi yaşıyorsan veya istenmeyen padding, margin, alignment hataları varsa buradan kolayca çözebilirsin.

Kullanım Senaryoları:

  • Hangi widget’ın nerede olduğunu gör: Widget ağacındaki yapıyı inceleyerek, doğru widget’ı seçtiğinden emin ol.
  • Padding, margin ve alignment hatalarını analiz et: Yanlış hizalanmış veya ekranda kaymış öğeleri bul.
  • Layout hatalarını incele: SizedBox, Expanded, Flexible, Align, Positioned gibi widget'ların beklenmeyen davranışlarını tespit et.
  • Yerleşim problemlerini çöz: Column, Row, Stack gibi yapıların içindeki öğelerin nasıl konumlandığını anla.

Nasıl Kullanılır?

  1. “Select Widget Mode” butonuna tıkla (Inspector sekmesinin üstünde bir buton var, bunu açınca ekrandaki widget’lara tıklayarak doğrudan widget ağacında seçebilirsin).
  2. Hata aldığın veya incelemek istediğin widget’ı tıkla.
  3. İlgili widget’in detaylarını ve parent-child ilişkisini incele.
  4. Üzerine gelerek padding, margin ve alignment gibi detayları gör.

Çözüm Önerileri:

  • Boşluklarla ilgili bir hata mı var? Padding ve Margin değerlerini kontrol et.
  • Widget’ların içinde gereksiz boşluk mu var? Container içinde gereksiz width veya height değerleri olup olmadığını incele.
  • Öğe yanlış yerde mi konumlanıyor? Expanded ve Flexible gibi widget’ların nasıl davrandığını kontrol et.

İpucu:

  • Çok iç içe geçmiş widget ağacın mı var? Gereksiz Container, Padding veya Column kullanımları yerine daha basit yapılar oluştur.
  • Widget’ların yüklenme sırasını anlamak için “Show Guidelines” özelliğini aç.

Performance Sekmesi: UI Akıcılığı ve Jank Problemleri



Ne İşe Yarar?

Bu sekme, uygulamanın akıcılığını ve jank (takılma) problemlerini analiz etmene yardımcı olur. Eğer uygulaman kaydırma sırasında takılıyor, animasyonlar akıcı çalışmıyor veya frame drop yaşıyorsan burayı incelemelisin.

Kullanım Senaryoları:

  • Frame per second (FPS) değerini takip et. Uygulamanın ne kadar akıcı çalıştığını anlamanı sağlar. FPS değerlerin sürekli 60'ın altına düşüyorsa, uygulamanın akıcılığı bozuluyor demektir.
  • Jank, uygulamanın FPS (Frames Per Second) değerinin düşmesiyle meydana gelir ve genellikle uygulamanın takılmasına neden olur. Bunu tespit et. Hangi işlemlerin çerçeve düşüşüne neden olduğunu öğren. Ağır işlemleri optimize et.
  • UI ve Raster Thread’i incele. UI işlemlerinin ne kadar sürede işlendiğini ve hangi widget’ların ağır çalıştığını analiz et.

Nasıl Kullanılır?

  1. Performance sekmesini aç ve uygulamanı kullanmaya başla.
  2. Üstteki FPS grafiğini takip et.
  3. “Count Widget Builds” seçeneğini açarak hangi widget’ların fazla yeniden çizildiğini kontrol et.
  4. Sorunlu alanları tespit ettikten sonra performans iyileştirmeleri yap.

Çözüm Önerileri:

  • Sıkça yeniden çizilen widget’ları const olarak tanımla. const keyword’ü, widget’ın sadece ilk defa yaratıldığında inşa edilmesini sağlar. Bu, her yeniden çizimde widget’ın yeniden oluşturulmasını engeller ve performansı artırır.
  • Ağır işlemleri arka planda çalıştır (compute() veya Isolate kullan). Bu, UI thread’ini meşgul etmeden, işlemlerin arka planda gerçekleştirilmesini sağlar.
  • Eğer animasyonlar veya sıklıkla yeniden çizilen widget’lar varsa, RepaintBoundary kullanarak widget'ları ayrı bir ekran katmanına taşıyabilir ve yalnızca bu widget'ı yeniden çizebilirsin.
  • Animasyonlar takılıyorsa TweenAnimationBuilder veya AnimatedBuilderkullanarak gereksiz rebuild’leri engelle.
  • Uzun listelerle çalışıyorsan, ListView.builder kullanarak yalnızca ekranda görünen öğeleri render edebilirsin. Bu, performansı ciddi şekilde iyileştirir.
  • Uygulama içinde zaman alan işlemleri asenkron hale getir. Örneğin, veri yükleme ve API çağrılarını FutureBuilder veya StreamBuilder ile async olarak yönet.
  • setState() kullanırken dikkatli ol. Tüm widget ağacını yeniden render etmek yerine sadece değişiklik yapılan kısmı yeniden render et.
  • Özellikle Riverpod veya Provider kullanıyorsan, ValueListenableBuilderve Consumer ile yalnızca veri değiştikçe belirli widget’ları güncelleyebilirsin.

CPU Profiler Sekmesi (İleri Seviye Performans Analizi — CPU Kullanımı)



Ne İşe Yarar?

Bu sekme, uygulamanın CPU kullanımını analiz etmeni sağlar. Hangi fonksiyonların fazla işlem yaptığına ve CPU’yu nasıl etkilediğine dair detaylı bilgi verir.

Timeline (Zaman Çizelgesi):

  • CPU Profiler’deki Timeline bölümü, uygulamanın çalıştığı sırada hangi işlemlerin CPU’yu ne kadar süreyle kullandığını görmemizi sağlar. Bu zaman çizelgesi üzerinde, her bir CPU işleminin zamanlamalarını ve sürelerini inceleyebiliriz.
  • Zaman çizelgesindeki CPU Sampling verileri, hangi işlemlerin CPU’dan en fazla pay aldığını gösterir.

CPU Sampling (CPU Örnekleme):

  • CPU örnekleme, her saniye CPU’nun hangi fonksiyonları çalıştırdığını kaydeder. Bu veriler, her bir fonksiyonun veya işlem bloğunun CPU’yu ne kadar kullandığını belirlememizi sağlar.
  • CPU örneklemesi, uygulamanın farklı bölümleri arasındaki performans farklarını gösterir. Bazı bölümler daha fazla CPU tüketebilir ve bu durum, uygulamanın genel hızını etkileyebilir.

Flame Graph (Alev Grafiği):

  • Flame graph, uygulamadaki CPU kullanımının görsel bir temsilidir. Yüksek CPU tüketen fonksiyonlar daha geniş bloklar olarak görünür, bu da hangi işlemlerin daha fazla kaynak kullandığını kolayca görmemizi sağlar.
  • Flame Graph, fonksiyonların birbirine ne kadar bağlı olduğunu da gösterir, böylece bir fonksiyonun hangi diğer fonksiyonlara bağlı olduğunu ve bu ilişkilerin CPU üzerindeki etkisini analiz edebilirsin.
  • Bu grafik, uygulamandaki CPU darboğazlarını (yavaş çalışan veya fazla kaynak tüketen fonksiyonlar) hızlıca tespit etmeni sağlar.

Call Tree (Çağrı Ağacı):

  • Call Tree, uygulamadaki fonksiyonlar arasındaki ilişkileri gösterir. Bu, bir fonksiyonun diğer fonksiyonları nasıl çağırdığını ve CPU’yu nasıl kullandığını gösterir.
  • Çağrı ağacını kullanarak, CPU’yu fazla meşgul eden ana fonksiyonları veya alt fonksiyonları belirleyebilirsin.

Burada yapabileceklerin:

  • Hangi fonksiyonlar en çok CPU tüketiyor analiz et. Kodunun hangi bölümlerinin yavaş çalıştığını görebilirsin.
  • Flame chart’ı incele. Fonksiyonların çağrılma sırasını ve süresini gösteren detaylı bir grafik sunar.
  • Profiling yaparak optimize et. Uzun süren işlemleri izole ederek performans iyileştirmeleri yapabilirsin.

Memory Sekmesi (Bellek Kullanımı ve Hafıza Sızıntıları)



Ne İşe Yarar?

Bu sekme, uygulamanın RAM kullanımını analiz etmene ve olası bellek sızıntılarını tespit etmene yardımcı olur.

Burada yapabileceklerin:

  • Heap snapshot alarak bellek tüketimini izle. Bellekte hangi nesnelerin tutulduğunu ve hangi nesnelerin gereksiz yere kalıcı olduğunu görebilirsin.
  • Garbage Collector (GC) etkisini analiz et. Dart, otomatik bellek yönetimi yapar, ancak gereksiz nesnelerin RAM’de uzun süre kalıp kalmadığını buradan kontrol edebilirsin.
  • Nesne büyüklüklerini ve yaşam sürelerini analiz et. Eğer çok fazla büyük nesne bellekte tutuluyorsa, bunları optimize etmelisin.

İpucu:

  • Stateful widget’ları dispose() etmeyi unutma.
  • ChangeNotifier veya StreamController kullanıyorsan, onları manuel olarak kapatmalısın (dispose() çağırarak).

Debugger Sekmesi (Kod Hata Ayıklama)



Ne İşe Yarar?

Debugger sekmesi, hata ayıklamak, breakpoint eklemek ve değişkenleri incelemek için kullanılır. Kodunun belirli bir noktasında durup (breakpoint) değişkenleri ve UI durumunu analiz edebilirsin.

Burada yapabileceklerin:

  • Kodun belirli noktalarında durarak (breakpoint) değişkenleri ve kod akışını analiz et. Örneğin butona basınca widget doğru şekilde güncelleniyor mu?
  • Exception yakalamak ve hata kaynağını tespit etmek için kullan. Örneğin state yönetimi çalışıyor mu?
  • Hata mesajlarını detaylı olarak görüntüleyerek hangi fonksiyonun hataya neden olduğunu bul. Örneğin UI ile ilgili bir hata mesajı alıyor musun?

Nasıl Kullanılır?

  1. Kodunun ilgili satırına breakpoint ekle.
  2. Debugger sekmesini açarak kodun hangi aşamada olduğunu incele.
  3. Uygulamanın hangi veriyi işlediğini ve state’in nasıl değiştiğini canlı olarak izle.
  4. State değişimlerini ve widget rebuild’lerini adım adım takip et.

İpucu:

  • Kodun belirli satırlarına debugger() ekleyerek manuel olarak durdurabilirsin.
  • Hata mesajlarını detaylı görmek için “Exception Pause” modunu açabilirsin.
  • VS Code veya Android Studio’da breakpoint ekleyerek değişken değerlerini canlı olarak inceleyebilirsin.

Network Sekmesi (API Çağrıları ve HTTP Talepleri)



Ne İşe Yarar?

Bu sekme, uygulamanın yaptığı ağ isteklerini (HTTP çağrıları) analiz etmene yardımcı olur.

Burada yapabileceklerin:

  • Hangi API istekleri ne kadar sürüyor, detaylı analiz et.
  • Yanıt sürelerini ölç ve gereksiz API çağrılarını optimize et.
  • Hangi isteklerin başarısız olduğunu (status code: 400, 500) görüntüle.
  • JSON response’ları ve request’leri inceleyerek API verilerini doğrula.

İpucu:

  • Eğer çok fazla API çağrısı yapıyorsan, caching mekanizması (Hive, SharedPreferences, SQLite) kullanarak yükü azaltabilirsin.
  • GraphQL veya Firebase Firestore gibi verimli veri sorgulama yöntemlerine geçebilirsin.

Logging Sekmesi (Uygulama Günlükleri ve Hata Takibi)



Ne İşe Yarar?

Uygulamanın çalışma sürecinde log (günlük) mesajlarını detaylı bir şekilde gösterir.

Burada yapabileceklerin:

  • Hata mesajlarını ve stack trace’leri görüntüleyerek kodundaki sorunları tespit et.
  • API çağrıları, kullanıcı etkileşimleri ve sistem olayları gibi detayları log’lar üzerinden takip et.
  • Özel log mesajları ekleyerek hata ayıklamayı kolaylaştır.

İpucu:

  • print() yerine Logger kütüphanesini kullanarak detaylı ve renkli log mesajları oluşturabilirsin.

App Size Sekmesi (Uygulama Boyutu Analizi)



Ne İşe Yarar?

Bu sekme, Flutter uygulamanın toplam boyutunu ve hangi dosyaların en çok yer kapladığını analiz etmene yardımcı olur.

Burada yapabileceklerin:

  • Hangi paketler ve varlıklar (assets) en fazla yer kaplıyor tespit et.
  • Gereksiz büyüklükte olan kodları ve kütüphaneleri optimize et.
  • AOT (Ahead of Time) ve JIT (Just in Time) derleme farklarını analiz et.

İpucu:

  • flutter build apk --analyze-size komutunu çalıştırarak daha detaylı analiz yapabilirsin.
  • Web için flutter build web yaptıktan sonra dosya boyutlarını kontrol et.

Deep Links Sekmesi (Uygulama İçi Bağlantılar ve Yönlendirme)



Ne İşe Yarar?

Bu sekme, derin bağlantılar (deep links) kullanarak uygulamanın belirli sayfalarına doğrudan gitmeni sağlar.

Burada yapabileceklerin:

  • Uygulama içinde belirli sayfalara gitmek için deep link testleri yapabilirsin.
  • URL tabanlı yönlendirme yapılarını kontrol edebilirsin (örneğin Firebase Dynamic Links ile).
  • Flutter Navigator veya GoRouter gibi kütüphanelerle entegrasyonu doğrulayabilirsin.

İpucu:

  • Deep link yönlendirmelerinin çalışıp çalışmadığını test etmek için bu sekmeyi kullanabilirsin.
  • Firebase Dynamic Links veya App Links gibi sistemlerle uygulamana deep link desteği ekleyebilirsin.

Sonuç olarak Flutter DevTools, uygulamanın her köşesini keşfetmeni sağlayan süper güçlü bir araç. Inspector ile UI’daki hataları yakalayabilir, Performance sekmesiyle kare hızını ve yeniden oluşturma istatistiklerini analiz edebilir, CPU Profilersayesinde hangi işlemlerin sistemini zorladığını görebilir ve AppSize ile uygulamanın gereksiz yere şişip şişmediğini kontrol edebilirsin. Tüm bu araçları etkili kullanarak, uygulamanı daha hızlı, verimli ve optimize hale getirebilirsin. DevTools’u düzenli olarak takip etmek, sadece hataları düzeltmekle kalmaz, aynı zamanda kod kaliteni ve kullanıcı deneyimini de zirveye taşır. Kısacası, buradaki her sekme, projeni daha iyi bir hale getirmek için elinde olan güçlü birer araç. Haydi keşfetmeye devam!

Buraya kadar okuduğun için teşekkür ederim.

Beğendiysen takip etmeyi unutma.

Teşekkürler.

Selin.

zaman:
Labels: , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)