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

Jecelyn Yeen

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

Sayfanızda CSS'de iyileştirilebilecek noktaları belirlemek için yeni CSS'ye Genel Bakış panelini kullanın. CSS'ye Genel Bakış panelini açın ve sayfanızın CSS'siyle ilgili bir rapor oluşturmak için Genel bakışı yakala'yı tıklayın.

Bilgileri daha ayrıntılı olarak inceleyebilirsiniz. Örneğin, aynı rengi uygulayan öğ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, önizleme aşamasındaki bir özelliktir. Ekibimiz bu özellikle ilgili çalışmaları 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

Uzunluk içeren CSS özellikleri için CSS'yi kopyala ve metin olarak düzenle deneyimi geri yüklenir. Bu deneyimler son sürümde bozuldu.

Ayrıca, birim değerini ayarlamak için sürükleyebilir ve birim türünü açılır listeden güncelleyebilirsiniz. Bu eklenti uzunluğu yazma özelliği, metin olarak birincil düzenleme deneyimini etkilememelidir.

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

Bu özelliği Ayarlar > Denemeler > Stiller bölmesinde CSS uzunluğu yazma araçlarını etkinleştir onay kutusunu kullanarak devre dışı bırakabilirsiniz.

Chromium sorunları: 1259088, 1172993

Sekme güncellemelerini oluşturma

CSS prefers-contrast medya özelliğini emüle etme

CSS prefers-contrast medya özelliğini emüle 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, Show Rendering (Görselleştirmeyi Göster) komutunu çalıştırın ve Emulate CSS media feature prefers-contrast (CSS prefers-contrast medya özelliğini taklit et) açılır listesini ayarlayın.

Chromium sorunu: 1139777

Chrome'un otomatik koyu tema özelliğini taklit etme

Chrome'un otomatik koyu tema özelliği etkinleştirildiğinde sayfanızın nasıl göründüğünü kolayca görmek için otomatik koyu temayı taklit etmek üzere Geliştirici Araçları'nı kullanın.

Chrome 96, Android'de Otomatik Koyu Tema için kaynak denemesi sunuyor. Bu özellik sayesinde tarayıcı, kullanıcının işletim sisteminde koyu temaları etkinleştirmesi durumunda açık temalı sitelere otomatik olarak oluşturulan bir koyu tema uygular.

Komut Menüsü'nü açın, Show Rendering (Görselleştirmeyi Göster) komutunu çalıştırın ve Emulate auto dark mode (Otomatik koyu modu taklit et) açılır listesini ayarlayın.

Chrome'un otomatik koyu tema özelliğini taklit etme

Chromium sorunu: 1243309

Stiller bölmesinde tanımlamaları JavaScript olarak kopyalama

Bağlam menüsüne, CSS kurallarını JavaScript özellikleri olarak kolayca kopyalamanızı sağlayan iki yeni seçenek eklendi. Bu kısayol seçenekleri özellikle CSS-in-JS 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 ise 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 kopyalama

Chromium sorunu: 1253635

Ağ panelinde yeni Yük sekmesi

Yük içeren bir ağ isteğini 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 özelliklerin gösterimi iyileştirildi.

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

Chrome 95'teki Özellikler bölmesi iyileştirmeleri sayesinde artık ilgili özellikleri daha kolay bulabilirsiniz.

Özellikler bölmesinde özelliklerin 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 bildirildiğinden Console'da CORS hatalarını gizlemek karmaşayı azaltmaya 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 uygun Intl nesnelerinin önizlemesi ve değerlendirmesi

Intl nesneleri artık düzgün bir şekilde önizlenebiliyor ve konsolda hemen değerlendiriliyor. Daha önce Intl nesneleri hemen değerlendirilmiyordu.

Konsoldaki Intl nesneleri

Chromium sorunu: 1073804

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

Konsol artık diğer asenkron görevlerle ve Çağrı Yığını'nda gösterilenlerle tutarlı olması için async işlevlerinin async yığın izlerini bildiriyor.

eş zamansız yığın izlemeler

Chromium sorunu: 1254259

Konsol kenar çubuğunu koruma

Konsol kenar çubuğu kalıcı olarak kullanıma sunulmuştur. Chrome 94'te Console kenar çubuğunun desteğinin yakında sonlandırılacağını duyurmuş ve geliştiricilerden geri bildirim ve endişelerini paylaşmalarını istemiştik.

Kullanımdan kaldırma bildirimiyle ilgili yeterli geri bildirim aldık. Bu nedenle, kenar çubuğunu kaldırmak yerine iyileştirmek için çalışacağız.

Konsol kenar çubuğu

Chromium sorunları: 1232937, 1255586

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

AppCache desteği Chrome'dan ve diğer Chromium tabanlı tarayıcılardan kaldırıldığından, Uygulama panelindeki Uygulama önbelleği bölmesi artık kaldırıldı.

Chromium sorunu: 1084190

[Deneysel] Uygulama panelinde yeni Reporting API bölmesi

Reporting API, sayfanızdaki güvenlik ihlallerini, kullanımdan kaldı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, rapor durumunu artık Uygulama panelindeki yeni Reporting API bölmesinde görüntüleyebilirsiniz.

Uç noktalar bölümünün şu anda hâlâ aktif geliştirme aşamasında olduğunu (şimdilik raporlama uç noktaları gösterilmiyor) hatırlatırız.

Reporting API hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Uygulama panelindeki Reporting API bölmesi

Chromium sorunu: 1205856

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

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