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

Jecelyn Yeen

Önizleme özelliği: Yeni CSS'ye Genel Bakış paneli

Sayfanızdaki CSS'de iyileştirilebilecek noktaları tespit etmek için yeni CSS'ye Genel Bakış panelini kullanın. Sayfanızın CSS'si hakkında rapor oluşturmak için CSS'ye Genel Bakış panelini açın ve ardından Genel bakış oluştur'u tıklayın.

Bilgileri daha ayrıntılı inceleyebilirsiniz. Örneğin, aynı rengi kullanan öğelerin listesini görüntülemek için Renkler bölümünde bir rengi tıklayın. Bir öğeyi tıklayarak Nesneler panelinde açın.

CSS'ye Genel Bakış paneli bir önizleme özelliğidir. Ekibimiz bu konudaki çalışmalarını sürdürüyor. Daha fazla iyileştirme için geri bildirimlerinizi bekliyoruz.

CSS'ye Genel Bakış paneli hakkında daha fazla bilgi edinmek için bu makaleyi okuyun.

CSS'ye Genel Bakış paneli

Chromium sorunu: 1254557

CSS uzunluğu düzenleme ve kopyalama deneyimi geri yüklendi ve iyileştirildi

Uzunluğu olan CSS mülkleri için CSS'yi kopyalama ve metin olarak düzenleme deneyimi geri yüklenir. Bu deneyimler son sürümde kullanılamaz.

Ayrıca, birimi sürükleyerek birim değerini ayarlayabilir ve açılır menüden birim türünü güncelleyebilirsiniz. Bu eklenti uzunluğu yazma özelliği, metin olarak düzenleme birincil deneyimini etkilemeyecektir.

Herhangi bir sorunla karşılaşırsanız lütfen goo.gle/length-feedback adresinden bildirin.

Bu özelliği Ayarlar > Deneysel > Stiller bölmesinde CSS uzunluğu oluşturma araçlarını etkinleştir onay kutusunu işaretleyerek devre dışı bırakabilirsiniz.

Chromium sorunları: 1259088, 1172993

Sekme güncellemelerini oluşturma

CSS prefers-contrast medya özelliğini taklit etme

CSS prefers-contrast medya özelliğini taklit etme

prefers-contrast medya özelliği, kullanıcının sayfada daha fazla veya daha az kontrast isteyip istemediğini algılamak için kullanılır.

Komut menüsünü açın, Oluşturma işlemini göster komutunu çalıştırın ve ardından CSS prefers-contrast medya özelliğini taklit et açılır menüsünü ayarlayın.

Chromium sorunu: 1139777

Chrome'un Otomatik Koyu Tema özelliğini taklit etme

Chrome'un Otomatik Koyu Modu etkinken sayfanızın nasıl göründüğünü kolayca görmek için DevTools'u kullanarak otomatik koyu modu taklit edin.

Chrome 96, Android'de otomatik koyu tema için kaynak denemesi sunar. Bu özellik sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde açık temalı sitelere otomatik olarak oluşturulmuş koyu bir tema uygular.

Komut menüsünü açın, Oluşturmayı Göster komutunu çalıştırın ve ardından Otomatik koyu modu taklit et açılır menüsünü ayarlayın.

Chrome'un Otomatik Koyu Tema özelliğini taklit etme

Chromium sorunu: 1243309

Stil bölmesinde tanımlamaları JavaScript olarak kopyalama

CSS kurallarını JavaScript özellikleri olarak kolayca kopyalamanız için bağlam menüsüne iki yeni seçenek eklendi. Bu kısayol seçenekleri özellikle JS'de CSS kitaplıklarıyla çalışan geliştiriciler için kullanışlıdır.

Stiller bölmesinde bir CSS kuralını sağ tıklayın. Tek bir kuralı kopyalamak için Tanımlamayı JS olarak kopyala'yı, tüm kuralları kopyalamak için Tüm tanımlamaları JS olarak kopyala'yı seçebilirsiniz.

