Yerel Depolama Düzenleyici, mevcut site için localStorage ve sessionStorage girişlerini yönetmek için temiz bir tablo arayüzü sağlar. Tüm anahtar-değer çiftlerine göz atın, değerleri satır içi düzenleyin, yeni girişler ekleyin ve ihtiyacınız olmayanları silin. JSON değerleri kolay okuma için otomatik olarak algılanır ve biçimlendirilir. Her iki depolama türünü yönetmek için localStorage ve sessionStorage sekmeleri arasında geçiş yapın.
Web uygulamaları localStorage ve sessionStorage'da çok miktarda durum saklar — kullanıcı tercihleri, kimlik doğrulama tokenları, özellik bayrakları, A/B test atamaları, alışveriş sepeti içerikleri, form taslakları, önbelleğe alınmış API yanıtları ve UI durumu. Chrome DevTools'ta bu değerleri ayıklamak Uygulama sekmesine gitmeyi, Depolama bölümünü bulmayı ve sınırlı düzenleme yetenekleri olan temel bir anahtar-değer görüntüleyici kullanmayı gerektirir. Yerel Depolama Düzenleyici bunu sekmeli depolama değiştirme, satır içi düzenleme, JSON otomatik biçimlendirme ve toplu işlemler içeren özel amaçlı bir panele getirir. Tablo, her anahtar-değer çiftini anahtar adı ve değerle gösterir. JSON değerleri (son derece yaygın olan — JSON.stringify ile serileştirilmiş nesneler) otomatik olarak algılanır ve uygun biçimlendirme ve sözdizimi vurgulamasıyla görüntülenir. Yerinde düzenlemek için herhangi bir değere tıklayın — değişiklikler depolama API'sine anında yazılır. Temiz bir formla yeni girişler ekleyin veya girişleri tek tek veya toplu olarak silin.
Panelin üstündeki sekme düğmeleriyle localStorage ve sessionStorage arasında geçiş yapın. Her sekme giriş sayısını gösterir (örn. "localStorage (12)" / "sessionStorage (3)"). Her iki depolama türü de tek bir arayüzden yönetilir.
Yerinde düzenlemek için herhangi bir değer hücresine tıklayın. Basit değerler için yeni dizeyi yazın. JSON değerleri için düzenleyici, sözdizimi vurgulamalı biçimlendirilmiş bir metin alanına genişler. Değişiklikler depolama API'sine anında kaydedilir.
JSON değerleri (JSON.stringify ile serileştirilmiş nesneler ve diziler) otomatik olarak algılanır ve uygun girintilendirme ve sözdizimi vurgulamasıyla görüntülenir. Biçimlendirilmiş JSON'u doğrudan düzenleyin — kaydettiğinizde yeniden serileştirilir.
Yeni bir anahtar-değer çifti oluşturmak için "Giriş Ekle"ye tıklayın. Anahtar adını ve değeri (dize veya JSON) girin. Giriş mevcut alan için localStorage veya sessionStorage'a anında yazılır.
Satır silme düğmesiyle tek tek girişleri silin veya mevcut depolama türü için her girişi kaldırmak için "Tümünü Temizle"yi kullanın. Test sırasında uygulama durumunu sıfırlamak için yararlıdır.
Düzenleyicide yapılan değişiklikler uygulamada anında yansıtılır. Uygulama, kullanıcı etkileşiminde localStorage'dan bir değer okursa, bu değeri panelde düzenlemek uygulamanın bir sonraki okuduğu şeyi değiştirir — çoğu durumda sayfa yeniden yüklemeye gerek yoktur.
Uygulamanızın localStorage'da hangi değerleri sakladığını inceleyin. Kimlik doğrulama tokeni mevcut mu? Kullanıcı tercih nesnesi doğru yapılandırılmış mı? Eski bir önbelleğe alınmış değer beklenmeyen davranışa mı neden oluyor?
Uygulamayı ilk durumuna sıfırlamak için tüm localStorage'ı temizleyin — ilk çalıştırma deneyimlerini, onboarding akışlarını ve varsayılan yapılandırmaları diğer siteler için tarayıcı verilerini temizlemeden test etmek için yararlıdır.
Birçok uygulama özellik bayrağı değerlerini localStorage'da saklar. Bayrak yönetimi UI'sinden geçmeden veya yeniden dağıtmadan özellikleri etkinleştirmek veya devre dışı bırakmak için bunları doğrudan düzenleyin.
Farklı kullanıcı durumlarını simüle etmek ve uygulamanın her birini nasıl işlediğini test etmek için saklanan kullanıcı tercihlerini, tema ayarlarını, dil seçimlerini veya onboarding tamamlama bayraklarını düzenleyin.
Üçüncü taraf scriptlerinin (analitik, sohbet, reklam) alanınızın localStorage'ında hangi verileri sakladığını görün. Verileri gizlilik uyumluluğu ve beklenmeyen depolama kullanımı için denetleyin.
DevSuite Pro yüzen yuvasını açın ve Yerel Depolama Düzenleyici simgesine tıklayın. Mevcut alan için tüm localStorage girişlerini gösteren bir panel açılır.
Anahtar-değer tablosunda kaydırın. JSON değerleri otomatik olarak biçimlendirilir. Bunun yerine sessionStorage'ı görüntülemek için sekmeleri değiştirin.
Yerinde düzenlemek için herhangi bir değere tıklayın. JSON değerleri için biçimlendirilmiş bir düzenleyici görünür. Değişiklikler depolama API'sine anında kaydedilir.
Yeni bir anahtar-değer çifti oluşturmak için "Giriş Ekle"ye tıklayın. Kaldırmak için herhangi bir satırdaki silme simgesine tıklayın. "Tümünü Temizle" her şeyi kaldırır.
Depolama değerlerini düzenledikten sonra, uygulamanın değiştirilen verilere nasıl yanıt verdiğini görmek için sayfayla etkileşim kurun.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
