Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Merhaba! Chrome 75'te Chrome Geliştirici Araçları'ndaki yenilikleri burada bulabilirsiniz.

Bu sayfanın video sürümü

CSS işlevlerini otomatik tamamlarken anlamlı hazır ayar değerleri

filter gibi bazı CSS özellikleri, değer için işlev alır. Örneğin, filter: blur(1px), düğüme 1 piksel bulanıklık ekler. Geliştirici Araçları, filter gibi özellikleri otomatik tamamlarken özelliği artık anlamlı bir değerle doldurur. Böylece, düğümde değerde ne tür bir değişikliğin yapılacağını önizleyebilirsiniz.

Eski otomatik tamamlama davranışı.

Şekil 1. Eski otomatik tamamlama davranışı. Geliştirici Araçları, filter: blur ile otomatik olarak tamamlanıyor ve görüntü alanında hiçbir değişiklik görünmüyor.

Yeni otomatik tamamlama davranışı.

2. Şekil. Yeni otomatik tamamlama davranışı. Geliştirici Araçları, filter: blur(1px) ile otomatik olarak tamamlanıyor ve değişiklik görüntü alanında görünür durumda.

İlgili Chromium sorunu: #931145

Komut Menüsünden site verilerini temizleme

Komut Menüsü'nü açmak için Control+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basın. Ardından Site Verilerini Temizle komutunu çalıştırarak Service Works, localStorage, sessionStorage, IndexedDB, Uygulama Önbelleği, Web Önbelleği, Web Web Önbelleği ve Web WebWeb

Site Verilerini Temizle komutu.

3. Şekil. Site Verilerini Temizle komutu.

Site verilerini bir süredir Uygulama > Depolama Alanını Temizle seçeneğinden temizleyebilirsiniz. Chrome 75'in yeni özelliği, komutu Komut Menüsü'nden çalıştırabilmektir.

Tüm site verilerini silmek istemiyorsanız hangi verilerin silineceğini Uygulama > Depolama Alanını Temizle bölümünden kontrol edebilirsiniz.

"Clear Storage" (Depolama Alanını Temizle) seçeneğinin seçili olduğu "Application" (Uygulama) sekmesi.

4. Şekil. Uygulama > Depolama Alanını Temizle.

İlgili Chromium sorunu: #942503

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

Daha önce Application > IndexedDB, IndexedDB veritabanlarını yalnızca ana kaynaktan incelemenize imkan tanıyordu. Örneğin, sayfanızda bir <iframe> varsa ve <iframe> işlevi IndexedDB'yi kullanıyorsa bu veritabanının veritabanlarını göremezsiniz. Geliştirici Araçları, Chrome 75'ten itibaren tüm kaynaklar için IndexedDB veritabanlarını göstermektedir.

Eski davranış. Sayfa, IndexedDB kullanan bir demo yerleştiriyor, ancak görünür durumda bir veritabanı yok.

5. Şekil. Eski davranış. Sayfa, IndexedDB kullanan bir demo yerleştiriyor, ancak görünür durumda olmayan bir veritabanı var.

Yeni davranış. Demonun veritabanları görünür.

6. Şekil. Yeni davranış. Demonun veritabanları görünür.

İlgili Chromium sorunu: #943770

Fareyle üzerine gelindiğinde 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 özelliğini kullanmaktadır. Tarayıcı sıkıştırılmış dosyaları açtıktan sonra sayfa kaynaklarının ne kadar büyük olduğunu görmek istiyorsunuz. Önceden bu bilgiler yalnızca büyük istek satırları kullanılırken kullanılabiliyordu. Artık fareyle Boyut sütununun üzerine gelerek bu bilgilere erişebilirsiniz.

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

7. Şekil. 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 ayrılma noktaları

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

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

Geliştirici Araçları bir süredir bir ayrılma noktasında tam olarak ne zaman duraklatılacağını belirtmenizi sağlıyor. Örneğin, satırın başında, document.querySelector('#dante') çağrılmadan önce veya addEventListener('click', logWarning) çağrılmadan önce. Üçünü de etkinleştirirseniz 3 ayrılma noktası oluşturmuş olursunuz. Daha önce Ayrılma Noktaları bölmesi, bu 3 ayrılma noktasını ayrı ayrı yönetmenizi sağlamıyordu. Chrome 75 sürümünden itibaren her satır içi kesme noktası, Ayrılma Noktaları bölmesinde kendi girişine sahiptir.

Eski davranış. Kesme noktaları bölmesinde yalnızca bir giriş vardır.

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

Yeni davranış. Kesme noktaları bölmesinde 3 giriş vardır.

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

İlgili Chromium sorunu: #927961

IndexedDB ve Cache kaynak sayıları

IndexedDB ve Cache bölmeleri artık bir veritabanı veya önbellekteki toplam kaynak sayısını göstermektedir.

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

Ş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, Denetleme modundayken ayrıntılı ipuçları kullanıma sunuldu.

Ayrıntılı bir ipucu.

Şekil 11. Renk, yazı tipi, kenar boşluğu ve kontrast gibi bilgileri 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 seçeneğinden devre dışı bırakabilirsiniz.

Minimal bir ipucu.

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

İlgili Chromium sorunu: #948417

Kaynak paneli düzenleyicisindeki sekme girintisini açma/kapatma ayarı

Erişilebilirlik testi, Düzenleyici'de bir sekme tuzağı olduğunu ortaya çıkardı. Klavye kullanıcısı Düzenleyici'ye girdikten sonra, girinti için Sekme tuşu kullanıldığından hiçbir şekilde sekmeyle çıkamazdı. Varsayılan davranışı geçersiz kılmak ve Sekme tuşunu kullanarak odağı taşımak için Ayarlar > Tercihler > Kaynaklar > Sekme Taşıma Odaklarını Etkinleştir'i etkinleştirin.

Son zamanlarda DevTools kullanıcı arayüzünün klavyede daha kolay gezinilebilmesi için birçok çalışma yapıldı. Daha fazla bilgi için Rob'un Navigation Chrome DevTools with Assistive Technology (Yardımcı Teknolojiyle Chrome Geliştirici Araçlarında Gezinme) sayfasına göz atın.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.