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

Yeni CSS Izgara hata ayıklama araçları

DevTools artık CSS ızgarada hata ayıklamayı daha iyi desteklemektedir.

CSS ızgarada hata ayıklama

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında, Öğeler panelinde bu öğenin yanında bir grid rozeti görürsünüz. Sayfada ızgara yer paylaşımı görüntülenmesine geçiş yapmak 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 dokümanlara göz atın.

Chromium sorunu: 1047356

Yeni WebAuthn sekmesi

Artık yeni WebAuthn sekmesini kullanarak kimlik doğrulayıcı emülasyonu yapabilir ve Web Authentication API'de hata ayıklayabilirsiniz.

Diğer seçenekler > Diğer araçlar > WebAuthn'u seçerek WebAuthn sekmesini açın.

WebAuthn sekmesi

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

Yeni WebAuthn sekmesiyle web geliştiricileri artık herhangi bir fiziksel kimlik doğrulayıcıya gerek kalmadan bu kimlik doğrulayıcıları emüle edebilir, yeteneklerini özelleştirebilir ve durumlarını inceleyebilir. Bu, hata ayıklama deneyimini çok daha kolay hale getirir.

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 panel arasında taşınmasını destekliyor. Böylece istediğiniz 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çebilirsiniz.

En alta taşı

Benzer şekilde, bir sekmeyi sağ tıklayıp En üste taşı'yı seçerek alt sekmelerden birini ü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çıp kapatabilirsiniz.

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

Hesaplanmış 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 (daha az kaydırma) gezinmek ve CSS incelemesi için ilgili özelliklere seçmeli olarak odaklanmak daha kolay olacak.

Öğeler panelinde bir öğe seçin. CSS özelliklerini gruplandırmak/gruplandırmak için Grup onay kutusunu işaretleyin veya işaretini kaldırın.

CSS özelliklerini gruplama

Chromium sorunları: 1096230, 1084673, 1106251

Lighthouse panelinde Lighthouse 6.4

Lighthouse paneli artık 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 haritaları. 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 kullanılan 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ğ panelindeki 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 istekleri mülklere göre filtreleme bölümüne 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örüntüle

Artık Kaynaklar Arası 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örebilirsiniz.

Reporting API, tarayıcının uyarı ve hata göndereceği sunucu uç noktalarını belirtmesine olanak tanıyan yeni bir HTTP üst bilgisi (Report-To) tanımlar.

uç noktaya raporlama

COEP ve COOP'yi etkinleştirme ve web sitenizi "kökler arası erişime kapalı" yapma 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 report-only moduna ayarlanan COEP ve COOP için report-only etiketini gösterir.

salt 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ünde Settings desteği sonlandırılıyor

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'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österilir.

Bu örnekte, demo sayfasında düşük renk kontrastı sorunu var. Sorunu tıkladığınızda sorun içeren öğelerin listesini görüntüleyebilirsiniz.

Düşük renk kontrastı sorunları

Bir öğeyi Öğeler panelinde açmak için öğeyi tıklayın. Geliştirici Araçları, düşük kontrastlı metin sorununu düzeltmenize yardımcı olmak için otomatik renk önerisi sağlar.

Chromium sorunu: 1120316

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

Artık Geliştirici Araçları'nda favori komutlarınızın 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ştirme

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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.

Geliştirici Araçları'ndaki Yenilikler

DevTools'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59