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 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) düğüme 1 piksel bulanıklık ekler. Geliştirici Araçları, filter gibi mülkleri otomatik tamamlarken artık özelliği, anlamlı bir değere sahip olacak şekilde değiştirebilirsiniz. Böylece, değerin ne tür bir değişikliğe sahip olacağını önizleyebilirsiniz. birleştirebilirsiniz.

Şekil 1. Eski otomatik tamamlama davranışı. Geliştirici Araçları, filter: blur ile otomatik olarak tamamlanıyor ve tamamlanmayacak görüntü alanında görünür olduğundan emin olun.

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

İlgili Chromium sorunu: #931145

Komut menüsünden site verilerini temizleyin

Ctrl+Üst Karakter+P tuşlarına basın veya Command+Üst Karakter+P (Mac) tuşlarına basarak Komut Menüsü'nü açın ve Aşağıdakiler dahil olmak üzere sayfayla ilgili tüm verileri temizlemek için Site Verilerini Temizle komutu: Hizmet çalışanları, localStorage, sessionStorage, IndexedDB, Web SQL, Çerezler, Önbellek, ve Application Cache'dir.

3. Şekil. Site Verilerini Temizle komutu.

Site verileri Uygulama'dan temizlenebilir > Bir süre Depolama Alanını temizleyin. Yeni özelliği, Komut Menüsünden komutu çalıştırabiliyor.

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

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

İlgili Chromium sorunu: #942503

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

Önceki Uygulama > IndexedDB, yalnızca aşağıdaki dizinden IndexedDB veritabanlarını incelemenize izin verir ana kaynak. Örneğin, sayfanızda bir <iframe> varsa ve bu <iframe>, IndexedDB, veritabanını göremeyeceksiniz. Geliştirici Araçları, Chrome 75'ten itibaren IndexedDB'yi göstermektedir tüm kaynaklar için veritabanlarından yararlanabilirsiniz.

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

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 aşağıdaki işlemleri yapmak için metin sıkıştırma yöntemini kullanır: kaynakların aktarım boyutunu azaltır. Şu sayfaya ait kaynakların ne kadar büyük olduğunu görmek istiyorsanız: tarayıcı bunları açar. Önceden bu bilgiler yalnızca büyük istek seçeneği kullanılırken kullanılabiliyordu satır. Artık bu bilgilere fareyle Boyut sütununun üzerine gelerek erişebilirsiniz.

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 bir kesme 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ştirdiğinizde aslında 3 ayrılma noktası oluşturuyoruz. Önceden Ayrılma noktaları bölmesi, ayrı ayrı anlatacağım. Chrome 75 sürümünden itibaren her satır içi ayrılma noktası Ayrılma noktaları bölmesi.

8. Şekil. Eski davranış. Ayrılma noktaları bölmesinde yalnızca 1 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 veritabanındaki toplam kaynak sayısını veya önbellek.

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.

Ş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'dan devre dışı bırakabilirsiniz > Tercihler > Öğeler > Ayrıntılı İnceleme İpucunu Göster.

Ş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ı. Klavye, Düzenleyici'ye gittiğinde, Sekme tuşu eski olduğu için buradan dışarı çıkamıyordu girinti için kullanılır. Varsayılan davranışı geçersiz kılmak ve odağı taşımak için Sekme tuşunu kullanmak istiyorsanız Ayarlar > Tercihler > Kaynaklar > Sekmenin Odağı Taşır'ı 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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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