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

Kayce Basques

Tekrar hoş geldiniz! Chrome 64'te Geliştirici Araçları'na eklenecek yeni özellikler:

• Performans İzleyicisi. Bir sayfanın performansını gerçek zamanlı olarak görüntüleyin.
• Console Kenar Çubuğu. Konsol gürültüsünü azaltın ve sizin için önemli olan mesajlara odaklanın.
• Benzer konsol mesajlarını gruplandırın. Konsol artık benzer mesajları varsayılan olarak birlikte gruplandırıyor.

Okumaya devam edin veya aşağıdaki sürüm notlarının video versiyonunu izleyin.

Performans İzleyicisi

Bir sayfanın yükleme veya çalışma zamanı performansının çeşitli yönleri hakkında gerçek zamanlı bir görünüm elde etmek için Performans İzleyici'yi kullanın. Bu yönler şunlardır:

• CPU kullanımı.
• JavaScript yığın boyutu.
• Sayfadaki toplam DOM düğümü, JavaScript etkinlik işleyicisi, belge ve çerçeve sayısı.
• Saniyede düzen ve stil yeniden hesaplaması sayısı.

Kullanıcılar uygulamanızın yavaş veya düzensiz çalıştığını bildiriyorsa ipuçları için Performans İzleyici'yi kontrol edin.

Yükleme performansı neden önemlidir? BookMyShow, hıza odaklanan bir ilerleyici web uygulaması oluşturduğunda dönüşümlerde% 80 artış elde etti. Daha fazla bilgi edinin.

Performans İzleyicisi'ni kullanmak için:

1. Komut Menüsü'nü açın.

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

   Şekil 1. Performans İzleyicisi

3. Bir metriği göstermek veya gizlemek için tıklayın. Şekil 1'de CPU kullanımı, JS yığın boyutu ve JS olay dinleyicileri grafikleri gösterilmektedir.

İlgili özellikler:

• Performans paneli. Kritik bir kullanıcı yolculuğunu adım adım inceleyin ve sayfada olan her şeyi (JavaScript etkinliği, ağ istekleri, CPU kullanımı vb.) kaydedin. Yükleme performansını analiz etmek için de kullanılabilir. Daha fazla bilgi edinin.
• Denetlemeler paneli. Herhangi bir URL'ye karşı bir dizi otomatik yükleme ve çalışma zamanı performans testi çalıştırın. Daha fazla bilgi edinin.

Performansı analiz etmeye yeni başlıyorsanız önerilen yol, önce Denetimler panelini kullanmak, ardından Performans paneli veya Performans izleyiciyi kullanarak daha ayrıntılı bir inceleme yapmaktır.

Konsol kenar çubuğu

Konsol, büyük sitelerde kısa sürede alakasız mesajlarla dolabilir. Gürültüyü azaltmak ve sizin için önemli olan mesajlara odaklanmak için yeni Console Sidebar'ı kullanın.

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

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

İlgili özellikler:

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

Benzer Console mesajlarını gruplandırma

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

Şekil 3. Konsolda benzer mesajların gruplandırılmasına ilişkin bir örnek

Bir grubu tıklayarak genişletin ve iletinin her örneğini görün.

Şekil 4. Genişletilmiş bir grup konsol mesajı örneği

Bu özelliği devre dışı bırakmak için Benzerleri 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 ilk olarak Chrome 64'te kullanıma sunmayı planlamıştık ancak son anda bazı sorunları gidermek için erteledik. Görünüşe göre 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 yer alacak. Daha fazla bilgi edinmek için Yerel Geçersiz Kılmalar'a göz atın. Windows veya Mac kullanıyorsanız Chrome Canary'yi indirerek Chrome 65'i hemen deneyebilirsiniz.

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

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.