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

Kayce Basques

Chrome 73'teki Geliştirme Araçları'nda yapılan yenilikleri aşağıda bulabilirsiniz.

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

Günlük noktaları

Kodunuzu console.log() çağrılarıyla karıştırmadan iletileri Konsol'a kaydetmek için günlük noktalarını kullanın.

Logpoint 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. Kesme noktası düzenleyicisi açılır.

   

   Şekil 2. Kesme noktası düzenleyicisi

3. Kesme Noktası Düzenleyicisi'nde, Konsol'a kaydetmek istediğiniz ifadeyi girin.

   

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

   İpucu! Bir değişkenin (ör. TodoApp) günlüğünü oluştururken değişkeni bir nesneye (ör. {TodoApp}) sarmalayarak adının ve değerinin Konsol'da günlüğünü oluşturun. Bu söz dizimi hakkında daha fazla bilgi edinmek için Always Log Objects (Nesneleri Her Zaman Günlüğe Kaydet) ve Object Property Value Shorthand (Nesne Özelliği Değeri Kısaltması) bölümlerini inceleyin.

4. Kaydetmek için Enter tuşuna basın veya Kesme Noktası Düzenleyici'nin dışını tıklayın. Satır numarasının üzerindeki turuncu rozet, Logpoint'i gösterir.

   

   Şekil 4. 174. satırda turuncu bir Logpoint rozeti

Satır bir sonraki yürütülme sırasında, Geliştirici Araçları Logpoint ifadesinin sonucunu Console'a kaydeder.

Şekil 5. Konsoldaki Logpoint ifadesinin sonucu

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için Chromium sorunu #700519'u inceleyin.

İnceleme modunda ayrıntılı ipuçları

Bir düğüm incelenirken DevTools artık yazı tipi boyutu, yazı tipi rengi, kontrast oranı ve kutu modeli boyutları gibi yaygın olarak önemli bilgileri içeren genişletilmiş bir ipucu gösteriyor.

Şekil 6. 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ünüm alanınızda imleçle düğümün üzerine gelin.

Kod kapsamı verilerini dışa aktarma

Kod kapsamı verileri artık JSON dosyası olarak dışa aktarılabilir. JSON şöyle 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, kullanılan kod bölümlerini açıklar. start, kullanılan bir aralığın başlangıç uzaklığıdır. end bitiş farkıdır. text, dosyanın tam metnidir.

Yukarıdaki örnekte 0-21 aralığı body { margin: 1em; }, 45-67 aralığı ise h1 { color: #317EFB; } değerine karşılık gelir. Diğer bir deyişle, ilk ve son kural kümeleri kullanıldı, ortadaki kural kümesi ise kullanılmadı.

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

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

   

   Şekil 7 Komut menüsü

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

   

   Şekil 8 Kapsamı Göster

   Kapsam sekmesi açılır.

   

   Şekil 9. Kapsam sekmesi

3. Yeniden yükle'yi tıklayın. Geliştirici Araçları, sayfayı yeniden yükler ve gönderilen kod miktarına kıyasla ne kadar kod kullanıldığını kaydeder.

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

Kod kapsamı, DevTools ekibi tarafından sürdürülen bir tarayıcı otomasyon aracı olan Puppeteer'da da kullanılabilir. Kapsam başlıklı makaleyi inceleyin.

Hata bildirmek veya iyileştirme önermek için Chromium sorunu #717195'e bakın.

Klavyeyle Console'da gezinme

Artık Console'da gezinmek için klavyeyi kullanabilirsiniz. Örneğin,

Üst Karakter+Sekme tuşlarına basıldığında odak son mesaja (veya değerlendirilen bir ifadenin sonucuna) taşınır. Mesaj bağlantı içeriyorsa önce son bağlantı vurgulanır. Enter tuşuna bastığınızda bağlantı yeni sekmede açılır. Sol ok tuşuna basıldığında iletinin tamamı vurgulanır (Şekil 13'e bakın).

Şekil 11. Bağlantıya odaklanma

Yukarı ok tuşuna basıldığında odak sonraki bağlantıya taşınır.

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

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

Şekil 13. Tüm mesaja odaklanma

Sağ ok tuşuna basıldığında daraltılmış bir yığın izi (veya nesne, dizi vb.) genişletilir.

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

Sol ok tuşuna basıldığında genişletilmiş bir mesaj veya sonuç daraltılır.

Hata bildirmek veya iyileştirme önermek için Chromium sorunu #865674'e bakın.

Renk seçicide AAA kontrast oranı çizgisi

Renk seçicide artık hangi renklerin AAA kontrast oranı önerisine uygun olduğunu gösteren ikinci bir satır yer alıyor. AA satırı Chrome 65'ten beri mevcuttur.

Şekil 15. AA çizgisi (üst) ve AAA çizgisi (alt)

İki çizgi arasındaki renkler, AA önerisini karşılayan ancak AAA önerisini karşılamayan renkleri temsil eder. Bir renk AAA önerisini karşıladığında, bu rengin aynı tarafındaki her şey de öneriyi karşılar. Örneğin, Şekil 15'te alt çizginin altındaki her şey AAA, üst çizginin üstündeki her şey ise AA önerisini bile karşılamamaktadır.

İpucu! Genel olarak, AAA önerisine uygun metin miktarını artırarak sayfalarınızın okunabilirliğini iyileştirebilirsiniz. Bazı nedenlerden dolayı AAA önerisini karşılamak mümkün değilse en azından AA önerisini karşılamaya çalışın.

Bu özelliğe nasıl erişeceğinizi öğrenmek için Renk seçicideki kontrast oranı başlıklı makaleyi inceleyin.

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

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

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

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

   

   Şekil 16. 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.

   

   Şekil 17. Sensörler sekmesi

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

   

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

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

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

   

   Şekil 19. Özel coğrafi konum ekleme

Hataları bildirmek veya iyileştirme önerisinde bulunmak için Chromium sorunu #649657'ye bakın.

Kod daraltma

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

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

Kod daraltmayı etkinleştirmek için:

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

Bir kod bloğunu katlamak için:

1. Farenizi bloğun başladığı satır numarasının üzerine getirin.
2. Katla'yı tıklayın.

Hata bildirmek veya iyileştirme önermek için Chromium sorunu #328431'e bakın.

Mesajlar sekmesi

Çerçeveler sekmesinin adı Mesajlar sekmesi olarak değiştirildi. Bu sekme yalnızca bir web soketi bağlantısı incelenirken Ağ panelinde kullanılabilir.

Şekil 21. Mesajlar sekmesi

Hata bildirmek veya iyileştirme önermek için Chromium sorunu #802182'ye bakı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.