Geliştirici Araçları'ndaki Yenilikler (Chrome 75)

Kayce Basques
Kayce Basques
X GitHub

Merhaba! Chrome 75'teki Chrome Geliştirici Araçları'nda yapılan yenilikleri aşağıda bulabilirsiniz.

Bu sayfanın video sürümü

CSS işlevlerini otomatik tamamlarken anlamlı hazır değerler

filter gibi bazı CSS özellikleri, değer olarak işlevleri kullanır. Örneğin, filter: blur(1px) bir düğüme 1 piksellik bulanıklık ekler. filter gibi özellikleri otomatik tamamlarken DevTools artık özelliği anlamlı bir değerle dolduruyor. Böylece değerin düğümde ne tür bir değişikliğe yol açacağını önizleyebilirsiniz.

Eski otomatik tamamlama davranışı.

Şekil 1. Eski otomatik tamamlama davranışı. Geliştirici Araçları, filter: blur ile otomatik tamamlama yapıyor ve görüntü alanında herhangi bir değişiklik görünmüyor.

Yeni otomatik tamamlama davranışı.

Şekil 2. Yeni otomatik tamamlama davranışı. Geliştirici Araçları, filter: blur(1px) olarak otomatik tamamlıyor ve değişiklik görüntü alanında görünür hale geliyor.

İlgili Chromium sorunu: #931145

Komut menüsünden site verilerini temizleme

Komut Menüsü'nü açmak için Control+Shift+P veya Command+Shift+P (Mac) tuşlarına basın. Ardından, Site Verilerini Temizle komutunu çalıştırarak sayfayla ilgili tüm verileri temizleyin. Bu veriler arasında hizmet çalışanları, localStorage, sessionStorage, IndexedDB, Web SQL, çerezler, önbellek ve uygulama önbelleği bulunur.

Site Verilerini Temizle komutu.

Şekil 3. Site Verilerini Temizle komutu.

Site verilerini temizleme özelliği bir süredir Uygulama > Depolama alanını temizle bölümünde kullanılabiliyordu. Chrome 75'teki yeni özellik, komutu Komut Menüsü'nden çalıştırabilmektir.

Site verilerinin tümünü silmek istemiyorsanız Uygulama > Depolama Alanını Temizle bölümünden hangi verilerin silineceğini kontrol edebilirsiniz.

"Depolamayı Temizle" seçeneğinin belirlenmiş olduğu "Uygulama" sekmesi.

Şekil 4. Uygulama > Depolama alanını temizle'ye dokunun.

İlgili Chromium sorunu: #942503

Tüm IndexedDB veritabanlarını görüntüleme

Daha önce Uygulama > IndexedDB yalnızca ana kaynaktaki IndexedDB veritabanlarını incelemenize izin veriyordu. Örneğin, sayfanızda bir <iframe> varsa ve bu <iframe> IndexedDB kullanıyorsa veritabanlarını göremezsiniz. Chrome 75'ten itibaren Geliştirici Araçları, tüm kaynaklar için IndexedDB veritabanlarını gösterir.

Eski davranış. Sayfada IndexedDB kullanan bir demo yerleştiriliyor ancak herhangi bir veritabanı görünmüyor.

Şekil 5. Eski davranış. Sayfada IndexedDB kullanan bir demo yerleştiriliyor ancak herhangi bir veritabanı görünmüyor.

Yeni davranış. Demonun veritabanları görünür.

Şekil 6. Yeni davranış. Demonun veritabanları görünür.

İlgili Chromium sorunu: #943770

Fareyle üzerine gelerek bir kaynağın sıkıştırılmamış boyutunu görüntüleme

Ağ etkinliğini incelediğinizi varsayalım. Siteniz, kaynakların aktarım boyutunu küçültmek için metin sıkıştırma kullanıyor. Sayfa kaynaklarının, tarayıcı tarafından sıkıştırması açıldıktan sonra ne kadar yer kapladığını görmek istiyorsunuz. Daha önce bu bilgiler yalnızca büyük istek satırları kullanılırken kullanılabilir durumdaydı. Artık Boyut sütununun üzerine gelerek bu bilgilere erişebilirsiniz.

