Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Öğenin stillerini kopyala

Bir DOM düğümünün CSS'sini panonuza kopyalamak için DOM Ağacı'ndaki bir düğümü sağ tıklayın.

Stilleri kopyala.

Şekil 1. Öğe stillerini kopyala.

İlham aldıkları için Adam Argyle ve VisBug'a teşekkürler.

Düzen kaymalarını görselleştirme

En sevdiğiniz web sitesinde bir haber makalesi okuduğunuzu varsayalım. Siz sayfayı okurken, içerik oradan ayrıldığı için sürekli kendinizi kaybediyorsunuz. Bu soruna düzen değiştirme denir. Bu sorun genellikle resimlerin ve reklamların yüklenmesi tamamlandığında oluşur. Sayfa, resimler ve reklamlar için yer ayırmamıştır Bu nedenle, tarayıcının bunlara yer açmak için diğer tüm içeriği aşağı kaydırması gerekir. Çözüm, placeholders kullanmaktır.

Geliştirici Araçları artık düzen kaymalarını tespit etmenize yardımcı olabilir:

Komut Menüsü'nü açın.
Rendering yazmaya başlayın.
Oluşturmayı Göster komutunu çalıştırın.
Düzen Kayması Bölgeleri onay kutusunu etkinleştirin. Bir sayfayla etkileşimde bulunduğunuzda düzen kaymaları maviyle vurgulanır.

Düzen kayması.

Şekil 2. Düzen kayması.

Chromium sorunu #961846

Denetimler panelindeki Lighthouse 5.1

Denetimler paneli artık Lighthouse 5.1'i çalıştırmaktadır. Yeni denetimler şunları içerir:

Geçerli bir apple-touch-icon sunuyor. iOS ana ekranına PWA eklenip eklenemeyeceğini kontrol eder.
İstek sayısını ve dosya boyutlarını düşük tutun. Belgeler, komut dosyaları, stil sayfaları, resimler gibi çeşitli kategoriler için toplam ağ isteği sayısını ve dosya boyutlarını bildirir.
Maksimum Olası İlk Giriş Gecikmesi. Bir kullanıcının ilk sayfa etkileşimi ile tarayıcının bu etkileşime verdiği yanıt arasındaki maksimum potansiyel süreyi ölçer. Bu metriğin Tahmini Giriş Gecikmesi metriğinin yerini aldığını unutmayın. Maksimum Potansiyel İlk Giriş Gecikmesi, Performans kategorisi puanınızı etkilemez.

Yeni Denetimler paneli kullanıcı arayüzü.

Şekil 3. Yeni Denetimler paneli kullanıcı arayüzü.

Lighthouse 5.1'in Node ve CLI sürümlerinde göz atmaya değer 3 yeni önemli özellik var:

Performans Bütçeleri. Sayfaların aşmaması gereken istek sayılarını ve dosya boyutlarını belirterek sitenizin zaman içinde gerilemesini önleyin.
Eklentiler. Kendi özel denetlemelerinizle Lighthouse'u genişletin.
Yığın Paketleri. Belirli teknoloji yığınlarına göre uyarlanmış denetimler ekleyin. İlk olarak WordPress Yığın Paketi gönderildi. React ve AMP Yığın Paketleri geliştirme aşamasındadır.

İşletim sistemi tema senkronizasyonu

İşletim sisteminizin koyu temasını kullanıyorsanız Geliştirici Araçları artık otomatik olarak kendi koyu temasına geçiş yapıyor.

Kesme Noktası Düzenleyicisi'ni açmak için klavye kısayolu

Kaynak panelinin Düzenleyicisi'nde odaklanıldığında Control+Alt+B veya Command+Option+B (Mac) tuşlarına basarak Ayrılma Noktası Düzenleyicisi'ni açın. Günlük Noktaları ve Koşullu Kesme Noktaları oluşturmak için Kesme Noktası Düzenleyici'yi kullanın.

Breakpoint Düzenleyicisi.

Şekil 4. Ayrılma Noktası Düzenleyicisi.

Ağ panelinde önbelleği önceden getir

Önceden getirme önbelleğinden bir kaynak yüklendiğinde, Ağ panelinin Boyut sütununda artık (prefetch cache) yazıyor. Önceden getirme, sonraki sayfa yüklemelerini hızlandırmaya yönelik yeni bir web platformu özelliğidir. Kullanabilir miyim..., Temmuz 2019 itibarıyla küresel tarayıcıların% 83,33'ünde bu özelliğin desteklendiğini bildirmektedir.

Kaynakların önceden getirme önbelleğinden geldiğini gösteren Boyut sütunu.

Şekil 5. Boyut sütunu, prefetch2.html ve prefetch2.css değerlerinin (prefetch cache) kaynağından geldiğini gösterir.

Denemek için Önceden Getirme Demosu'na bakın.

Chromium sorunu #935267

Nesneler görüntülenirken özel mülkler

Console'un nesne önizlemelerinde artık özel sınıf alanları gösterilmektedir.

Konsolda artık bir nesne incelenirken "#color" gibi özel alanlar gösteriliyor.

Şekil 6. Soldaki Chrome'un eski sürümünde, nesne incelenirken #color alanı gösterilmez, sağdaki yeni sürümde ise gösterilir.

Uygulama panelindeki bildirimler ve push mesajları

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Push Mesajlarını ve Bildirimleri desteklemektedir. Push mesajları, bir sunucu hizmet çalışanına bilgi gönderdiğinde gerçekleşir. Bildirimler, bir hizmet çalışanı veya sayfa komut dosyası kullanıcıya bilgi gösterdiğinde gerçekleşir.

Chrome 76'nın Arka Planda Getirme ve Arka Plan Senkronizasyonu özelliklerinde olduğu gibi, kaydetmeye başladıktan sonra bu sayfadaki push mesajları ve bildirimler, sayfa kapalıyken ve Chrome kapalıyken bile 3 gün süreyle kaydedilir.

Yeni Bildirimler ve Push Mesajları bölmeleri.

Şekil 7. Uygulama panelindeki yeni Push Mesajları ve Bildirimler bölmeleri.

Chromium sorunu #927726

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.