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 Öğeler panelinde açın.

CSS'ye Genel Bakış paneli, önizleme aşamasındaki bir özelliktir. Ekibimiz bu özellikle ilgili çalışmalarına devam ediyor. Daha fazla iyileştirme yapabilmek için geri bildirimlerinizi bekliyoruz.

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

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

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 bir kaynak denemesi sunuyor. Bu özellik sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde 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.

Chromium sorunu: 1243309

Stiller bölmesinde tanımlamaları JavaScript olarak kopyalama

Bağlam menüsüne, CSS kurallarını JavaScript özellikleri olarak kolayca kopyalamanıza olanak tanıyan 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.

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.

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ştirmeleriyle birlikte artık ilgili özellikleri daha kolay bulabilirsiniz.

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.

Chromium sorunu: 1251176

Console'da uygun Intl nesnelerinin önizlemesi ve değerlendirmesi

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

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.

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 yakında kullanımdan kaldı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.

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, raporların 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.

Bu makaleden Reporting API hakkında daha fazla bilgi edinin.

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.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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