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.

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

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

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

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.

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

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.

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

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

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.

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.

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

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'ndaki more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir bölümüne giderek Geliştirici Araçları sorunlarını 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

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