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

Kayce Basques
Kayce Basques
X GitHub

Öğenin stillerini kopyalama

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

Stilleri kopyalama

1. şekil Öğe stillerini kopyalama

İlham için Adam Argyle ve VisBug'a teşekkür ederiz.

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

En sevdiğiniz web sitesinde bir haber makalesi okuduğunuzu varsayalım. Sayfayı okurken içerik sürekli yer değiştirdiği için okuduğunuz yeri kaybediyorsunuz. Bu soruna düzen kayması denir. Bu durum genellikle resimler ve reklamlar yüklendikten sonra gerçekleşir. Sayfada resimler ve reklamlar için yer ayrılmadığından tarayıcı, yer açmak için diğer tüm içerikleri aşağı kaydırmak zorunda kalır. Çözüm, yer tutucuları kullanmaktır.

DevTools artık düzen kaymasını tespit etmenize 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 işaretleyin. Bir sayfayla etkileşim kurarken düzen kaymaları mavi renkle vurgulanır.

Düzen kayması

2. şekil. Düzen kayması

Chromium sorunu #961846

Denetimler panelinde Lighthouse 5.1

Denetimler paneli artık Lighthouse 5.1'i çalıştırıyor. Yeni denetimler şunlardır:

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

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

Lighthouse 5.1'in Node ve CLI sürümlerinde göz atmanız gereken 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 denetimlerinizle Lighthouse'un kapsamını genişletin.
  • Stack Packs. Belirli teknoloji yığınlarına göre uyarlanmış denetimler ekleyin. İlk olarak WordPress Stack Pack gönderildi. React ve AMP Stack Pack'ler geliştirme aşamasındadır.

İş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çmak için kullanılan klavye kısayolu

Kaynaklar panelinin Düzenleyici bölümünde odaklanmışken Kesme Noktası Düzenleyici'yi açmak için Control+Alt+B veya Command+Option+B (Mac) tuşlarına basın. Günlük noktaları ve koşullu kesme noktaları oluşturmak için kesme noktası düzenleyicisini kullanın.

Kesme noktası düzenleyicisi.

4. şekil Kesme noktası düzenleyicisi.

Ağ panelinde önceden getirme önbelleği

Ağ panelinin Boyut sütununda, bir kaynak önceden getirme önbelleğinden yüklendiğinde artık (prefetch cache) ifadesi gösteriliyor. Önceden getirme, sonraki sayfa yüklemelerini hızlandırmak için kullanılan yeni bir web platformu özelliğidir. Can I use..., Temmuz 2019 itibarıyla küresel tarayıcıların% 83,33'ünde desteklendiğini bildiriyor.

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

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

Denemek için Prefetch Demo'ya (Önceden Getirme Demosu) göz atın.

Chromium sorunu #935267

Nesneleri görüntülerken özel özellikler

Konsol artık nesne önizlemelerinde özel sınıf alanlarını gösteriyor.

Konsol, bir nesne incelenirken artık "#color" gibi özel alanları gösteriyor.

6. şekil Soldaki eski Chrome sürümünde nesne incelenirken #color alanı gösterilmezken sağdaki yeni sürümde gösteriliyor.

Uygulama panelindeki bildirimler ve push mesajları

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Push Mesajları ve Bildirimler'i destekliyor. Sunucu bir hizmet çalışanına bilgi gönderdiğinde push mesajları oluşur. Bir hizmet çalışanı veya sayfa komut dosyası kullanıcıya bilgi gösterdiğinde bildirimler gösterilir.

Chrome 76'daki arka planda getirme ve arka planda senkronizasyon özelliklerinde olduğu gibi, kaydı başlattı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ı panoları.

Ş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, 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.