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. CSS Genel Bakış panelini açın, ardından sayfanızın CSS raporunu oluşturmak için Genel bakışı yakala'yı tıklayın.

Bilgileri daha ayrıntılı olarak 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 Öğeler panelinde açın.

CSS'ye Genel Bakış paneli bir önizleme özelliğidir. Ekibimizin bu konuyla ilgili çalışmaları devam ediyor. Daha fazla iyileştirme sunabilmemiz için sizden geri bildirimlerinizi iletmenizi rica ediyoruz.

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

CSS'yi kopyalama ve metin olarak düzenleme deneyimi, uzunluğu olan CSS mülkleri için 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.

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

Ayarlar > Denemeler > Stiller bölmesinde CSS uzunluğu yazma araçlarını etkinleştir onay kutusu aracılığıyla devre dışı bırakabilirsiniz.

Chromium sorunları: 1259088, 1172993

Sekme güncellemelerini oluşturma

CSS tercih eder kontrast medya özelliği emülasyonu

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şturmayı Göster komutunu çalıştırın ve ardından CSS medya özelliği tercihler-kontrast emülasyonu açılır listesini ayarlayın.

Chromium sorunu: 1139777

Chrome'un Otomatik Koyu Tema özelliği emülasyonu

Chrome'da Otomatik Koyu Tema etkinleştirildiğinde sayfanızın nasıl göründüğünü kolayca görmek için Otomatik koyu temanın emülasyonunu yapmak için Geliştirici Araçları'nı kullanın.

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

Stiller bölmesinde bildirimleri JavaScript olarak kopyala

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 Bildirimi JS olarak kopyala'yı, tüm kuralları kopyalamak için Tüm bildirimleri 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. Önceden 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ölmesi, örneğin tüm özelliklerini göstermek yerine artık yalnızca alakalı özellikleri gösterir. 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

CORS hatalarını Konsol'da 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 nesnelerinin önizlemesi şu anda uygun ve Console'da heyecanla 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

Console kenar çubuğu geçerliliğini koruyacak. 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.

Artık desteği sonlandırma bildirimiyle ilgili yeterli sayıda geri bildirim aldık. 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'dan ve diğer Chromium tabanlı tarayıcılardan kaldırıldığından, Uygulama panelindeki Uygulama önbelleği bölmesi kaldırıldı.

Chromium sorunu: 1084190

[Deneysel] Uygulama panelinde yeni Reporting API bölmesi

Reporting API, sayfanızın 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ştirildikten sonra, Uygulama panelindeki yeni Reporting API bölmesinde raporların durumunu 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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.