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

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

Kayce Basques

Öğenin stillerini kopyala

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

Stilleri kopyala.

Şekil 1. Öğe stillerini kopyala.

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

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

Diyelim ki en sevdiğiniz web sitesinde bir haber makalesi okuyorsunuz. Sayfayı okurken, içerikte sürekli gezindiği için yerinizi kaybetmeye devam ediyorsunuz. Bu soruna düzen kaydırma denir. Bu durum genellikle resimlerin ve reklamların yüklenmesi tamamlandığında gerçekleşir. Sayfada resimlere ve reklamlara yer ayırmadığından, tarayıcının bunlara yer açmak için diğer tüm içerikleri aşağı kaydırması gerekir. Çözüm, placeholders kullanmaktır.

Geliştirici Araçları artık düzen kayması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ı mavi renkle vurgulanır.

Düzen kayması.

Şekil 2. Düzen kayması.

Chromium sorunu #961846

Denetimler panelinde Lighthouse 5.1

Denetimler paneli şu anda Lighthouse 5.1'i çalıştırıyor. Yeni denetimler şunları içerir:

Geçerli bir apple-touch-icon sağlıyor. PWA'nın iOS ana ekranına eklenip eklenemeyeceğini kontrol eder.
İstek sayılarını ve dosya boyutlarını düşük tutun. Belgeler, komut dosyaları, stil sayfaları, resimler vb. gibi çeşitli kategoriler için ağ isteklerinin ve dosya boyutlarının toplam sayısını bildirir.
Maksimum Olası İlk Giriş Gecikmesi. Bir kullanıcının ilk sayfa etkileşimi ile tarayıcının bu etkileşime 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 düğüm ve CLI sürümlerinde görülmeye değer 3 yeni yeni ö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 geri gitmesini önleyin.
Eklentiler. Lighthouse'u kendi özel denetimlerinizle 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.

OS teması 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 açmak için klavye kısayolu

Odaklan Kaynaklar panelindeki Editor'da 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üzenleyicisi'ni kullanın.

Kesme noktası düzenleyicisi.

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

Ağ panelinde önbelleği önceden getir

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

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

Şekil 5. Boyut sütununda, prefetch2.html ve prefetch2.css metriğinin (prefetch cache) üzerinden geldiği gösterilir.

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

Chromium sorunu #935267

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

Console'daki nesne önizlemelerinde artık gizli sınıf alanları gösteriliyor.

Bir nesneyi incelerken Konsolda artık "#color" gibi özel alanlar gösteriliyor.

Şekil 6. Chrome'un soldaki eski sürümü nesne incelenirken #color alanını göstermezken sağdaki yeni sürüm gösterir.

Uygulama panelindeki bildirimler ve push mesajları

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Push Mesajları ve Bildirimler'i destekliyor. 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'daki Arka Planda Getir ve Arka Plan Senkronizasyonu özelliklerinde olduğu gibi, kaydı başlattıktan sonra, bu sayfadaki Push Mesajları ve Bildirimler, sayfa kapansa ve Chrome kapalı olsa 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, 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.