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

Yeni CSS Grid hata ayıklama araçları

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

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

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

Daha fazla bilgi edinmek için belgeleri inceleyin.

Chromium sorunu: 1047356

Yeni WebAuthn sekmesi

Artık yeni WebAuthn sekmesi ile kimlik doğrulayıcıları taklit edebilir ve Web Authentication API'de hata ayıklayabilirsiniz.

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

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ştiriciler, yeni WebAuthn sekmesi sayesinde artık bu kimlik doğrulayıcıları taklit edebilir, özelliklerini özelleştirebilir ve durumlarını inceleyebilir. Üstelik fiziksel kimlik doğrulayıcılara da ihtiyaç duymazlar. 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

Geliştirici Araçları artık Geliştirici Araçları'ndaki araçların üst ve alt panel arasında taşınmasını destekliyor. Bu sayede, 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 Alta taşı'yı seçerek paneli alta taşıyabilirsiniz.

Benzer şekilde, herhangi bir alt sekmeyi üst kısma taşımak için sekmeyi sağ tıklayıp Üst kısma taşı'yı seçebilirsiniz.

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 Hesaplanmış kenar çubuğu bölmesini açıp kapatabilirsiniz.

Stiller bölmesindeki Hesaplanan kenar çubuğu bölmesi varsayılan olarak daraltılmıştır. Düğmeyi tıklayarak açın veya kapatın.

Chromium sorunu: 1073899

Hesaplanan bölmesinde CSS özelliklerini gruplandırma

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

Bu yeni gruplandırma özelliği sayesinde Hesaplanan bölmede gezinmek daha kolay olacak (daha az kaydırma) ve CSS incelemesi için ilgili özelliklere seçici olarak odaklanabileceksiniz.

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

Chromium sorunları: 1096230, 1084673, 1106251

Lighthouse panelinde Lighthouse 6.4

Lighthouse paneli artık Lighthouse 6.4'ü çalıştırıyor. Değişikliklerin tam listesi için sürüm notlarına göz atın.

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 sayfada büyük birinci taraf JavaScript için geçerli kaynak eşlemeleri 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ına daha ucuz alternatifler önerir.

Chromium sorunu: 772558

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

Performans kaydının Zamanlamalar bölümü artık performance.mark() etkinliklerini işaretliyor.

Ağ panelinde yeni resource-type ve url filtreleri

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

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

resource-type ve url gibi daha fazla özel anahtar kelime keşfetmek için istekleri özelliklere göre filtreleme başlıklı makaleyi inceleyin.

Chromium sorunları: 1121141, 1104188

Kare 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 Cross-Origin Embedder Policy (COEP) ve Cross-Origin Opener Policy (COOP)reporting to uç noktasını görüntüleyebilirsiniz.

Reporting API, web geliştiricilere tarayıcının uyarı ve hataları göndereceği sunucu uç noktalarını belirtme olanağı tanıyan yeni bir HTTP üstbilgisi olan Report-To'yi tanımlar.

COEP ve COOP'u etkinleştirme ve web sitenizi "kaynaklar arası yalıtılmış" 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

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

Bilgi sızıntılarını önleme ve web sitenizde COOP ile COEP'yi etkinleştirme hakkında bilgi edinmek için bu videoyu izleyin.

Chromium sorunu: 1051466

Diğer araçlar menüsündeki Settings seçeneğinin desteği sonlandırıldı

Diğer araçlar menüsündeki Settings simgesi kullanımdan kaldırıldı. Bunun yerine ana panelden Ayarlar'ı açın.

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 var. Sorunu tıkladığınızda, sorunun bulunduğu öğelerin listesini görebilirsiniz.

Öğeyi Nesneler panelinde açmak için listedeki bir öğeyi tıklayı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 Geliştirici Araçları'nda en sevdiğiniz komutların klavye kısayollarını özelleştirebilirsiniz.

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

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, 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 hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler 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.