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

Hoş geldiniz! Chrome 60 sürümünde Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

• Yeni Denetimler paneli, progresif web uygulamaları, performans, erişilebilirlik ve en iyi uygulamaları paylaşacağım.
• Üçüncü taraf rozetleri. Hangi üçüncü tarafların ağ isteklerinde bulunduğunu, öğrenmek için Konsol ve JavaScript'in çalıştırılması.
• Buraya Devam Edin. 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.
• Konsol'daki nesne önizlemeleri.
• Kapsam sekmesindeki gerçek zamanlı güncellemeler.
• Konsolda bağlam seçmek için kullanılan yeni bir menü.
• Daha basit ağ kısıtlama seçenekleri.
• Eşzamansız yığın izlemeler varsayılan olarak etkindir.

Daha fazla bilgi edinmek için aşağıdaki sürüm notlarının video sürümüne göz atın veya okumaya devam edin.

Yeni özellikler

Lighthouse tarafından desteklenen yeni Denetimler paneli

Denetimler paneli artık Lighthouse tarafından desteklenmektedir. Lighthouse, Virtual Verde'nin yardımıyla testler ve geliştirmeler içerir.

Progresif Web Uygulaması, Performans ve Erişilebilirlik ve En İyi Uygulamalar, bu koşulların her biri için toplam puanlarınızdır. tıklayın. Raporun geri kalanı, puanlarınızı belirleyen testlerin her birinin dökümüdü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. Denetim gerçekleştir'i tıklayın.
3. Denetimi çalıştır'ı tıklayın. Lighthouse, mobil cihaz emülasyonu için Geliştirici Araçları'nı kurar ve birçok sayfada test eder ve sonuçları Denetimler panelinde görüntüler.

Google I/O 2017'de deniz feneri

Lighthouse'un entegrasyonu hakkında daha fazla bilgi edinmek için aşağıdaki Google I/O '17'de yapılan Geliştirici Araçları konuşmasına göz atın bulun.

Lighthouse'a katkıda bulunun

Lighthouse açık kaynak bir projedir. Google Analytics'in nasıl çalıştığı ve aşağıdaki Google I/O 2017'de Lighthouse konuşmasını izleyin.

Lighthouse denetimiyle ilgili bir fikriniz mi var? Burada yayınlayın!

Üçüncü taraf rozetleri

Bir cihazda ağ istekleri gönderen tüzel kişiler hakkında daha fazla bilgi edinmek için Console'a giriş yapma ve JavaScript'i yürütme.

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

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

Üçü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ı 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 Etkinliklere neden olan üçüncü taraf tüzel kişilerin etkinliklerini kaydetme Kullanmaya Başlama Çalışma Zamanı Performansını Analiz Etme başlıklı makaleyi okuyabilirsiniz.

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

Buraya Devam Et için yeni hareket

Bir komut dosyasının 25. satırında duraklatıldığını ve 50. satıra atlamak istediğinizi varsayalım. Geçmişte, 50. satırda bir ayrılma noktası ayarlayın veya çizgiyi sağ tıklayıp Buraya devam et'i seçin. Ama şimdi, bu iş akışını yönetmek için daha hızlı bir hareket vardır.

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

5. Şekil. Buraya Devam Et

Geliştirici Araçları'nda hata ayıklamayla ilgili temel bilgileri öğrenmek için JavaScript Hatalarını Ayıklamaya Başlama bölümüne bakın.

Eş zamansız senkronizasyona geç

Yakın gelecekte Geliştirici Araçları ekibinin önemli bir teması, eşzamansız kodda hata ayıklama Böylece eşzamansız yürütmeye dair eksiksiz bir geçmiş sunabilir.

Buraya Devam Et özelliğinin yeni hareketi, eşzamansız kodla da çalışır. Basılı tuttuğunuzda Command (Mac) veya Control (Windows, Linux), Geliştirici Araçları'nın atlanabilir özelliği sayesinde eşzamansız hedefler yeşil renktedir.

Örnek için I/O'daki Geliştirici Araçları konuşmasının aşağıdaki demosunu izleyin.

Değişiklikler

Console'da daha bilgilendirici nesne önizlemeleri

Daha önce, Console'da bir nesneyi günlüğe kaydettiğinizde veya değerlendirirken Console yalnızca Object var, bu da pek faydalı değil. Artık Console'da yer alan izin verir.

6. Şekil. Console nesneleri önizlemek için nasıl kullanılır?

7. Şekil. Console artık nesneleri nasıl önizler?

Console'daki 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 sağlıyor.

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

8. Şekil. Yeni Bağlam Seçimi menüsünde bir iframe'in üzerine geldiğinizde, görüntü alanı

Kapsam sekmesinde anlık güncellemeler

Chrome 59'da kod kapsamı kaydedilirken Kapsam sekmesinde yalnızca "Kayıt...", veya kullanılan kod gizlidir. Artık Kapsam sekmesi sizi gerçek zamanlı olarak gösterir yardımcı olabilir.

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

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

Daha basit ağ kısıtlama seçenekleri

Ağ ve Performans panellerindeki ağ kısıtlama menüleri şu şekilde basitleştirilmiştir: yalnızca üç seçenek içeriyor: Çevrimdışı, Yavaş 3G (Hindistan gibi ülkelerde yaygındır), Hızlı 3G: Amerika Birleşik Devletleri gibi bölgelerde yaygın olarak kullanılır.

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

Kısıtlama seçenekleri, çekirdek düzeyindeki diğer kısıtlama araçlarıyla eşleşecek şekilde ayarlandı. Geliştirici Araçları numarası artık her seçeneğin yanında gecikme, indirme ve yükleme metriklerini gösterir. Çünkü bu değerler, yanıltıcıydı. Amaç, her seçeneğin gerçek deneyimini eşleştirmektir.

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

Eşzamansız onay kutusu Kaynaklar panelinden kaldırıldı. Eş zamansız yığın izlemeleri (stack trace) şu anda etkinleştiren: varsayılandır. Önceden bu seçenek, performans ek yükü nedeniyle etkinleştirilirdi. Genel giderler şu an bu özelliği varsayılan olarak etkinleştirecek kadar azdır. Eş zamansız yığın izlemeleri (stack trace) devre dışı bırakmayı tercih ederseniz bunları Ayarlar'dan veya Do not capture async stack traces komutunu Komut Menüsü'nde görebilirsiniz.

Google I/O '17'de Geliştirici Araçları

Geliştirici Araçları ekibinin neler yaptığı hakkında daha fazla bilgi edinmek için, efsanevi Paul Ireland'ın aşağıdaki konuşmasına göz atın önemli konulara değiniyor.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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