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

Ç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 iletiye eklenmedi. 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/Maksimum Süre 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 taklit 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 paneli (sağdaki kutu) söz konusu medya sorgusu doğru olduğunda uygulanan CSS'yi gösterir ve ekran alanı koyu mod stillerini (soldaki kutu) gösterir.

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 rastgele 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ır: 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 sonraki satıra taşımak için Control+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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.