Bu öğretici sayede Chrome Developer Tools içindeki Uygulama sekmesini kullanarak bir Web Uygulamasının kaynaklarını nasıl inceleyeceğini açıklayacağım. Özellikle Yerel Depolama, Oturum Depolama ve IndexedDB gibi farklı depolama seçenekleri odaklanmaktadır. Veri yönetimi, Service Worker'ı kullanarak depolama ve Çerezlerin yönetimi de ele alınmaktadır. Depolama yönetiminin optimize edilmesiyle Web Uygulamanın daha verimli çalıştığından emin olabilirsin.
Önemli Bulgular
- Uygulama sekmesi Web Uygulamanın analizi ve optimize edilmesi için merkezi bir araçtır.
- Manifest dosyası, Service Worker, depolama seçenekleri ve Çerezleri doğrudan tarayıcıda inceleyebilirsin.
- Bu depolama seçeneklerini silme ve sıfırlama hata ayıklama ve performans optimizasyonunda yardımcı olabilir.
Adım Adım Kılavuz
Uygulama Sekmesine Erişim
Uygulama Sekmesini açmak için sayfanıza git ve F12 tuşuna bas veya sağ tıklayarak "İncele" seçeneğini seç. Developer Tools içinde "Uygulama" sekmesini bulacaksınız, bu sekme sizin Web Uygulamanızın kullandığı çeşitli kaynaklara genel bir bakış sunar.
Manifest Dosyasının İncelenmesi
Uygulama Sekmesinde "Manifest" bölümünü kontrol ettiğinden emin ol. Burada Web Uygulamanın manifest dosyasını görebilir ve ikonlar, isimler ve açıklamalar gibi doğru bilgileri kontrol edebilirsin. Bu özellikle ilerici Web Uygulamaları geliştiriyorsan önemlidir.
Service Worker'ın Kullanımı
Sıradaki adım Service Worker'ın incelenmesidir. Bu, Web Uygulamanın çevrimdışı çalışması için kritiktir. Kayıtlı Service Worker'ları görmek ve Push Bildirimleri veya Senkronizasyon gibi işlevlerini test etmek için "Service Workers" bölümüne tıkla.
Çevrimdışı İşlevselliği Test Etme
Çevrimdışı işlevselliğin test edilmesi önemlidir. Çevrimdışı modu etkinleştirip sayfayı yeniden yükleyerek davranışını gözlemleyebilirsin. İyi tasarlanmış bir Web Uygulaması bu durumda da çalışmalı ve çevrimdışı olduğunda uygun bilgiler vermelidir.
Depolama Analizi
Şimdi "Depolama" bölümüne geç. Burada Ön bellek depolama, Yerel Depolama, Oturum Depolama ve IndexedDB hakkında genel bir bakış elde edersin. Bu depolama seçenekleri verileri farklı ziyaretler veya oturumlar arasında saklamak için çok önemli bir rol oynamaktadır.
Saklanan Verileri Temizleme
İlgili kutucukları işaretleyerek tüm saklanan verileri silebilir ve ardından "Site Verilerini Temizle" seçeneğini seçebilirsin. Bu, eski veya hatalı verilerden kaynaklanan sorunları gidermede yardımcı olabilir.
Yerel Depolama ile Çalışma
Şimdi Yerel Depolama alanına git ve bazı değerler ayarla. Yeni bir giriş oluşturmak için konsolda localStorage.setItem('anahtar', 'değer'); kullanarak öğeyi ekleyebilir ve ardından Değer Depolama alanını güncelleyerek değişiklikleri görebilirsin.
Yerel Depolamadaki Değerleri Değiştirme
Bu alanda değerleri doğrudan değiştirebilirsin. Bir değeri düzenlemek için üzerine çift tıkla. Metin formatında JSON girebileceğinizi unutma, bu sayede daha karmaşık verileri depolayabilirsin.
Oturum Depolama Kullanımı
Oturum Depolama, Yerel Depolama ile benzerdir, ancak kişiye özeldir ve sekme veya tarayıcı kapatıldığında silinir. Bu özelliği birkaç değer ekleyerek test edebilir ve oturumunuz boyunca bunları kontrol edebilirsin.
Çerezlerin İncelenmesi
Web uygulamanızın alanında "Çerezler"e tıklayarak ayarlanan çerezleri görebilirsiniz. Bu çerezlerin değerlerini kontrol edebilir, değiştirebilir veya hatta silebilirsiniz. Özellikle kullanıcı oturumları veya kimlik doğrulamayla ilgili sorunlar yaşıyorsanız bu önemlidir.
Ön Bellek Depolama Genel Bakışı
Ön bellek depolama, uygulamanızın kullandığı tüm önbelleğe alınmış dosyalara bir bakış sunar. Bu, çevrimdışı kullanılabilir dosyaları anlamanıza ve gerekirse güncellenmesi gerekenleri belirlemenize yardımcı olur.
Arka Planda Hizmetlerin Kullanımı
Web uygulamanızın bildirimler veya arka plan senkronizasyonu gibi özellikler kullanıyorsa, bunları "Arka Planda Hizmetler" altında bulabilirsiniz. Bu özellikler, kullanıcı deneyimini geliştirmek için bu özellikleri kullanan PWA'lar için özellikle önemlidir.
Çerçeveler ve iFrame'lerin Analizi
Web uygulamanızda iFrame'ler veya çerçeveler kullanıyorsanız, "Çerçeveler" bölümünde yüklenen kaynakları kontrol edebilirsiniz. iFrame'lerden hangi dosyaların yüklendiğini ve olası sorunların olup olmadığını buradan görebilirsiniz.
Özet
Bu kılavuzda, Chrome Geliştirici Araçları'ndaki Uygulama Sekmesi'nin çeşitli işlevlerini nasıl kullanabileceğinizi öğrendiniz. Manifesto, Service Worker'ların kullanımı, farklı depolama seçenekleri ve çerez yönetimi hakkında genel bir bilgi edindiniz. Bu kaynakların düzenli olarak analiz edilip optimize edilmesiyle web uygulamanızın performansını önemli ölçüde artırabilirsiniz.
Sık Sorulan Sorular
Uygulama Sekmesine nasıl erişebilirim?F12'ye basın veya bir sayfaya sağ tıklayın ve "İncele"yi seçin.
Yerel Depolama ile Oturum Depolama arasındaki fark nedir?Yerel Depolama verileri kalıcı olarak saklarken, Oturum Depolama yalnızca tarayıcı oturumu boyunca geçerlidir.
Çerezleri Uygulama Sekmesi üzerinden nasıl silebilirim?Çerezler" bölümüne gidin ve alan adını seçin, ardından çerezleri görüntüleyip silebilirsiniz.
Web uygulamamın çevrimdışı işlevselliğini nasıl test edebilirim?Ağ alanındaki Çevrimdışı Mod'u etkinleştirin ve sayfayı yeniden yükleyerek çevrimdışı işlevselliğini kontrol edebilirsiniz.
Service Worker nedir?Service Worker, tarayıcının arka planda yüklediği ve çevrimdışı işlevselliği ve önbelleğe alma işlevselliğini sağlamak için ağ istekleri üzerinde kontrol sağlayan bir betiktir.
