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

Kayce Basques

Çerezler için yeni özellikler

Bir çerezin neden engellendiğini hata ayıklama

Ağ etkinliğini kaydettikten sonra bir ağ kaynağı seçin ve ardından bu kaynağın istek veya yanıt çerezlerinin neden engellendiğini anlamak için güncellenmiş Çerezler sekmesine gidin. Chrome 76 ve sonraki sürümlerde neden daha fazla engellenen çerez göreceğinizi anlamak için SameSite olmadan varsayılan davranışta yapılan değişiklikler başlıklı makaleyi inceleyin.

Çerezler sekmesi.

Çerezler sekmesi.

  • Sarı İstek Çerezleri ileti dizisi üzerinden gönderilmedi. Bunlar varsayılan olarak gizlidir. Bunları göstermek için filtreyle hariç tutulan istek çerezlerini göster'i tıklayın.
  • Sarı Yanıt Çerezleri ağ üzerinden gönderildi ancak depolanmadı.
  • Bir çerezin neden engellendiğini öğrenmek için fareyle Daha Fazla Bilgi'nin bilgi üzerine gelin.
  • İstek Çerezleri ve Yanıt Çerezleri tablolarındaki verilerin çoğu kaynağın HTTP başlıklarından gelir. Alan, Yol ve Süresi Doluyor/Maks. Yaş verileri Chrome Geliştirici Araçları Protokolü'nden gelir.

Chromium sorunları #856777, #993843

Çerez değerlerini görüntüleme

İlgili çerezin değerini görüntülemek için Çerezler bölmesinde bir satırı tıklayın.

Bir çerezin değerini görüntüleme.

Bir çerezin değerini görüntüleme.

Chromium sorunu #462370

Farklı prefers-color-scheme ve prefers-reduced-motion tercihlerini simüle etme

prefers-color-scheme medya sorgusu, sitenizin stilini kullanıcınızın tercihleriyle eşleştirmenize olanak tanır. Örneğin, prefers-color-scheme: dark medya sorgusu doğruysa kullanıcınızın işletim sistemini koyu moda ayarladığını ve koyu mod kullanıcı arayüzlerini tercih ettiğini gösterir.

Komut menüsünü açın, Oluşturma işlemini göster komutunu çalıştırın ve ardından prefers-color-scheme: dark ve prefers-color-scheme: light stillerinizde hata ayıklama yapmak için CSS prefers-color-scheme medya özelliğini emüle et açılır menüsünü ayarlayın.

prefers-color-scheme: dark

prefers-color-scheme: dark ayarlandığında (ortadaki kutu), Stil panelinde (sağdaki kutu) söz konusu medya sorgusu doğru olduğunda uygulanan CSS gösterilir ve ekran görünümünde (soldaki kutu) koyu mod stilleri gösterilir.

prefers-reduced-motion: reduce özelliğini, CSS prefers-color-scheme medya özelliğini emülasyon açılır menüsünün yanındaki CSS prefers-reduced-motion medya özelliğini emülasyon açılır menüsünü kullanarak da simüle edebilirsiniz.

Chromium sorunu #1004246

Saat dilimi emülasyonu

Sensörler sekmesi artık yalnızca coğrafi konumu geçersiz kılmanıza değil, aynı zamanda istediğiniz saat dilimlerini taklit etmenize ve web uygulamalarınızın üzerindeki etkisini test etmenize olanak tanır. Bu yeni özellik, şaşırtıcı bir şekilde coğrafi konum taklitinin güvenilirliğini de artırıyor: Daha önce web uygulamaları, konumu kullanıcının yerel saat dilimine göre eşleştirerek konum taklidini algılayabiliyordu. Coğrafi konum ve saat dilimi taklidi birlikte kullanıldığı için bu eşleşmeme kategorisi ortadan kalktı.

Kod kapsamı güncellemeleri

Kapsam sekmesi, kullanılmayan JavaScript ve CSS'yi bulmanıza yardımcı olabilir.

Kapsam sekmesinde, kullanılan ve kullanılmayan kodu temsil etmek için artık yeni renkler kullanılıyor. Bu renk kombinasyonunun, renk görme bozukluğu olan kullanıcılar için daha erişilebilir olduğu kanıtlanmıştır. Soldaki kırmızı çubuk kullanılmayan kodu, sağdaki mavimsi çubuk ise kullanılan kodu gösterir.

Yeni kapsam türü filtresi metin kutusu, kapsam bilgilerini türüne göre filtrelemenize olanak tanır: Yalnızca JavaScript kapsamını, yalnızca CSS'yi veya tüm kapsam türlerini görüntüleyin.

Kapsam sekmesi.

Kapsam sekmesi.

Kaynaklar panelinde, mevcut olduğunda kod kapsamı verileri gösterilir. Satır numarasının yanındaki kırmızı veya mavi işaretleri tıkladığınızda Kapsam sekmesi açılır ve dosya vurgulanır.

Kaynaklar panelindeki kapsam verileri.

Kaynaklar panelindeki kapsam verileri. 8. satır, kullanılmayan koda örnektir. 11. satır, kullanılan koda örnektir.

Chromium sorunları #1003671, #1004185

Bir ağ kaynağının neden istendiğini hata ayıklama

Ağ etkinliğini kaydettikten sonra bir ağ kaynağı seçin ve kaynağın neden istendiğini anlamak için Başlatıcı sekmesine gidin. İstek çağrı yığını bölümünde, ağ isteğine yol açan JavaScript çağrı yığını açıklanmaktadır.

Başlatıcı sekmesi.

Başlatıcı sekmesi.

Chromium sorunları 963183, 842488

Console ve Kaynaklar panelleri, girinti tercihlerine tekrar uyuyor

DevTools'ta uzun süredir girinti tercihinizi 2 boşluk, 4 boşluk, 8 boşluk veya sekme olarak özelleştirmek için bir ayar bulunuyordu. Console ve Kaynaklar panelleri bu ayarı yoksayıp dikkate almadığı için son zamanlarda bu ayar temelde işe yaramıyordu. Bu hata düzeltildi.

Tercihinizi ayarlamak için Ayarlar > Tercihler > Kaynaklar > Varsayılan Girintili Düzenleme'ye gidin.

Chromium sorunu #977394

İmleçle gezinme için yeni kısayollar

İmlecinizi bir üst satıra taşımak için Konsol veya Kaynaklar panellerinde Ctrl+P tuşlarına basın. İmlecinizi bir alt satıra taşımak için Kontrol+N tuşlarına basın.

Chromium sorunu #983874

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