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

Kayce Basques

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

Bu sayfanın video sürümü

CSS işlevlerini otomatik olarak tamamlarken anlamlı hazır ayarlar

filter gibi bazı CSS özellikleri, değerler için işlevler alır. Örneğin, filter: blur(1px) bir düğüme 1 piksel bulanıklaştırma 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.

İlgili Chromium sorunu: #931145

Komut menüsünden site verilerini temizleyin

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 verileri bir süredir Uygulama > Depolama Alanını Temizle'den temizlenebiliyor. Chrome 75'teki yeni özellik, komutu Komut Menüsünden çalıştırabilmektir.

Tüm site verilerini silmek istemiyorsanız Uygulama > Depolama Alanını Temizle'den hangi verilerin silineceğini kontrol edebilirsiniz.

"Depolama Alanını Temizle"nin seçili olduğu "Uygulama" sekmesi.

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

Alakalı Chromium sorunu: #942503

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

Önceden Uygulama > IndexedDB, IndexedDB veritabanlarını yalnızca ana kaynaktan incelemenize olanak tanıyordu. Ö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ış. Sayfa, IndexedDB kullanan bir demo yerleştiriyor ancak görünür bir veritabanı yok.

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

Yeni davranış. Demonun veritabanları gösteriliyor.

6. Şekil. 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 bu bilgilere fareyle Boyut sütununun üzerine gelerek 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 ayrılma noktaları

Aşağıdaki kod satırına bir kod satırı durma 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 sürümünden itibaren her bir satır içi ayrılma noktası, Ayrılma 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ış. Ayırma noktaları bölmesinde 3 giriş var.

9. Şekil. 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ı.

10. Şekil. 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 sunuldu.

Ayrıntılı ipucu.

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

Bu ayrıntılı ipuçlarını artık Ayarlar > Tercihler > Öğeler > Ayrıntılı İnceleme İpucunu Göster bölümünden devre dışı bırakabilirsiniz.

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ı, Tab tuşu girinti için kullanıldığı için Düzenleyici'ye sekme tuşuyla girdikten sonra sekme tuşuyla bu moddan çı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 klavyede daha kolay gezinilebilir hale gelmesi 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 yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

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

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.