Bir kaynağın sıkıştırılmamış boyutunu görüntülemek için fareyle Boyut sütununun üzerine gelme

Şekil 7 Bir kaynağın sıkıştırılmamış boyutunu görüntülemek için fareyle Boyut sütununun üzerine gelme

İlgili Chromium sorunu: #805429

Kesme noktası bölmesinde satır içi kesme noktaları

Aşağıdaki kod satırına kod satırı kesme noktası eklediğinizi varsayalım:

document.querySelector('#dante').addEventListener('click', logWarning);

DevTools, bir süredir satırın başında, document.querySelector('#dante') çağrılmadan önce veya addEventListener('click', logWarning) çağrılmadan önce gibi bir kesme noktasında tam olarak ne zaman duraklatılması gerektiğini belirtmenize olanak tanıyordu. Üçünü de etkinleştirirseniz 3 kesme noktası oluşturmuş olursunuz. Daha önce Kesme Noktaları bölmesinde bu 3 kesme noktasını ayrı ayrı yönetemiyordunuz. Chrome 75'ten itibaren her satır içi kesme noktası, Kesme Noktaları bölmesinde kendi girişine sahip olur.

Eski davranış. Kesme noktaları bölmesinde yalnızca bir giriş vardır.

Şekil 8 Eski davranış. Ayrılma noktaları bölmesinde yalnızca 1 giriş vardır.

Yeni davranış. Ayrılma noktaları bölmesinde 3 giriş var.

Şekil 9. Yeni davranış. Ayrılma noktaları bölmesinde 3 giriş var.

İlgili Chromium sorunu: #927961

IndexedDB ve önbellek kaynak sayıları

IndexedDB ve Önbellek panolarında artık bir veritabanı veya önbellekteki toplam kaynak sayısı gösteriliyor.

IndexedDB veritabanındaki toplam giriş sayısı.

Şekil 10. IndexedDB veritabanındaki toplam giriş sayısı.

İlgili Chromium sorunları: #941197, #930773, #930865

Ayrıntılı inceleme ipucunu devre dışı bırakma ayarı

Chrome 73'te İnceleme modundayken ayrıntılı ipuçları kullanıma sunuldu.

Ayrıntılı bir ipucu.

Şekil 11. Renk, yazı tipi, kenar boşluğu ve kontrastı gösteren ayrıntılı bir ipucu.

Artık bu ayrıntılı ipuçlarını Ayarlar > Tercihler > Öğeler > Ayrıntılı İnceleme İpucunu Göster'den devre dışı bırakabilirsiniz.

Minimal bir ipucu.

Şekil 12. Yalnızca genişlik ve yüksekliği gösteren minimal bir ipucu.

İlgili Chromium sorunu: #948417

Kaynaklar paneli düzenleyicisinde sekme girintisini açıp kapatma ayarı

Erişilebilirlik testi, Düzenleyici'de sekme tuzağı olduğunu ortaya çıkardı. Klavye kullanıcısı Düzenleyici'ye sekme tuşuyla girdikten sonra Sekme tuşu girinti için kullanıldığından sekme tuşuyla çıkamıyordu. Varsayılan davranışı geçersiz kılmak ve odağı taşımak için Sekme tuşunu kullanmak istiyorsanız Ayarlar > Tercihler > Kaynaklar > Sekme Tuşuyla Odağı Taşıma'yı etkinleştirin.

Geliştirici Araçları kullanıcı arayüzünün klavye ile daha kolay gezilebilmesi için son zamanlarda çok çalışıldı. Daha fazla bilgi edinmek için Rob'un Navigate Chrome DevTools With Assistive Technology (Yardımcı Teknolojiyle Chrome Geliştirici Araçları'nda Gezinme) başlıklı makalesine göz atın.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.