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

Kayce Basques

Merhaba! Chrome 75'teki Chrome Geliştirici Araçları'nda yenilikler:

Bu sayfanın video sürümü

CSS işlevleri otomatik tamamlanırken 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. DevTools, filter gibi özellikleri otomatik tamamlarken 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.

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

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

Ş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'den hangi verilerin silineceğini kontrol edebilirsiniz.

Ş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 IndexedDB veritabanlarını ana kaynaktan 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.

Şekil 5. Eski davranış. Sayfa, IndexedDB kullanan bir demoyu yerleştiriyor ancak herhangi bir veritabanı görünmüyor.

Ş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. Sayfanın kaynaklarının, tarayıcı tarafından sıkıştırması açıldıktan sonra ne kadar yer kapladığını görmek istiyorsunuz. Bu bilgiler daha önce yalnızca büyük istek satırları kullanılırken sağlanıyordu. Artık 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 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ır. 3'ü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.

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

İlgili Chromium sorunu: #927961

IndexedDB ve önbellek kaynak sayıları

IndexedDB ve Cache bölmelerinde artık bir veritabanı veya önbellekteki toplam kaynak sayısı gösteriliyor.

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

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

Ş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 girdiğinde, 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.

Son zamanlarda, Geliştirici Araçları kullanıcı arayüzünün klavye ile daha kolay gezilebilmesi için ç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.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları İpuçları 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.