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

Hoş geldiniz! Chrome 60'ta DevTools'a eklenen yeni özellikler ve yapılan önemli değişiklikler arasında şunlar yer alıyor:

• Progresif web uygulamaları, performans, erişilebilirlik ve en iyi uygulamalarla ilgili testler içeren yeni bir Denetim paneli.
• Üçüncü taraf rozetleri. Hangi üçüncü tarafların ağ isteği gönderdiğini, Console'a günlük kaydettiğini ve JavaScript'i çalıştırdığını öğrenin.
• Buraya Devam Et'i tıklayın. JavaScript hata ayıklama iş akışınızı hızlandırabilecek yeni bir hareket.
• Eşzamansız JavaScript için tahmin edilebilir hata ayıklama.
• Console'daki nesne önizlemeleri.
• Kapsam sekmesinde anlık güncellemeler
• Console'da bağlamları seçmek için yeni bir menü.
• Daha basit ağ kısıtlama seçenekleri.
• Eş zamansız yığın izlemeleri varsayılan olarak açıktır.

Bu sürüm notlarının video sürümüne göz atın veya daha fazla bilgi edinmek için okumaya devam edin.

Yeni özellikler

Lighthouse tarafından desteklenen yeni Denetim paneli

Denetimler paneli artık Lighthouse tarafından destekleniyor. Lighthouse, web sayfalarınızın kalitesini ölçmek için kapsamlı bir test grubu sunar.

Progresif Web Uygulaması, Performans, Erişilebilirlik ve En İyi Uygulamalar için en üstteki puanlar, bu kategorilerin her biri için toplam puanlarınızdır. Raporun geri kalanı, puanlarınızı belirleyen testlerin her birinin dökümünü içerir. Başarısız testleri düzelterek web sayfanızın kalitesini artırın.

Şekil 1. Lighthouse raporu

Bir sayfayı denetlemek için:

1. Denetimler sekmesini tıklayın.
2. Denetleme gerçekleştir'i tıklayın.
3. Denetim çalıştır'ı tıklayın. Lighthouse, DevTools'u bir mobil cihazı taklit edecek şekilde ayarlar, sayfada bir dizi test çalıştırır ve sonuçları Denetimler panelinde gösterir.

Google I/O 2017 'de Lighthouse

Lighthouse 'un DevTools'a entegrasyonu hakkında daha fazla bilgi edinmek için aşağıdaki Google I/O 2017 DevTools konuşmasına göz atın.

Lighthouse'a katkıda bulunma

Lighthouse, açık kaynak bir projedir. Lighthouse 'un işleyiş şekli ve bu programa nasıl katkıda bulunabileceğiniz hakkında daha fazla bilgi edinmek için aşağıdaki Google I/O 2017 Lighthouse konuşmasına göz atın.

Lighthouse denetimi için bir fikriniz mi var? Buradan paylaşın.

Üçüncü taraf rozetleri

Bir sayfada ağ isteği gönderen, Console'a günlük kaydı yapan ve JavaScript yürüten öğeler hakkında daha fazla bilgi edinmek için üçüncü taraf rozetlerini kullanın.

Şekil 2. Ağ panelinde fareyle bir üçüncü taraf rozetinin üzerine gelme

Şekil 3. Fareyle Console'da bir üçüncü taraf rozetinin üzerine gelme

Üçüncü taraf rozetlerini etkinleştirmek için:

1. Komut menüsünü açın.
2. Show third party badges komutunu çalıştırın.

Performans kaydı etkinliğini, etkinliklere neden olan üçüncü taraf varlıklarına göre gruplandırmak için Çağrı ağacı ve Aşağıdan Yukarı sekmelerindeki Ürüne göre gruplandır seçeneğini kullanın. DevTools ile performansı nasıl analiz edeceğinizi öğrenmek için Çalışma Zamanı Performansını Analiz Etmeye Başlama başlıklı makaleyi inceleyin.

Şekil 4. Aşağıdan Yukarı sekmesinde ürüne göre gruplandırma

Buraya Devam Et'e yönelik yeni bir hareket

Bir komut dosyasının 25. satırında duraklatıldığınızu ve 50. satıra atlamak istediğinizi varsayalım. Eskiden 50. satırda bir kesme noktası belirleyebilir veya satırı sağ tıklayıp Buraya devam et'i seçebilirdiniz. Ancak artık bu iş akışını yönetmek için daha hızlı bir hareket var.

Kodda adım atarken Komut (Mac) veya Kontrol (Windows, Linux) tuşunu basılı tutun ve ardından tıklayarak ilgili kod satırına geçin. DevTools, atlanabilir hedefleri mavi renkle vurgular.

