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

Hoş geldiniz! Chrome 60'ta Geliştirici Araçları'na eklenecek yeni özellikler ve önemli değişiklikler:

• Progresif web uygulamaları, performans, erişilebilirlik ve en iyi uygulamalarla ilgili testlerin yer aldığı yeni bir Denetimler paneli.
• Üçüncü taraf rozetleri. Hangi üçüncü tarafların ağ istekleri gönderdiğini, Console'a günlük kaydı yaptığını ve JavaScript'i yürüttüğünü öğrenin.
• Buraya Kadar Olanları Göster'i tıklayın. JavaScript hata ayıklama iş akışınızı hızlandırabilecek yeni bir hareket.
• Asenkron JavaScript için tahmin edilebilir hata ayıklama.
• Console'daki nesne önizlemeleri.
• Kapsam sekmesinde anlık güncellemeler.
• Konsol'da bağlam seçmek için yeni bir menü.
• Daha basit ağ sınırlama seçenekleri.
• Eş zamansız yığın izlemeler varsayılan olarak etkindir.

Bu sürüm notlarının video versiyonunu aşağıda inceleyebilir veya daha fazla bilgi edinmek için okumaya devam edebilirsiniz.

Yeni özellikler

Lighthouse tarafından desteklenen yeni Denetimler 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 üstte gösterilen puanlar, bu kategorilerin her birindeki toplam puanlarınızdır. Raporun geri kalanında, puanlarınızı belirleyen testlerin her birinin dökümü yer alır. Başarısız olan 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 gerçekleştir'i tıklayın. Lighthouse, DevTools'u 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 Geliştirici Araçları'na entegrasyonu hakkında daha fazla bilgi edinmek için Google I/O 2017'deki Geliştirici Araçları konuşmasına göz atın.

Lighthouse'a katkıda bulunma

Lighthouse, açık kaynaklı bir projedir. Bu araçla ilgili daha fazla bilgi edinmek ve araca nasıl katkıda bulunabileceğinizi öğrenmek için Google I/O 2017 'deki Lighthouse konuşmasını aşağıda bulabilirsiniz.

Lighthouse denetimiyle ilgili bir fikriniz mi var? Burada paylaşın.

Üçüncü taraf rozetleri

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

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

Şekil 3. Console'da üçü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.

Etkinliklere neden olan üçüncü taraf kuruluşlara göre performans kayıt etkinliğini gruplandırmak için Çağrı Ağacı ve Aşağıdan Yukarıya sekmelerindeki Ürüne göre gruplandır seçeneğini kullanın. Geliştirici Araçları 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ıya sekmesinde ürüne göre gruplandırma

Buradan Devam Et için yeni hareket

Bir senaryonun 25. satırında duraklattığınızı ve 50. satıra gitmek istediğinizi varsayalım. Geçmişte, 50. satırda bir kesme noktası ayarlayabilir veya satırı sağ tıklayıp Buraya kadar devam et'i seçebilirdiniz. Ancak artık bu iş akışını yönetmek için daha hızlı bir hareket kullanabilirsiniz.

Kodda adım adım ilerlerken Command (Mac) veya Control (Windows, Linux) tuşunu basılı tutun ve ardından bu kod satırına gitmek için tıklayın. Geliştirici Araçları, atlanabilir hedefleri mavi renkle vurgular.

Şekil 5. Buraya Kadar Devam Et

Geliştirici Araçları'nda hata ayıklamanın temellerini öğrenmek için JavaScript'te Hata Ayıklamaya Başlama başlıklı makaleyi inceleyin.

Eşzamansızlığa geçiş

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

Buraya Kadar Devam Et için yeni hareket de zaman uyumsuz kodla çalışır. Command (Mac) veya Control (Windows, Linux) tuşunu basılı tuttuğunuzda Geliştirici Araçları, atlanabilir asenkron hedefleri yeşil renkte vurgular.

Bir örnek için I/O'daki DevTools konuşmasından alınan 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 değer pek de faydalı değildi. Console artık nesnenin içeriği hakkında daha fazla bilgi veriyor.

Şekil 6. Console'un nesneleri önizlemek için kullandığı yöntem

Şekil 7 Console'da nesnelerin önizlemesi nasıl gösteriliyor?

Konsolda daha bilgilendirici bağlam seçimi menüsü

Konsolun Bağlam Seçimi menüsü artık mevcut bağlamlar hakkında daha fazla bilgi sunuyor.

• Başlık, her bir öğenin ne olduğunu açıklar.
• Başlığın altındaki alt başlık, öğenin geldiği alanı açıklar.
• Bir iframe bağlamının üzerine gelerek görüntü alanında vurgulayın.

Şekil 8 Yeni bağlam seçimi menüsünde bir iFrame'in üzerine gelindiğinde bu iFrame, görünüm alanında vurgulanır.

Kapsam sekmesinde anlık güncellemeler

Chrome 59'da kod kapsamı kaydedilirken Kapsam sekmesinde yalnızca "Kaydediliyor..." mesajı gösteriliyor ve hangi kodun kullanıldığı görünmüyordu. Artık Kapsam sekmesinde hangi kodun kullanıldığı gerçek zamanlı olarak gösteriliyor.

Şekil 9. Eski Kapsam sekmesini kullanarak bir sayfayı yükleme ve sayfayla etkileşim kurma

Şekil 10. Yeni Kapsam sekmesini kullanarak bir sayfayı yükleme ve sayfayla etkileşimde bulunma

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

Ağ ve Performans panellerindeki ağ kısıtlama menüleri basitleştirilerek yalnızca üç seçenek içerecek şekilde değiş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

Sınırlama seçenekleri, diğer çekirdek düzeyinde sınırlama araçlarıyla eşleşecek şekilde ayarlandı. Bu değerler yanıltıcı olduğundan, 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.

Kaynaklar panelinden Async (Asenkron) onay kutusu kaldırıldı. Eş zamansız yığın izleme (stack trace) artık varsayılan olarak etkindir. Geçmişte, performans ek yükü nedeniyle bu seçenek isteğe bağlıydı. Ek yük artık özelliği varsayılan olarak etkinleştirecek kadar az. Asenkron yığın izlemelerinin devre dışı bırakılmasını tercih ederseniz bunları Ayarlar'dan veya Komut Menüsü'nde Do not capture async stack traces komutunu çalıştırarak devre dışı bırakabilirsiniz.

Google I/O 2017 'de DevTools

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

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