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

Kayce Basques

Çerezlerle ilgili yeni özellikler

Çerezin neden engellendiğiyle ilgili hata ayıklama

Ağ etkinliğini kaydettikten sonra bir ağ kaynağı seçin ve ardından güncellenen Çerezler sekmesini kullanarak, kaynağın istek veya yanıt çerezlerinin neden engellendiğini öğrenebilirsiniz. Görüntüleyin Neden daha fazla içerik gördüğünüzü anlamak için SameSite olmadan varsayılan davranışta yapılan değişiklikler Chrome 76 ve sonraki sürümlerde engellenmiş çerezler.

Çerezler sekmesi.

• Sarı renkli Çerez İste seçeneği kablosuz bağlantı üzerinden gönderilmemiştir. Bu öğeler varsayılan olarak gizlidir. Göster'i tıklayın. bunları göstermek için istek çerezlerini filtreleyerek hariç tutun.
• Sarı renkli Yanıt Çerezleri kablosuz bağlantı üzerinden gönderilmiş ancak depolanmamıştır.
• Fareyle Daha Fazla Bilgi'nin üzerine gelin Bir çerezin neden kullanıldığını öğrenmek için engellendi.
• İstek Çerezleri ve Yanıt Çerezleri tablolarındaki verilerin çoğu daha fazla bilgi edinin. Domain, Path ve Expiration/Max-Age verileri Chrome Geliştirici Araçları Protokolü.

Chromium sorunları #856777, #993843

Çerez değerlerini göster

Bir ç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.

Chromium sorunu #462370

Farklı tercihler-renk-şeması ve azaltılmış hareket tercihlerini simüle eder

prefers-color-scheme medya sorgusu, sitenizin stilini kullanıcınızın stiliyle eşleştirmenizi sağlar tercihler. Örneğin, prefers-color-scheme: dark medya sorgusu doğruysa Kullanıcınız işletim sistemini koyu moda ayarlamış ve koyu mod kullanıcı arayüzlerini tercih ediyorsa.

Komut Menüsü'nü açın, Oluşturmayı Göster komutunu çalıştırın ve ardından CSS medyası emülasyonunu ayarlayın. özellik tercihler-color-scheme açılır listesi ile prefers-color-scheme: dark ve prefers-color-scheme: light stil.

prefers-color-scheme: dark ayarlandığında (orta kutu) Stiller bölmesinde (sağ kutu), , bu medya sorgusu doğru olduğunda ve görüntü alanı koyu mod stillerini gösterdiğinde uygulanır (soldaki kutu).

Ayrıca, CSS medya özelliğini simüle ederek prefers-reduced-motion: reduce işlevini de simüle edebilirsiniz. CSS emülasyon medya özelliği optionals-color-scheme seçeneğinin yanındaki tercihler-reduced-motion açılır listesi açılır.

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 emülasyon yapmanıza da olanak tanıyor saat dilimlerini ayarlayın ve web uygulamalarınız üzerindeki etkisini test edin. Şaşırtıcı bir şekilde bu yeni özellik, güvenilirliğini de sağlar: Önceden web uygulamaları, konuma dayalı adres sahteciliğini kullanarak Konum, kullanıcının yerel saat dilimiyle eşleştirilir. Artık coğrafi konum ve saat dilimi emülasyonu birleştiğinde, bu uyuşmazlık kategorisi ortadan kalkar.

Kod kapsamı güncellemeleri

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

Kapsam sekmesinde artık kullanılmış ve kullanılmayan kodları göstermek için yeni renkler kullanılmaktadır. Bu renk kombinasyonu renk körlüğü olan kişiler için daha erişilebilir olduğu kanıtlandı. Soldaki kırmızı çubuk, kullanılmayan kodu, sağdaki mavi çubuk ise kullanılan kodu temsil eder.

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österebilir.

Kapsam sekmesi.

Kullanılabilir olduğunda Kaynaklar paneli, kod kapsamı verilerini görüntüler. Kırmızı veya mavi renkli işaretleri tıkladığınızda yanında, Kapsam sekmesi açılır ve dosya vurgulanır.

Kaynaklar panelindeki kapsam verileri. 8. satır, kullanılmayan koda bir örnektir. 11. satır kullanılmış kod.

Chromium sorunları #1003671, #1004185

Ağ kaynağının istenme nedeni için hata ayıklama

Ağ etkinliğini kaydettikten sonra bir ağ kaynağı seçin ve ardından Başlatan'a gidin. sekmesinden yararlanabilirsiniz. İstek çağrı yığını bölümünde Ağ isteğine giden JavaScript çağrı yığını.

Başlatan sekmesi.

Chromium sorunları 963183, 842488

Konsol ve Kaynaklar panelleri, girinti tercihlerine tekrar uyar

Geliştirici Araçları, uzun süredir girinti tercihinizi 2 boşluk, 4 boşluk 8 boşluk veya sekme ekleyin. Son zamanlarda bu ayar aslında işe yaramadı. Çünkü Console ve Kaynak panelleri bu ayarı yoksayıyordu. Bu hata artık düzeltildi.

Ayarlar'a gidin > Tercihler > Kaynaklar > Şu değeri ayarlamak için Varsayılan Girinti: tıklayın.

Chromium sorunu #977394

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

İmlecinizi yukarıdaki satıra taşımak için Konsol veya Kaynaklar panellerinde Control+P tuşlarına basın. Bas İmlecinizi aşağıdaki satıra taşımak için Control+N.

Chromium sorunu #983874

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