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

Kayce Basques

Tekrar hoş geldiniz! Chrome 64'te DevTools'a eklenen yeni özelliklerden bazıları şunlardır:

Devamını okuyun veya aşağıdaki sürüm notlarının video sürümünü izleyin.

Performans İzleyicisi

Bir sayfanın yükleme veya çalışma zamanı performansının çeşitli yönlerini anlık olarak görüntülemek için Performans İzleyici'yi kullanın. Örneğin:

  • CPU kullanımı.
  • JavaScript yığın boyutu.
  • Sayfadaki DOM düğümlerinin, JavaScript etkinlik işleyicilerinin, belgelerin ve çerçevelerin toplam sayısı.
  • Saniye başına düzen ve stil yeniden hesaplamaları.

Kullanıcılar uygulamanızın yavaş veya takılmalı olduğunu bildiriyorsa ipucu bulmak için Performans İzleyici'yi kontrol edin.

Yükleme performansının önemi: BookMyShow, hıza odaklanan bir Progressive Web App oluşturduğunda dönüşümlerde% 80 artış elde etti. Daha fazla bilgi edinin.

Performans İzleyici'yi kullanmak için:

  1. Komut menüsünü açın.

  2. Performance yazmaya başlayın ve ardından Show Performance Monitor simgesini seçin.

    Performans İzleyici Şekil 1. Performans İzleyici

  3. Göstermek veya gizlemek istediğiniz metriği tıklayın. Şekil 1'de CPU Kullanımı, JS yığın boyutu ve JS etkinlik işleyicileri grafikleri gösterilmektedir.

İlgili özellikler:

  • Performans paneli. Kritik bir kullanıcı yolculuğunu adım adım inceleyin ve JavaScript etkinliği, ağ istekleri, CPU kullanımı ve daha fazlası dahil olmak üzere sayfada gerçekleşen her şeyi kaydedin. Yükleme performansını analiz etmek için de kullanılabilir. Daha fazla bilgi edinin.
  • Denetlemeler paneli. Herhangi bir URL için otomatik yükleme ve çalışma zamanı performansı testleri paketi çalıştırın. Daha fazla bilgi edinin.

Performansı analiz etmeye yeni başladıysanız önerilen yol, önce Denetim panelini kullanıp ardından Performans panelini veya Performans monitörünü kullanarak daha ayrıntılı inceleme yapmaktır.

Konsol Kenar Çubuğu

Büyük sitelerde Console, alakasız mesajlarla hızla dolup taşabilir. Gereksiz bilgileri azaltmak ve sizin için önemli olan iletilere odaklanmak üzere yeni Console kenar çubuğunu kullanın.

Yalnızca hata mesajlarını göstermek için Konsol kenar çubuğunu kullanma

Şekil 2. Yalnızca hata mesajlarını göstermek için Konsol kenar çubuğunu kullanma

Konsol kenar çubuğu varsayılan olarak gizlidir. Göstermek için Konsol Kenar Çubuğunu Göster'i Konsol kenar çubuğunu göstermetıklayın.

İlgili özellikler:

  • Filtre metin kutusu. Bir metin girdiğinizde Console yalnızca bu metni içeren mesajları gösterir. Normal ifade kalıplarını, negatif filtreleri ve URL filtrelerini de destekler.

Benzer konsol mesajlarını gruplandırma

Konsolda artık benzer mesajlar varsayılan olarak gruplandırılmaktadır. Örneğin, Şekil 3'te [Violation] Avoid using document.write() mesajının 27 örneği vardır.

Console'un benzer mesajları gruplandırdığını gösteren örnek

Şekil 3. Console'un benzer mesajları gruplandırdığını gösteren örnek

Bir grubu tıklayarak genişletin ve ileti örneğini görebilirsiniz.

Genişletilmiş bir Console mesajı grubu örneği

Şekil 4. Genişletilmiş bir Console mesajı grubu örneği

Bu özelliği devre dışı bırakmak için Benzerlerini gruplandır onay kutusunun işaretini kaldırın.

İlgili özellikler:

  • Kendi Console mesajlarınızı console.group() ile gruplandırabilirsiniz.

Yerel Geçersiz Kılmalar

Bir hata oluştu. Bu özelliği başlangıçta Chrome 64'te kullanıma sunmayı planlamıştık ancak bazı aksaklıkları gidermek için son tarihe yakın bir zamanda kullanıma sunduk. Yenilikler kullanıcı arayüzü zamanında güncellenmemiş. Maalesef

Bu özellik, Chrome 64'ten yaklaşık 6 hafta sonra kullanıma sunulacak olan Chrome 65'te kullanıma sunulacaktır. Daha fazla bilgi edinmek için Yerel Geçersiz Kılma başlıklı makaleyi inceleyin. Windows veya Mac kullanıyorsanız Chrome Canary'ı indirerek Chrome 65'i hemen deneyebilirsiniz.

Ö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.