Örneğin, aşağıdaki örnekte paddingLeft: '1.5rem' panoya kopyalanır.

Tanımlamayı JavaScript olarak kopyala

Chromium sorunu: 1253635

Ağ panelinde yeni Yük sekmesi

Ağ isteğini, yük içeren bir ağ isteği olarak incelerken Ağ panelindeki yeni Yük sekmesini kullanın. Daha önce, yük bilgileri Başlıklar sekmesinde yer alıyordu.

Ağ panelindeki Yük sekmesi

Chromium sorunu: 1214030

Özellikler bölmesinde mülklerin gösterilmesi iyileştirildi

Özellikler bölmesinde artık örneğin tüm özellikleri değil, yalnızca alakalı özellikler gösteriliyor. DOM prototipleri ve yöntemleri artık kaldırıldı.

Chrome 95'teki Özellikler bölmesi iyileştirmeleriyle birlikte artık alakalı mülkleri daha kolay bulabilirsiniz.

Özellikler bölmesinde mülklerin gösterilmesi

Chromium sorunu: 1226262

Konsol güncellemeleri

Konsolda CORS hatalarını gizleme seçeneği

Konsol'da CORS hatalarını gizleyebilirsiniz. CORS hataları artık Sorunlar sekmesinde raporlandığından, Console'da CORS hatalarını gizlemek, dağınıklığı azaltmanıza yardımcı olabilir.

Konsol'da Ayarlar simgesini tıklayın ve Konsolda CORS hatalarını göster onay kutusunun işaretini kaldırın.

Konsolda CORS hatalarını gizleme seçeneği

Chromium sorunu: 1251176

Console'da Intl nesnelerinin doğru şekilde önizlenmesi ve değerlendirilmesi

Intl nesneleri artık düzgün bir şekilde önizlenebiliyor ve Console'da istekli bir şekilde değerlendiriliyor. Daha önce Intl nesneleri hevesle değerlendirilmiyordu.

Console'daki Intl nesneleri

Chromium sorunu: 1073804

Tutarlı eş zamansız yığın izlemeleri

Console artık async işlevleri için async yığın izlemelerini diğer ayarsız görevlerle ve çağrı yığınında gösterilenlerle tutarlı olacak şekilde raporluyor.

eş zamansız yığın izlemeleri

Chromium sorunu: 1254259

Konsol kenar çubuğunu tutma

Konsol kenar çubuğu kalıcı olarak kullanıma sunuldu. Chrome 94'te, Console kenar çubuğu desteğinin yakında sonlandırılacağını duyurduk ve geliştiricilerden geri bildirim ve endişelerini paylaşmalarını istedik.

Desteği sonlandırılma bildiriminden yeterli geri bildirim aldık. Bu nedenle, kenar çubuğunu kaldırmak yerine iyileştirmeye çalışacağız.

Konsol kenar çubuğu

Chromium sorunları: 1232937, 1255586

Uygulama panelindeki Uygulama önbelleği bölmesi kullanımdan kaldırıldı

AppCache desteği Chrome ve diğer Chromium tabanlı tarayıcılardan kaldırıldığı için Uygulama panelindeki Uygulama önbelleği bölmesi kaldırıldı.

Chromium sorunu: 1084190

[Deneysel] Uygulama panelinde yeni Reporting API bölmesi

Reporting API, sayfanızdaki güvenlik ihlallerini, desteği sonlandırılan API çağrılarını ve daha fazlasını izlemenize yardımcı olmak için tasarlanmıştır.

Bu deneme etkinleştirildiğinde artık raporların durumunu Uygulama panelindeki yeni Reporting API bölmesinde görüntüleyebilirsiniz.

Uç noktalar bölümünün şu anda aktif olarak geliştirilmekte olduğunu (şimdilik raporlama uç noktası göstermediğini) lütfen unutmayın.

Bu makaleyi inceleyerek Reporting API hakkında daha fazla bilgi edinin.

Uygulama panelindeki Reporting API bölmesi

Chromium sorunu: 1205856

Ö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 son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.