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

Yeni CSS ızgarası hata ayıklama araçları

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

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında Öğeler panelinde yanında bir grid rozeti görebilirsiniz. Görüntüyü açıp kapatmak için rozeti tıklayın bir tablo yer paylaşımı olabilir.

Yeni Düzen bölmesinde, tablodaki öğeleri görüntülemeniz için çeşitli seçenekler sunan Izgara bölümü ızgaralar.

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

Chromium sorunu: 1047356

Yeni WebAuthn sekmesi

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

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

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.

Yeni WebAuthn sekmesiyle, web geliştiricileri artık bu kimlik doğrulayıcıları emüle edebilir, kimliklerini özelleştirebilir ve yapabilir ve fiziksel kimlik doğrulayıcılara ihtiyaç duymadan durumlarını inceleyebilir. Bu durum, ç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 paneller arasında taşınmasını destekliyor. Bu sayede projenizin iki aracı aynı anda görüntüleyebilirsiniz.

Örneğin, Öğeler ve Kaynaklar panelini aynı anda görüntülemek isterseniz Kaynaklar panelini tıklayın ve en alta taşımak için En alta taşı'yı seçin.

Benzer şekilde, bir sekmeyi sağ tıklayıp Şuraya taşı: üst.

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. Düğmeyi tıklayın: açın/kapatın.

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 kolay olacak (daha az kaydırma) ve CSS incelemesi için ilgili bir grup özelliğe odaklanır.

Öğeler panelinde bir öğe seçin. CSS'yi gruplandırmak/gruplandırmak için Gruplandır onay kutusunu işaretleyin veya kutunun işaretini kaldırın. özellikler.

Chromium sorunları: 1096230, 1084673, 1106251

Lighthouse 6.4 panelindeki Lighthouse 6.4

Lighthouse paneli şu anda Lighthouse 6.4'ü çalıştırmaktadır. Tam sürüm için sürüm notlarına değişiklik listesi.

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ı, kötü amaçlı yazılım bazı yolları da görmüştük. Bu denetim, moment.js

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.

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.

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

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ı'nı (COEP) ve Kaynaklar Arası Açıcı Politikası'nı görüntüleyebilirsiniz. (COOP)reporting to uç noktasının altındaki Güvenlik ve İzolasyon bölümüne gidin.

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

COEP ve COOP'u etkinleştirme ve web sitenizi yapma hakkında daha fazla bilgi edinmek için bu makaleyi okuyun. "çapraz kökten izole".

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.

Bilgi sızıntılarını nasıl önleyeceğinizi ve COOP ile COEP'yi nasıl etkinleştireceğinizi öğrenmek için sitenizi ziyaret edin.

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ı. Ana panelden Ayarlar'ı açın .

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ıklayıp soruna sahip öğelerin listesini görüntüleyin.

Bir öğeyi Öğeler panelinde açmak için listedeki bir öğeyi tıklayın. Geliştirici Araçları otomatik renk önerisi özelliğini kullanabilirsiniz.

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'a gidin > Kısayollar: Fareyle bir komutun üzerine gelip Düzenle düğmesini (kalem simgesi) tıklayın klavye kısayolunu ö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ı sorunlarını bildirmek için Diğer seçenekler'i > 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.