Şekil 5. Buraya devam et

Geliştirici Araçları'nda hata ayıklamayla ilgili temel bilgileri öğrenmek için JavaScript'de Hata Ayıklama ile Başlayın başlıklı makaleyi inceleyin.

Eş zamansız işlere adım atın

DevTools ekibinin yakın gelecekteki önemli hedeflerinden biri, eşzamansız kodda hata ayıklama işlemini tahmin edilebilir hale getirmek ve eşzamansız yürütmenin eksiksiz bir geçmişini sunmaktır.

Buraya Devam Et'in yeni hareketi zaman uyumsuz kodda da çalışır. Command (Mac) veya Control (Windows, Linux) tuşunu basılı tuttuğunuzda DevTools, atlanabilir asenkron hedefleri yeşil renkle vurgular.

Örnek olarak I/O'daki DevTools konuşmasından aşağıdaki demoya göz atın.

Değişiklikler

Konsolda daha bilgilendirici nesne önizlemeleri

Daha önce, Console'da bir nesneyi günlüğe kaydettiğinizde veya değerlendirdiğinizde Console yalnızca Object değerini gösteriyordu. Bu da pek yararlı bir bilgi değildi. Console artık nesnenin içeriği hakkında daha fazla bilgi sağlıyor.

Şekil 6. Console'un nesneleri önizleme şekli

Şekil 7. Console'da nesnelerin önizlemesi artık nasıl yapılıyor?

Konsol'da daha bilgilendirici bağlam seçim menüsü

Console'un Bağlam Seçimi menüsünde artık mevcut bağlamlar hakkında daha fazla bilgi veriliyor.

• Başlıkta her bir öğenin ne olduğu açıklanır.
• Başlığın altındaki alt başlık, öğenin alındığı alanı açıklar.
• Görüntü alanında vurgulamak için fareyle bir iframe bağlamının üzerine gelin.

Şekil 8. Yeni Bağlam Seçimi menüsünde fareyle bir iframe'ın üzerine geldiğinizde ilgili iframe görüntüleme alanında vurgulanır

Kapsam sekmesinde anlık güncellemeler

Chrome 59'da kod kapsamı kaydedilirken Kapsam sekmesinde yalnızca "Kaydediliyor..." ifadesi gösterilir ve hangi kodun kullanıldığı gösterilmez. Artık Kapsam sekmesi, hangi kodun kullanıldığını anlık olarak gösterir.

Şekil 9. Eski Kapsam sekmesini kullanarak bir sayfayı yükleme ve sayfayla etkileşime geçme

Şekil 10. Yeni Kapsam sekmesini kullanarak bir sayfayı yükleme ve sayfayla etkileşime geçme

Daha basit ağ sınırlama seçenekleri

Ağ ve Performans panellerindeki ağ kısıtlama menüleri, yalnızca üç seçenek içerecek şekilde basitleştirildi: Çevrimdışı, Hindistan gibi yerlerde yaygın olan Yavaş 3G ve ABD gibi yerlerde yaygın olan Hızlı 3G.

Şekil 11. Yeni ağ sınırlama seçenekleri

Yavaşlatma seçenekleri, çekirdek düzeyindeki diğer yavaşlatma araçlarıyla eşleşecek şekilde değiştirildi. Bu değerler yanıltıcı olduğu için DevTools artık her seçeneğin yanında gecikme, indirme ve yükleme metriklerini göstermiyor. Amaç, her seçeneğin gerçek deneyimini eşleştirmektir.

Eş zamansız yığınlar varsayılan olarak etkindir

Asenkron onay kutusu Kaynaklar panelinden kaldırıldı. Eş zamansız yığın izlemeleri artık varsayılan olarak etkindir. Geçmişte bu seçenek, performans yükü nedeniyle etkinleştirilmesi gerekiyordu. Bu özellik artık varsayılan olarak etkinleştirilecek kadar az ek yük oluşturuyor. Asenkron yığın izlemelerinin devre dışı bırakılmasını tercih ediyorsanız Ayarlar'dan veya Komut Menüsü'nde Do not capture async stack traces komutunu çalıştırarak bunları devre dışı bırakabilirsiniz.

Google I/O 2017 'de DevTools

DevTools ekibinin son bir yıl içinde üzerinde çalıştığı konular ve yakın gelecekte ele alacağı önemli konular hakkında daha fazla bilgi edinmek için aşağıda Paul Irish'ın konuşmasına göz atın.

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.