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 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.

Ş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.

Ş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).

Ş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.

Ş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.

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

Ş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ı, sayfanın kaynaklarını sıkıştırdıktan sonra bunların ne kadar büyük olduğunu 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.

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

İ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ı 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'ten itibaren her satır içi kesme noktası, Kesme noktaları bölmesinde kendi girişini alır.

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

Ş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.

Ş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.

Ş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.

Ş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 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şmenize, en yeni web platformu API'lerini test etmenize 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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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