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 yenilikler burada açıklanmıştır.

Bu sayfanın video sürümü

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

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. Geliştirici Araçları, filter gibi mülkleri otomatik tamamlarken artık mülkü anlamlı bir değerle doldurur. Böylece, düğümdeki değerin ne tür bir değişikliği olacağı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 herhangi 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üyor.

İlgili Chromium sorunu: #931145

Komut menüsünden site verilerini temizleyin

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 Service Worker, localStorage, sessionStorage, IndexedDB, IndexedDB, Web Sitesi Verilerini Temizle, Web SQL Web Sitesi Verilerini Temizle gibi sayfayla ilgili tüm verileri temizlemek üzere Site Verilerini Temizle komutunu çalıştırın.

Site Verilerini Temizle komutu.

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

İlgili Chromium sorunu: #942503

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

Ö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'yi kullanıyorsa bu alana ait 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 bir veritabanı yok.

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

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

6. Şekil. Yeni davranış. Demonun veritabanları gösteriliyor.

İ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 yöntemini kullanmaktadır. Tarayıcı tarafından açılan sayfada 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 bu bilgilere fareyle Boyut sütununun üzerine gelerek erişebilirsiniz.

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

7. Şekil. 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 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 şu gibi bir ayrılma noktasında tam olarak ne zaman duraklayacağını belirtmenizi sağlıyor: satırın başında, document.querySelector('#dante') çağrılmadan önce veya addEventListener('click', logWarning) çağrılmadan önce. Üçünü de etkinleştirirseniz aslında 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 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.

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 Önbellek 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ı.

10. Şekil. 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 sunulmuştur.

Ayrıntılı bir 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.

İlgili Chromium sorunu: #948417

Kaynaklar paneli düzenleyicisinde sekme girintisini açma/kapatma ayarı

Erişilebilirlik testi, Düzenleyici'de bir sekme tuzağı olduğunu ortaya çıkardı. Bir klavye kullanıcısı Düzenleyici'ye sekme girdikten sonra, girinti için Sekme tuşu kullanıldığından bunun dışına çıkamıyordu. Varsayılan davranışı geçersiz kılmak ve odağı taşımak için Sekme'yi kullanmak istiyorsanız Ayarlar > Tercihler > Kaynaklar > Sekmenin Odak 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'un Chrome Geliştirici Araçları'nda Yardımcı Teknolojiyle Gezinme sayfasına göz atın.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
Geliştirici Araçları'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.