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

Chrome 73 sürümünde Geliştirici Araçları'ndaki yenilikler burada açıklanmıştır.

Bu sürüm notlarının video sürümü

Günlük noktaları

Kodlarınızı console.log() ile karmaşaya sokmadan mesajları Console'a kaydetmek için Günlük Noktaları'nı kullanın. çağrısının en iyi yoludur.

Günlük noktası eklemek için:

1. Günlük noktası eklemek istediğiniz satır numarasını sağ tıklayın.

   

   Şekil 1. Günlük Noktası Ekleme

2. Günlük noktası ekle'yi seçin. Ayrılma Noktası Düzenleyici açılır.

   

   2. Şekil. Kesme noktası düzenleyicisi

3. Ayrılma Noktası Düzenleyici'ye, konsola kaydetmek istediğiniz ifadeyi girin.

   

   3. Şekil. Günlük noktası ifadesini yazma

   İpucu: Bir değişkenin (ör. TodoApp) oturumunu kapatırken değişkeni bir nesne (ör. {TodoApp}) kullanarak konsolda adını ve değerini kapatın. Daha fazla bilgi için Nesneleri Her Zaman Günlüğe Kaydet ve Nesne Özellik Değeri Kısaltması (bu söz dizimi hakkında daha fazla bilgi edinin).

4. Kaydetmek için Enter tuşuna basın veya Ayrılma Noktası Düzenleyici'nin dışını tıklayın. Turuncu rozet + işareti Günlük Noktası'nı gösterir.

   

   4. Şekil. 174. satırda turuncu Günlük Noktası rozeti

Satır bir sonraki yürütüldüğünde Geliştirici Araçları, Günlük noktası ifadesinin sonucunu Konsol.

5. Şekil. Konsoldaki Günlük Noktası ifadesinin sonucu

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorunu #700519 sayfasına bakın.

İnceleme Modu'nda ayrıntılı ipuçları

Geliştirici Araçları, bir düğümü incelerken artık yaygın olarak önem taşıyan yazı tipi boyutu, yazı tipi rengi, kontrast oranı ve kutu modeli boyutları gibi bilgiler de bulunur.

6. Şekil. Düğüm inceleme

Bir düğümü incelemek için:

1. İncele'yi tıklayın.

   İpucu: Klavye kısayolunu görmek için fareyle İncele'nin üzerine gelin.

2. Görüntü alanınızda, düğümün üzerine gelin.

Kod kapsamı verilerini dışa aktarma

Kod kapsamı verileri artık JSON dosyası olarak dışa aktarılabilir. JSON aşağıdaki gibi görünür:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url, Geliştirici Araçları'nın analiz ettiği CSS veya JavaScript dosyasının URL'sidir. ranges, kısımlarına karşılık gelir. start, kullanılan aralığın başlangıç ofsetidir. end bitiş ofsetidir. text, dosyanın tam metnidir.

Yukarıdaki örnekte, 0 - 21 aralığı body { margin: 1em; } değerine ve 45 - 21 aralığı 67, h1 { color: #317EFB; } değerine karşılık gelir. Başka bir deyişle, ilk ve son kural kümeleri, ortadakinde yoktu.

Sayfa yüklemede ne kadar kod kullanıldığını analiz etmek ve verileri dışa aktarmak için:

1. Ctrl+Üst Karakter+P tuşlarına basın veya Komut Menüsünü açmak için Command+Üst Karakter+P (Mac) tuşlarına basın.

   

   7. Şekil. Komut Menüsü

2. coverage yazmaya başlayın, Kapsamı Göster'i seçin ve Enter tuşuna basın.

   

   8. Şekil. Kapsamı Göster

   Kapsam sekmesi açılır.

   

   9. Şekil. Kapsam sekmesi

3. Yeniden yükle'yi tıklayın. DevTools sayfayı yeniden yükler ve gönderilen koda kıyasla ne kadar kod kullanıldığını kaydeder.

4. Dışa aktarmak için Dışa aktar'ı tıklayın. verilerini JSON dosyası olarak kaydeder.

Kod kapsamı, Geliştirici Araçları tarafından yönetilen bir tarayıcı otomasyon aracı olan Puppeteer'da da kullanılabilir. ekibinde çalışıyorum. Kapsam bölümünü inceleyin.

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorun numarası 717195'e bakın.

Klavyeyle Konsolda gezinme

Artık konsolda gezinmek için klavyeyi kullanabilirsiniz. Bir örnekle açıklayalım.

Üst Karakter+Sekme tuşlarına basıldığında son iletiye (veya değerlendirilen bir iletinin ifadesi) için geçerlidir. İletide bağlantı varsa önce son bağlantı vurgulanır. Bastırma Enter tuşu, bağlantıyı yeni bir sekmede açar. Sol ok tuşuna basıldığında (bkz. Şekil 13).

Şekil 11. Bağlantıya odaklanma

Yukarı ok tuşuna bastığınızda sonraki bağlantıya yönlendirilirsiniz.

Şekil 12. Başka bir bağlantıya odaklanma

Yukarı ok tuşuna tekrar basıldığında tüm mesaj odaklanır.

13. Şekil. Tüm iletiye odaklanma

Sağ ok tuşuna basıldığında, daraltılmış yığın izleme (stack trace) (veya nesne, dizi vb.) açık).

