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

Kayce Basques
Kayce Basques
X GitHub

Çerezlerle ilgili yeni özellikler

Çerezin neden engellendiğini hata ayıklama

Ağ etkinliğini kaydettikten sonra bir ağ kaynağı seçin ve bu kaynağın istek veya yanıt çerezlerinin neden engellendiğini anlamak için güncellenen Çerezler sekmesine gidin. Chrome 76 ve sonraki sürümlerde neden daha fazla engellenen çerez görebileceğ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ı istek çerezleri kablo üzerinden gönderilmedi. Bunlar varsayılan olarak gizlidir. Filtreyle hariç tutulan istek çerezlerini göstermek için filtreyle hariç tutulan istek çerezlerini göster'i tıklayın.
  • Sarı yanıt çerezleri kablo üzerinden gönderildi ancak depolanmadı.
  • Çerezin neden engellendiğini öğrenmek için 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 Son Kullanma Tarihi/Maksimum Yaş verileri Chrome Geliştirici Araçları Protokolü'nden alınır.

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.

Çerezin değerini görüntüleme

Ç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 tercihlerine göre ayarlamanıza olanak tanır. Örneğin, prefers-color-scheme: dark medya sorgusu doğruysa kullanıcınızın işletim sistemini koyu moda ayarladığı ve koyu mod kullanıcı arayüzlerini tercih ettiği anlamına gelir.

Komut Menüsü'nü açın, Show Rendering (Görselleştirmeyi Göster) komutunu çalıştırın ve ardından prefers-color-scheme: dark ile prefers-color-scheme: light stillerinizde hata ayıklamak için Emulate CSS media feature prefers-color-scheme (CSS prefers-color-scheme medya özelliği emülasyonu) açılır listesini ayarlayın.

prefers-color-scheme: dark

prefers-color-scheme: dark ayarlandığında (ortadaki kutu) Stiller bölmesi (sağdaki kutu), bu medya sorgusu doğru olduğunda uygulanan CSS'yi gösterir ve görünüm alanı, koyu mod stillerini (soldaki kutu) gösterir.

CSS prefers-color-scheme medya özelliği emülasyonu açılır menüsünün yanındaki CSS prefers-reduced-motion medya özelliği emülasyonu açılır menüsünü kullanarak da prefers-reduced-motion: reduce simülasyonu yapabilirsiniz.

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 üzerindeki etkiyi test etmenize de olanak tanıyor. Belki de şaşırtıcı bir şekilde, bu yeni özellik coğrafi konum emülasyonunun güvenilirliğini de artırıyor. Daha önce web uygulamaları, konumu kullanıcının yerel saat dilimiyle eşleştirerek konum sahteciliğini tespit edebiliyordu. Coğrafi konum ve saat dilimi emülasyonu artık birlikte kullanıldığından bu kategoriye ait uyuşmazlıklar ortadan kaldırıldı.

Kod kapsamı güncellemeleri

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

Kapsam sekmesinde artık kullanılan ve kullanılmayan kodu temsil etmek için yeni renkler kullanılıyor. Bu renk kombinasyonunun, renk görme eksikliği olan kişiler 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 paneli, kod kapsamı verileri mevcut olduğunda bunları gösterir. Satır numarasının yanındaki kırmızı veya mavimsi 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 kod örneğidir. 11. satır, kullanılan koda bir ö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şlatan sekmesine gidin. İstek çağrı yığını bölümünde, ağ isteğine kadar olan JavaScript çağrı yığını açıklanmaktadır.

Başlatıcı sekmesi

Başlatıcı sekmesi.

Chromium sorunları 963183, 842488

Console ve Sources panelleri, girinti tercihlerine tekrar uyuyor

Geliştirici Araçları'nda uzun süredir girinti tercihinizi 2 boşluk, 4 boşluk, 8 boşluk veya sekmeler olarak özelleştirebileceğiniz bir ayar bulunur. Son zamanlarda, Console ve Sources panelleri ayarı yoksaydığı için bu ayar neredeyse işe yaramaz hale gelmişti. Bu hata düzeltilmiştir.

Tercihinizi ayarlamak için Ayarlar > Tercihler > Kaynaklar > Varsayılan Girinti'ye gidin.

Chromium sorunu #977394

Kürsörle gezinme için yeni kısayollar

İmlecinizi bir üst satıra taşımak için Konsol veya Kaynaklar panellerinde Control+P tuşlarına basın. İmlecinizi bir alt 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, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.