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

Kayce Basques

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 olarak tamamlarken anlamlı hazır değerler

filter gibi bazı CSS özellikleri, değerler için işlevler alır. Örneğin, filter: blur(1px) bir düğüme 1 piksel bulanıklık ekler. filter gibi özellikleri otomatik olarak tamamlarken DevTools artık özelliği anlamlı bir değerle doldurur. Böylece, değerin düğümde nasıl bir değişiklik yapacağını önizleyebilirsiniz.

Eski otomatik tamamlama davranışı.

Şekil 1. Eski otomatik tamamlama davranışı. DevTools, filter: blur ile otomatik olarak tamamlanı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 olarak tamamlanıyor ve değişiklik görüntü alanında görülüyor.

Alakalı Chromium sorunu: #931145

Komut menüsünden site verilerini temizleme

Komut menüsünü açmak için Denetleyici+Üst Karakter+P veya Komut+Üst Karakter+P (Mac) tuşlarına basın ve ardından Site Verilerini Sil komutunu çalıştırarak sayfayla ilgili tüm verileri silin (ör. hizmet çalışanları, localStorage, sessionStorage, IndexedDB, Web SQL, çerezler, önbellek ve uygulama önbelleği).

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ünden kullanılabiliyor. Chrome 75'teki yeni özellik, komutu Komut Menüsünden çalıştırabilmedir.

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

"Depolama alanını temizle"nin seçili olduğu "Uygulama" sekmesi.

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

Alakalı Chromium sorunu: #942503

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

Daha önce Uygulama > IndexedDB, yalnızca ana kaynaktan 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 DevTools, tüm kaynaklar için IndexedDB veritabanlarını gösterir.

Eski davranış. Sayfada IndexedDB kullanan bir demo yerleştirilmiş ancak hiçbir veritabanı görünmüyor.

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

Yeni davranış. Demo&#39;nun veritabanları görünür.

Şekil 6. Yeni davranış. Demo'nun veritabanları görünür.

Alakalı Chromium sorunu: #943770

Fareyle üzerine gelindiğinde 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 azaltmak için metin sıkıştırma kullanıyor. Tarayıcı, sayfa kaynaklarını sıkıştırdıktan sonra kaynak boyutunu görmek istiyorsunuz. Daha önce bu bilgiler yalnızca büyük istek satırları kullanılırken mevcuttu. Artık fareyle Boyut sütununun üzerine gelerek bu bilgilere erişebilirsiniz.

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

Şekil 7. Fareyle Boyut sütununun üzerine gelerek bir kaynağın sıkıştırılmamış boyutunu görüntüleme.

İlgili Chromium sorunu: #805429

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

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

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

DevTools bir süredir, duraklatma noktasında tam olarak ne zaman duraklatılması gerektiğini belirtmenize olanak tanıyor. Örneğin, satırın başında, document.querySelector('#dante') çağrılmadan önce veya addEventListener('click', logWarning) çağrılmadan önce. Bunların üçünü de etkinleştirirseniz aslında 3 kesme noktası oluşturursunuz. Daha önce Duraklatma noktaları bölmesi, bu 3 duraklatma noktasını ayrı ayrı yönetmenize olanak tanımıyordu. Chrome 75'ten itibaren her satır içi kesme noktası, Kesme noktaları bölmesinde kendi girişini alır.

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ış. Bölme Ayrılma Noktaları bölmesinde 3 giriş var.

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

Alakalı Chromium sorunu: #927961

IndexedDB ve önbellek kaynak sayıları

IndexedDB ve Önbellek bölmeleri artık bir veritabanı veya önbellekte bulunan toplam kaynak sayısını gösterir.

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

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

Alakalı Chromium sorunları: #941197, #930773, #930865

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

Chrome 73'te İncele modunda ayrıntılı ipuçları kullanıma sunulmuştur.

Ayrıntılı 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ı Ayarlar > Tercihler > Öğeler > Ayrıntılı İnceleme İpucu'nu Göster bölümünden devre dışı bırakılabilir.

Minimal bir ipucu.

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

Alakalı Chromium sorunu: #948417

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

Erişilebilirlik testinde, Düzenleyici'de sekme tuşuyla ilgili bir tuzak olduğu tespit edildi. Klavye kullanıcıları, Düzenleyici'ye sekme tuşuyla girdikten sonra Sekme tuşu girinti için kullanıldığı için sekme tuşuyla bu alandan çıkamıyordu. Varsayılan davranışı geçersiz kılmak ve odak noktasını taşımak için Tab tuşunu kullanmak istiyorsanız Ayarlar > Tercihler > Kaynaklar > Tab tuşuyla odağı taşımayı etkinleştir'i etkinleştirin.

Son zamanlarda, Geliştirici Araçları kullanıcı arayüzünün klavyeyle daha kolay gezinilebilir hale getirilmesi için çok sayıda çalışma yapıldı. Daha fazla bilgi edinmek için Rob'ın Chrome Geliştirici Araçları'nda Yardımcı Teknolojilerle Gezinme başlıklı makalesine göz atın.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.