14. Şekil. Daraltılmış yığın izlemeyi genişletme

Sol ok tuşuna bastığınızda, genişletilmiş bir iletiyi veya sonucu daraltırsınız.

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorunu #865674 başlıklı makaleye bakın.

Renk seçicideki AAA kontrast oranı çizgisi

Renk seçici artık hangi renklerin AAA kontrast oranını karşıladığını belirtmek için ikinci bir satır gösteriyor. öğrenin. AA çizgisi Chrome 65 sürümünden beri var.

15. Şekil. AA satırı (üst) ve AAA çizgi (alt)

2 çizgi arasındaki renkler, AA önerisini karşılayan ancak AAA'ya uymayan renkleri temsil eder. öneririz. Bir renk AAA önerisine uygunsa bu rengin aynı tarafındaki her şey uygun olduğunu anlamışsınızdır. Örneğin, Şekil 15'te alt satırın altındaki her şey AAA'dır, ve üst satırın üzerindeki hiçbir şey AA önerisini bile karşılamıyor.

İpucu: Genel olarak, metin miktarını artırarak sayfalarınızın okunabilirliğini iyileştirebilirsiniz. bir çözüm üretebiliriz. AAA önerisini karşılayamıyorsa bazı kurumlar en azından AA önerisini karşılamaya çalışın.

Bu özelliğe nasıl erişeceğinizi öğrenmek için Renk Seçici'de Kontrast oranı bölümüne bakın.

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorunu #879856 sayfasına bakın.

Özel coğrafi konum geçersiz kılmalarını kaydet

Sensörler sekmesi artık özel coğrafi konum geçersiz kılmalarını kaydetmenize olanak tanıyor.

1. Ctrl+Üst Karakter+P tuşlarına basın veya Komut Menüsünü açmak için Command+Üst Karakter+P (Mac) tuşlarına basın.

   

   16. Şekil. Komut Menüsü

2. sensors yazın, Sensörleri Göster'i seçin ve Enter tuşuna basın. Sensörler sekmesi açılır.

   

   17. Şekil. Sensörler sekmesi

3. Coğrafi Konum bölümünde Yönet'i tıklayın. Ayarlar > Coğrafi konumlar açılır.

   

   18. Şekil. Ayarlar'daki Coğrafi Konum sekmesi

4. Konum ekle'yi tıklayın.

5. Konum adı, enlem ve boylam girip Ekle'yi tıklayın.

   

   19. Şekil. Özel coğrafi konum ekleme

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorunu #649657 sayfasına göz atın.

Kod daraltma

Kaynaklar ve Ağ panelleri artık kod daraltmayı destekliyor.

20. Şekil. 54-65 arasındaki satırlar katlandı

Kod daraltmayı etkinleştirmek için:

1. F1'ı açmak için F1 tuşuna basın.
2. Ayarlar bölümünde > Tercihler > Kaynaklar, Kod katlama özelliğini etkinleştirir.

Bir kod bloğunu katlamak için:

1. Farenizi engellemenin başladığı satır numarasının üzerine getirin.
2. Katlayın'ı tıklayın.

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorun numarası 328431'e bakın.

Mesajlar sekmesi

Çerçeveler sekmesi, Mesajlar sekmesi olarak yeniden adlandırıldı. Bu sekme yalnızca Ağ paneli.

Şekil 21. Mesajlar sekmesi

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorun numarası 802182'ye bakın.

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