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

Kayce Basques

Öğenin stillerini kopyalama

DOM ağacındaki bir düğümü sağ tıklayarak düğümün CSS'sini panonuza kopyalayın.

Stilleri kopyalayın.

Şekil 1. Öğe stillerini kopyalayın.

İlham 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. Sayfayı okurken içerik sıçradığı için yerinizi kaybediyorsunuz. Bu soruna sayfa düzeni kayması denir. Bu durum genellikle resimler ve reklamlar yüklendiğinde ortaya çıkar. Sayfada resimler ve reklamlar için yer ayrılmadığından tarayıcı, bunlara yer açmak için diğer tüm içeriği aşağı kaydırmak zorunda kalır. Çözüm, yer tutucuları kullanmaktır.

DevTools artık düzen kaydırmalarını algılamanıza yardımcı olabilir:

  1. Komut menüsünü açın.
  2. Rendering yazmaya başlayın.
  3. Oluşturmayı göster komutunu çalıştırın.
  4. Düzen Kayması Bölgeleri onay kutusunu etkinleştirin. Bir sayfayla etkileşim kurarken düzen kaymaları mavi renkle vurgulanır.

Düzen kayması.

Şekil 2. Düzen kayması.

Chromium sorunu #961846

Denetimler panelinde Lighthouse 5.1

Denetimler panelinde artık Lighthouse 5.1 kullanılıyor. Yeni denetimler arasında şunlar yer alır:

  • Geçerli bir apple-touch-icon sağlar. Bir PWA'nın iOS ana ekranına eklenip eklenemeyeceğini kontrol eder.
  • İstek sayısını ve dosya boyutlarını düşük tutun. Belgeler, komut dosyaları, stil sayfaları, resimler vb. gibi çeşitli kategoriler için toplam ağ isteği sayısını ve dosya boyutlarını raporlar.
  • Maksimum Olası İlk Giriş Gecikmesi. Kullanıcının ilk sayfa etkileşimi ile tarayıcının bu etkileşime yanıt vermesi arasında geçen maksimum potansiyel süreyi ölçer. Bu metriğin, Tahmini Giriş Gecikmesi metriğinin yerini aldığını unutmayın. Maksimum Olası İlk Giriş Gecikmesi, Performans kategorisi puanınıza dahil edilmez.

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 vardır:

  • Performans Bütçeleri. Sayfaların aşmaması gereken istek sayılarını ve dosya boyutlarını belirterek sitenizin zaman içinde gerilememesini sağlayın.
  • Eklentiler. Lighthouse'u kendi özel denetimlerinizle genişletin.
  • Yığın paketleri. Belirli teknoloji gruplarına özel denetimler ekleyin. WordPress Stack Pack ilk gönderildi. React ve AMP Stack paketleri geliştirilmektedir.

İşletim sistemi teması senkronizasyonu

İşletim sisteminizin koyu temasını kullanıyorsanız DevTools artık kendi koyu temasına otomatik olarak geçer.

Kesme noktası düzenleyiciyi açma klavye kısayolu

Duraklatma noktası düzenleyicisini açmak için Kaynaklar panelinin Düzenleyici'sine odaklanırken Kontrol+Alt+B veya Komut+Option+B (Mac) tuşlarına basın. Günlük noktaları ve koşullu kesme noktaları oluşturmak için Kesme Noktası Düzenleyici'yi kullanın.

Kesme noktası düzenleyici.

Şekil 4. Kesme noktası düzenleyicisi.

Ağ panelinde ön getirme önbelleği

Bir kaynak önceden getirme önbelleğinden yüklendiğinde Ağ panelinin Boyut sütununda artık (prefetch cache) ifadesi gösterilir. Ön getirme, sonraki sayfa yüklemelerini hızlandırmak için kullanılan yeni bir web platformu özelliğidir. ...kullanabilir miyim? raporuna göre, Temmuz 2019 itibarıyla bu özellik dünya genelindeki tarayıcıların% 83,33'ünde destekleniyor.

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

Şekil 5. Boyut sütunu, prefetch2.html ve prefetch2.css'in (prefetch cache) kaynağı olduğunu gösterir.

Denemek için Ön getirme Demo'su başlıklı makaleyi inceleyin.

Chromium sorunu #935267

Nesneleri görüntülerken özel mülkler

Konsolda artık nesne önizlemelerinde özel sınıf alanları gösteriliyor.

Console, bir nesneyi incelerken artık "#color" gibi özel alanları gösterir.

Şekil 6. Soldaki eski Chrome sürümünde, nesneyi incelerken #color alanı gösterilmez. Sağdaki yeni sürümde ise bu alan gösterilir.

Uygulama panelindeki bildirimler ve push mesajları

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Push Mesajları ve Bildirimleri desteklemektedir. Push mesajları, bir sunucu bir 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'daki Arka Planda Getirme ve Arka Planda Senkronizasyon ö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 boyunca 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 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.