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

Yeni CSS Tablosu hata ayıklama araçları

Geliştirici Araçları artık CSS ızgara hata ayıklamasını daha iyi destekliyor.

CSS ızgarasında hata ayıklama

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında Öğeler panelinde bu öğenin yanında grid rozetini görebilirsiniz. Sayfada ızgara yer paylaşımı görüntülenmesini açıp 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ü vardır.

Daha fazla bilgi edinmek için belgelere göz atın.

Chromium sorunu: 1047356

Yeni WebAuthn sekmesi

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

WebAuthn sekmesini açmak için More options (Diğer seçenekler) > More Tools (Diğer araçlar) > WebAuthn (WebAuthn) seçeneğini belirleyin.

WebAuthn sekmesi

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

Web geliştiricileri, yeni WebAuthn sekmesi sayesinde artık fiziksel kimlik doğrulayıcılara ihtiyaç duymadan bu kimlik doğrulayıcıları emüle edebilir, yeteneklerini özelleştirebilir ve durumlarını inceleyebilir. Bu sayede hata ayıklama deneyimi çok daha kolaylaşır.

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

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 paneller arasında taşınmasını destekliyor. Böylece, iki aracı aynı anda görüntüleyebilirsiniz.

Örneğin, Öğeler ve Kaynaklar panelini aynı anda görüntülemek isterseniz Kaynaklar panelini sağ tıklayıp En alta taşı'yı seçerek panelin en altına taşıyabilirsiniz.

En alta taşı

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

En üste taşı

Chromium sorunu: 1075732

Öğeler paneli güncellemeleri

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

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

Stiller bölmesindeki Hesaplanan kenar çubuğu bölmesi, varsayılan olarak daraltılmıştır. Açmak/kapatmak için düğmeyi tıklayın.

Hesaplanan kenar çubuğu bölmesi

Chromium sorunu: 1073899

Hesaplanan bölmede 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 incelemesi için seçmeli olarak bir dizi ilgili özelliğe odaklanmak daha kolay olacak.

Öğeler panelinde bir öğe seçin. CSS özelliklerini gruplandırmak/gruplandırmayı iptal etmek için Grup onay kutusunu etkinleştirin.

CSS özelliklerini gruplandırma

Chromium sorunları: 1096230, 1084673, 1106251

Lighthouse 6.4 panelindeki Lighthouse 6.4

Lighthouse paneli şu anda Lighthouse 6.4'ü çalıştırmaktadır. 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 eşlemeleri. Bir sayfanın 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ı düşük 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ünde performance.mark() etkinlik

Performans kaydının Zamanlamalar bölümünde artık performance.mark() etkinlik 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 kullanın.

kaynak türü filtresi

resource-type ve url gibi daha özel anahtar kelimeler keşfetmek için tesislere göre filtreleme isteklerine göz atın.

Chromium sorunları: 1121141, 1104188

Kare ayrıntıları görünümü güncellemeleri

COEP ve COOP reporting to uç noktasını göster

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

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

uç noktaya raporlama

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

Chromium sorunu: 1051466

COEP ve COOP report-only modunu göster

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

yalnızca rapor etiketi

Bilgi sızıntılarını nasıl önleyeceğinizi ve web sitenizde COOP ve 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 kullanımdan kaldırıldı. Bunun yerine ana panelden Ayarlar'ı açın.

Ana paneldeki ayarlar

Chromium sorunu: 1121312

Deneysel özellikler

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

CSS Genel Bakış panelinde artık sayfanızdaki düşük renk kontrastı metinlerinin listesi gösteriliyor.

Bu örnekteki demo sayfasında düşük renk kontrastı sorunu vardır. Sorunu tıkladığınızda, soruna sahip öğelerin listesini görüntüleyebilirsiniz.

Düşük renk kontrastı sorunları

Bir öğeyi Öğeler panelinde açmak için listedeki bir öğeyi tıklayın. Geliştirici Araçları, 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ştirin

Artık Geliştirici Araçları'nda favori komutlarınız için klavye kısayollarını özelleştirebilirsiniz.

Ayarlar > Kısayollar'a gidin, fareyle bir komutun üzerine gelin ve klavye kısayolunu özelleştirmek için 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, 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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü