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

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

Sayfanızdaki olası CSS iyileştirmelerini belirlemek 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ış'ı tıklayın.

Bilgileri daha ayrıntılı inceleyebilirsiniz. Örneğin, aynı rengi uygulayan öğelerin listesini görüntülemek için Renkler bölümündeki 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. Gelişmeler için 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ğunu düzenleme ve kopyalama deneyimi geri yüklenerek 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 bozulmuş.

Buna ek olarak, açılır menüden birim değerini ayarlamak ve birim türünü güncellemek için sürükleyebilirsiniz. Eklenti uzunluğu yazma özelliği, metin deneyimi olarak birincil düzenlemeyi etkilememelidir.

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 kutusunu işaretleyin.

Chromium sorunları: 1259088, 1172993

Oluşturma sekmesi güncellemeleri

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

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

prefers-contrast medya özelliği, kullanıcının sayfada daha fazla veya daha az kontrast isteyip istemediğini belirlemek 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 bir Kaynak Denemesi sunuyor. Bu özellik ile tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde, açık temalı sitelere otomatik olarak oluşturulan koyu temayı uygular.

Komut Menüsü'nü açın, Oluşturmayı Göster komutunu çalıştırın ve ardından Otomatik koyu mod emülasyonu açılır listesini ayarlayın.

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

Chromium sorunu: 1243309

Stiller bölmesinde bildirimleri JavaScript olarak kopyala

CSS kurallarını JavaScript özellikleri olarak kolayca kopyalamanız için içerik menüsüne 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 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.

Beyanı JavaScript olarak kopyala

Chromium sorunu: 1253635

Ağ panelindeki yeni Yük sekmesi

Yüklü bir ağ isteğini incelerken 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 özelliklerin görüntülenmesi 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ştirmeleri ile birlikte, artık ilgili özellikleri daha kolay bulabilirsiniz.

Özelliklerin Özellikler bölmesinde görünümü

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ği için, CORS hatalarının Konsolda gizlenmesi karmaşanın azaltılmasına 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 doğru Intl nesne önizlemesi ve değerlendirmesi

Intl nesnelerinin önizlemesi şu anda uygun ve Console'da heyecanla değerlendiriliyor. Daha önce Intl nesneleri etraflıca değerlendirilmiyordu.

Console'daki uluslararası nesneler

Chromium sorunu: 1073804

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

Console artık diğer eşzamansız görevlerle ve Çağrı Yığını'nda gösterilenlerle tutarlı olması için async işlevlerine ait async yığın izlemelerini bildiriyor.

eş zamansız yığın izlemeler

Chromium sorunu: 1254259

Console kenar çubuğunu koruma

Console kenar çubuğu geçerliliğini koruyacak. Chrome 94'te Console kenar çubuğunun yakında kullanımdan kaldırılacağını duyurduk ve geliştiricilerden geri bildirim ve endişelerini 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 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 kaldırıldı.

Chromium sorunu: 1084190

[Deneysel] Uygulama panelindeki 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 hâlâ etkin geliştirme aşamasında olduğunu (şimdilik hiçbir raporlama uç noktası gösterilmektedir) lütfen unutmayın.

Reporting API hakkında daha fazla bilgi edinmek için bu makaleyi inceleyin.

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ı 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 Daha fazla > 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.