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, sürekli yerinizi kaybetmeye devam edersiniz. Bu probleme düzen adı verilir oluşturuyoruz. Bu durum genellikle resimlerin ve reklamların yüklenmesi tamamlandığında gerçekleşir. Sayfa hiç yer ayırmadı bu nedenle, tarayıcının bu içeriğe yer açmak için diğer tüm içeriği aşağı kaydırması gerekir. Çözüm, yer tutucular kullanmaktır.

Geliştirici Araçları 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 etkinleştirin. Bir sayfayla etkileşimde bulunduğunuzda düzen kaymaları renkle vurgulanmıştı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:

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. İstek belirterek sitenizin zaman içinde gerilemesini önleyin sayısını ve dosya boyutlarını aşmaması gerekir.
  • Eklentiler. Lighthouse'u kendi özel denetimlerinizle genişletin.
  • Yığın Paketleri. Belirli teknoloji yığınlarına göre uyarlanmış denetimler ekleyin. WordPress Yığın Paketi gönderilmesi gerekir. 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 kendi koyu temasına geçiş yapıyor otomatik olarak oluşturur.

Kesme noktası düzenleyicisi açmak için klavye kısayolu

Ctrl+Alt+B tuşlarına basın veya Kaynaklar panelindeki Düzenleyici'de odaklanıldığında Command+Option+B (Mac) Ayrılma Noktası Düzenleyici'yi açın. Kesme Noktası Düzenleyicisi'ni kullanarak Günlük Noktaları oluşturun ve Koşullu Kesme Noktaları.

Kesme noktası düzenleyicisi.

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

Ağ panelinde önbelleği önceden getir

Ağ panelinin Boyut sütununda artık şuradan bir kaynak yüklendiğinde (prefetch cache) gösteriliyor ön getirme önbelleğidir. Önceden getirme, sonraki sayfaları hızlandırmak için kullanılan yeni bir web platformu özelliğidir. yükler. Ş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 şuradan geldiğini gösterir: (prefetch cache).

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. Soldaki Chrome'un eski sürümünde,#color nesnesini tanımlar. Sağdaki yeni sürüm ise içerir.

Uygulama panelindeki bildirimler ve push mesajları

Uygulama panelinin Arka Plan Hizmetleri bölümü artık Push Mesajlarını ve Bildirimler. 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 Getirme ve Arka Plan Senkronizasyonu özellikleri'nde olduğu gibi, kayıt, bu sayfadaki push mesajları ve bildirimler 3 gün boyunca kaydedilir (sayfada sayfa gösterilse bile). ve Chrome kapalıyken bile kapatabilirsiniz.

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ı sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > 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.