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

Jecelyn Yeen

Yeni CSS Grid hata ayıklama araçları

DevTools artık CSS ızgara hata ayıklama için daha iyi destek sunuyor.

CSS ızgara hata ayıklama

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında Öğeler panelinde öğenin yanında bir grid rozeti görürsünüz. Sayfada ızgara yer paylaşımının görüntülenmesini değiştirmek için rozeti tıklayın.

Yeni Düzen bölmesinde, ızgaraları görüntülemeyle ilgili çeşitli seçenekler sunan bir Izgara bölümü bulunur.

Daha fazla bilgi için dokümanlara göz atın.

Chromium sorunu: 1047356

Yeni WebAuthn sekmesi

Artık yeni WebAuthn sekmesiyle kimlik doğrulayıcıları taklit edebilir ve Web Authentication API'de hata ayıklama yapabilirsiniz.

WebAuthn sekmesini açmak için Diğer seçenekler > Diğer araçlar > WebAuthn'ı seçin.

WebAuthn sekmesi

Yeni WebAuthn sekmesinden önce Chrome'da yerel WebAuthn hata ayıklama desteği yoktu. Geliştiricilerin, web uygulamalarını Web Authentication API ile test etmek için fiziksel kimlik doğrulayıcılara ihtiyacı vardı.

Web geliştiricileri, yeni WebAuthn sekmesiyle artık fiziksel kimlik doğrulayıcılara ihtiyaç duymadan bu kimlik doğrulayıcıları taklit edebilir, özelliklerini özelleştirebilir ve durumlarını inceleyebilir. Bu sayede hata ayıklama deneyimi çok daha kolay hale gelir.

WebAuthn özelliği hakkında daha fazla bilgi edinmek için dokümanlarımıza göz atın.

Chromium sorunu: 1034663

Araçları üst ve alt panel arasında taşıma

DevTools artık DevTools'daki araçları üst ve alt panel arasında taşımayı destekliyor. Böylece, iki aracı aynı anda görüntüleyebilirsiniz.

Örneğin, Öğeler ve Kaynaklar panelini aynı anda görüntülemek istiyorsanız Kaynaklar panelini sağ tıklayıp Alt tarafa taşı'yı seçerek paneli alt tarafa taşıyabilirsiniz.

En alta taşı

Benzer şekilde, bir sekmeyi sağ tıklayıp Üste taşı'yı seçerek alttaki sekmeleri üste taşıyabilirsiniz.

En üste taşı

Chromium sorunu: 1075732

Nesne paneli güncellemeleri

Stiller bölmesinde Hesaplanan kenar çubuğu bölmesini görüntüleme

Artık Stiller bölmesinde Hesaplanan kenar çubuğu bölmesini açabilir veya kapatabilirsiniz.

Stiller bölmesinde bulunan Hesaplanan kenar çubuğu bölmesi varsayılan olarak daraltılmıştır. Etkinleştirmek veya devre dışı bırakmak için düğmeyi tıklayın.

Hesaplanan kenar çubuğu bölmesi

Chromium sorunu: 1073899

Hesaplanan bölmesinde CSS özelliklerini gruplandırma

Artık CSS özelliklerini Hesaplanan bölmesinde kategorilere göre gruplandırabilirsiniz.

Bu yeni gruplandırma özelliği sayesinde Hesaplanan bölmesinde gezinmek (daha az kaydırma) ve CSS denetimi için ilgili bir dizi özelliğe seçerek odaklanmak daha kolay olacak.

Öğeler panelinde bir öğe seçin. CSS mülklerini gruplandırmak/gruplandırmayı kaldırmak için Grup onay kutusunu etkinleştirin veya devre dışı bırakın.

CSS özelliklerini gruplandırma

Chromium sorunları: 1096230, 1084673, 1106251

Lighthouse panelinde Lighthouse 6.4

Lighthouse panelinde artık Lighthouse 6.4 sürümü kullanılıyor. Değişikliklerin tam listesi için sürüm notlarına göz atın.

Deniz Feneri

