Geliştirici Araçları Özeti: Toplu Zaman Çizelgesi Ayrıntıları, Renk Paletleri ve daha fazlası

Paul Bakaus
Paul Bakaus

Bu ay Chrome Canary'de çok sayıda özellik bulunuyor. Zaman Çizelgesi'ndeki Toplu Ayrıntılar bölümünde hangi üçüncü taraf komut dosyalarının performans sorunlarına neden olduğunu, yeni renk paleti ile tutarlı renkleri nasıl seçeceğinizi, özelleştirilebilir ağ profilleriyle konferans kablosuz bağlantısını nasıl simüle edeceğinizi, yeni ana menü ve daha iyi ipuçlarıyla DevTools kullanıcı arayüzünden nasıl daha iyi yararlanabileceğinizi öğrenmek için okumaya devam edin.


Performans sorunları için daha iyi suçlama: Zaman çizelgesinde toplu ayrıntılar

Zaman çizelgesinde toplu ayrıntılar

Bugünün web sitelerinde üçüncü taraflardan giderek daha fazla işaretçi, analiz, sosyal, yazı tipi yükleme ve reklamcılık hizmeti kullanıyoruz. Bu, bazen birkaç taneden fazla. Böyle bir sorunla karşılaşmamak ve sorunun görünür olmasını sağlamak için Zaman Çizelgesi'nde toplu ayrıntılar sunmaya başlıyoruz.

Toplu Ayrıntılar sekmesinde, yalnızca maliyetli işlevlere veya çağrı ağacının tamamına odaklanabilir, ardından seçili verileri alan adına, alt alana veya farklı URL'lere göre bölebilirsiniz. Örneğin, bir sayfa yükleme işleminin yukarıdaki Zaman Çizelgesi'nde artık yavaşlamaları facebook.net veya twitter.com gibi alanlardan gelen üçüncü taraf komut dosyalarıyla kolayca ilişkilendirebilirsiniz.

Yeni, özel ana menü

Yeni ana menü.

Ana araç çubuğunu sadeleştirmek için çekmeceyi, ayarları ve yerleştirme simgelerini yeni, ayrılmış bir ana menüye taşıdık.

Özellikle yerleştirme işlemi çok daha kolay hale geldi. Önceki simgeye uzun basmak yerine her yerleştirme konumunun kendi simgesi vardır.

Yerleştirmenin yanı sıra, hızlı erişimli dosya arama, kısayollar ve yardım özellikleri de ekledik (bu özellikler yeni ana sayfamıza yönlendirir).

İyileştirilmiş ipuçlarıyla Geliştirici Araçları'nı keşfedin

Yeni ipuçları.

Geliştirici Araçları'nda çok sayıda düğmemiz var ancak hepsinin kendini açıklamadığının farkındayız. Sistemde yerel ipuçlarını özel, platforma uygun ipuçlarıyla değiştirerek işlemleri ve kısayollarını keşfetmeyi kolaylaştırdık.

Yeni araç ipuçları çok daha hızlı görünüyor ve varsa klavye kısayollarını içeriyor.

Özel ağ kısıtlama profilleri oluşturma

Özel ağ profilleri'ni tıklayın.

Network Throttler'ın varsayılan seçenekleri kullanım alanlarınız için çok sınırlıysa ve "Konferans Kablosuz Ağı" seçeneğine ihtiyacınız varsa veya nostaljik amacıyla eski moda bir sisteme geçip bir "110 Baud" hattı kullanmak istiyorsanız size iyi bir haberimiz var. Tüm bunları yapmanıza olanak tanıyan yeni bir Ayarlar paneli ekledik.

Otomatik, Malzeme ve özel renk paletleri

İster sihirli renkleri yeniden oluşturmak ister mevcut bir renk paleti ile çalışmak isteyin, geliştirilmiş Renk Seçici, siteniz için tutarlı bir renk paleti seçmenize yardımcı olur.

Paletin yanındaki küçük değiştirici simgesini tıklayarak aşağıdakiler arasından seçim yapabilirsiniz:

  1. Sayfa Renkleri: Bu palet, CSS'nizde bulduğumuz renklerden otomatik olarak oluşturulur. Bu palet, mevcut bir sitenin kapsamını genişletiyorsanız mükemmel bir seçenektir.
  2. Materyal TasarımMateryal Tasarım paleti, ilk bakışta güzel renkler sunar ve yeni bir projeye başlarken ideal bir seçimdir. Şu anda ana renklerin tümünü bulabiliyorsunuz, ama yakında tüm tonları da sunacağız.
  3. Özel: Bu, kendi oyun alanınızdır. Seçiciden yeni renkler seçerek yeni renkler ekleyin, ardından paletin yanındaki "artı" simgesini tıklayın. Öğeleri sürükleyerek yeniden sıralayın ve kaldırma gibi diğer seçenekleri görmek için sağ tıklayın.

Düşüncelerinizi bizimle paylaşın ve renk hikayesini nasıl daha da zenginleştirebileceğimizi belirtin.

En iyiler

  • fetch() API kullanılarak yapılan istekler artık Ağ Paneli'nde gösteriliyor.
  • Otomatik panel düzeni, Geliştirici Araçları'nızı yeniden boyutlandırdığınızda
    panellerinizin yeni alan kısıtlamalarına uyum sağlamasına olanak tanır.
  • Öğe ve Cihaz Modu'nda bir dizi yeni simge var.
  • DOM panelindeki özellikler, düğüm vurgulandığında bile artık farklı renklendiriliyor. (Daha önce tamamen beyazlar buluyordu.)
  • Gizli öğeler (seçili bir DOM düğümünde "h" tuşuna basılarak etkinleştirilir) artık sol tarafta gri bir daire göstergesi gösterilir ve DOM ayrılma noktaları, aynı işlemi mavi bir daireyle yapar. (Bu, :hover gibi bir öğe durumunu zorlamak için kullandığımız turuncu göstergelere benzer).

Her zaman olduğu gibi, düşüncelerinizi Twitter veya aşağıdaki yorumlar üzerinden bize iletin ve hataları crbug.com/new adresine gönderin.

Gelecek ay görüşmek üzere!
Paul Bakaus ve Geliştirici Araçları ekibi