Lighthouse 6.4'teki yeni denetimler:

  • Yazı tiplerini önceden yükleyin. font-display: optional kullanan tüm yazı tiplerinin önceden yüklenip yüklenmediğini doğrular.
  • Geçerli kaynak haritalar. Bir sayfanın büyük, birinci taraf JavaScript için geçerli kaynak eşlemelerine sahip olup olmadığını denetler.
  • [Deneysel] Büyük JavaScript kitaplığı. Büyük JavaScript kitaplıkları kötü performansa yol açabilir. Bu denetim, moment.js gibi yaygın ve büyük JavaScript kitaplıklarının daha ucuz alternatiflerini önerir.

Chromium sorunu: 772558

Zamanlama bölümündeki performance.mark() etkinlikleri

Performans kaydının Zaman çizelgesi bölümünde artık performance.mark() etkinliği işaretleniyor.

Performance.mark etkinlikleri

Ağ panelinde yeni resource-type ve url filtreleri

Ağ isteklerini filtrelemek için Ağ panelindeki yeni resource-type ve url anahtar kelimelerini kullanın.

Örneğin, resim olan ağ isteklerine odaklanmak için resource-type:image simgesini kullanın.

resource-type filtresi

resource-type ve url gibi daha fazla özel anahtar kelime keşfetmek için istekleri özelliklere göre filtreleme bölümüne göz atın.

Chromium sorunları: 1121141, 1104188

Çerçeve ayrıntıları görünümü güncellemeleri

COEP ve COOP reporting to uç noktasını görüntüleme

Artık Güvenlik ve İzolasyon bölümünde Çapraz Kaynak Yerleştiren Politikası (COEP) ve Çapraz Kaynak Açıcı Politikası (COOP)reporting to uç noktasını görüntüleyebilirsiniz.

Reporting API, web geliştiricilerine tarayıcının uyarı ve hata göndereceği sunucu uç noktalarını belirtme olanağı tanıyan yeni bir HTTP üstbilgisi (Report-To) tanımlar.

Uç noktaya raporlama

COEP ve COOP'u etkinleştirme ve web sitenizi "kaynaklar arası izole" hale getirme hakkında daha fazla bilgi edinmek için bu makaleyi okuyun.

Chromium sorunu: 1051466

COEP ve COOP report-only modunu görüntüleme

Geliştirici Araçları artık report-only moduna ayarlanmış COEP ve COOP için report-only etiketini gösteriyor.

yalnızca raporlama etiketi

Bilgi sızıntılarını nasıl önleyeceğinizi ve web sitenizde COOP ile COEP'yi nasıl etkinleştireceğinizi öğrenmek için bu videoyu izleyin.

Chromium sorunu: 1051466

Diğer araçlar menüsündeki Settings desteğinin sonlandırılması

Diğer araçlar menüsündeki Settings simgesinin desteği sonlandırıldı. Bunun yerine ana panelden Ayarlar'ı açın.

Ana paneldeki ayarlar

Chromium sorunu: 1121312

Deneysel özellikler

CSS'ye Genel Bakış panelinde renk kontrastı sorunlarını görüntüleme ve düzeltme

CSS'ye Genel Bakış panelinde artık sayfanızdaki düşük renk kontrastlı metinlerin listesi gösteriliyor.

Bu örnekte, demo sayfasında düşük renk kontrastı sorunu vardır. Sorunu tıkladığınızda, sorunun bulunduğu öğelerin listesini görebilirsiniz.

Düşük renk kontrastı sorunları

Listeden bir öğeyi tıklayarak öğeyi Nesneler panelinde açın. DevTools, düşük kontrastlı metni düzeltmenize yardımcı olmak için otomatik renk önerisi sunar.

Chromium sorunu: 1120316

Geliştirici Araçları'nda klavye kısayollarını özelleştirme

Artık DevTools'da en sevdiğiniz komutların klavye kısayollarını özelleştirebilirsiniz.

Klavye kısayolunu özelleştirmek için Ayarlar > Kısayollar'a gidin, fareyle bir komutun üzerine gelin ve Düzenle düğmesini (kalem simgesi) tıklayın.

Klavye kısayollarını özelleştirin

Tüm kısayolları sıfırlamak için Varsayılan kısayolları geri yükle'yi tıklayın.

Chromium sorunu: 174309

Ö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.