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

Kayce Basques

Chrome 73'teki DevTools'taki 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 karmaşık hale getirmeden mesajları Konsol'a kaydetmek için günlük noktalarını kullanın.

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

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

    Günlük noktası ekleme

    Şekil 1. Günlük noktası ekleme

  2. Logpoint ekle'yi seçin. Ayrılma Noktası Düzenleyici açılır.

    Kesme noktası düzenleyici

    Şekil 2. Kesme noktası düzenleyici

  3. Duraklatma noktası düzenleyicisine, Konsola kaydetmek istediğiniz ifadeyi girin.

    Günlük noktası ifadesini yazma

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

    İpucu! Bir değişkenin (ör. TodoApp) oturumunu kapatırken, Console'da adını ve değerini kapatmak için değişkeni bir nesneye (ör. {TodoApp}) sarın. Bu söz dizimi hakkında daha fazla bilgi edinmek için Her zaman nesneleri günlüğe kaydetme ve Nesne özelliği değeri kısayolu başlıklı makaleleri inceleyin.

  4. Kaydetmek için Enter tuşuna basın veya Duraklatma Noktası Düzenleyicisi'nin dışını tıklayın. Satır numarasının üst kısmındaki turuncu rozet, Günlük Noktası'nı temsil eder.

    174. satırda turuncu bir Logpoint rozeti

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

Satır bir sonraki sefer yürütüldüğünde DevTools, Logpoint ifadesinin sonucunu Console'a kaydeder.

Konsolda Logpoint ifadesinin sonucu

5. Şekil. Konsolda Logpoint 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 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.

Düğümleri inceleme

Şekil 6. Düğümleri inceleme

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

  1. İncele'yi Düğümleri inceleme tıklayın.

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

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

Kod kapsamı verilerini dışa aktarma

Kod kapsamı verileri artık JSON dosyası olarak dışa aktarılabilir. JSON şu şekilde 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, kodun kullanılan bölümlerini tanımlar. start, kullanılan bir aralık için başlangıç ofsetidir. end bitiş farkıdır. text, dosyanın tam metnidir.

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

Sayfa yüklenirken 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.

    Komut menüsü

    Şekil 7. Komut menüsü

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

    Kapsamı Göster

    Şekil 8. Kapsamı Göster

    Kapsam sekmesi açılır.

    Kapsam sekmesi

    9. Şekil. Kapsam sekmesi

  3. Yeniden yükle'yi Yeniden yükle tıklayın. DevTools 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'ı Dışa aktar tıklayın.

Kod kapsamı, DevTools ekibi tarafından yönetilen bir tarayıcı otomasyon aracı olan Puppeteer'da da kullanılabilir. 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. Örneğin,

Üst Karakter+Sekme tuşlarına bastığınızda son mesaja (veya değerlendirilen bir ifadenin sonucuna) odaklanırsınız. Mesajda bağlantı varsa önce son bağlantı vurgulanır. Enter tuşuna basarak bağlantıyı yeni bir sekmede açabilirsiniz. Sol ok tuşuna basıldığında iletinin tamamı vurgulanır (Şekil 13'e bakın).

Bağlantıya odaklanma

Şekil 11. Bağlantıya odaklanma

Yukarı ok tuşuna basıldığında sonraki bağlantıya odaklanırsınız.

Başka bir bağlantıya odaklanma

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

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

Tüm iletiye odaklanma

Şekil 13. Mesajın tamamına odaklanma

Sağ ok tuşuna bastığınızda, daraltılmış yığın izleme (veya nesne, dizi vb.) genişletilir.

Daraltılmış yığın izlemeyi genişletme

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

Hataları bildirmek veya iyileştirme önerisinde bulunmak için Chromium sorunu 865674'e bakın.

Renk seçicideki AAA kontrast oranı çizgisi

Renk seçicide artık hangi renklerin AAA kontrast oranı önerisini karşıladığını gösteren ikinci bir satır gösteriliyor. AA satırı, Chrome 65'ten beri mevcuttur.

AA satırı (üst) ve AAA çizgi (alt)

Şekil 15. AA hattı (üstte) ve AAA hattı (altta)

2 ç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 üzerindeki her şey ise AA önerisini bile karşılamıyor.

İpucu Genel olarak, AAA önerisini karşılayan metin miktarını artırarak sayfalarınızın okunabilirliğini iyileştirebilirsiniz. AAA önerisini karşılamanız mümkün değilse en azından AA önerisini karşılamayı deneyin.

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ır.

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

    Komut Menüsü

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

    Sensörler sekmesi

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

    Ayarlar'daki Coğrafi Konum sekmesi

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

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

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

    Özel coğrafi konum ekleme

    Şekil 19. Ö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 katlama özelliğini destekliyor.

54-65 arasındaki satırlar katlandı

Şekil 20. 54 ila 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 > 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. Fold'ı Kapat tıklayın.

Hataları bildirmek veya iyileştirme önerisinde bulunmak için Chromium sorunu 328431 başlıklı makaleye göz atın.

Mesajlar sekmesi

Çerçeveler sekmesi, Mesajlar sekmesi olarak yeniden adlandırıldı. Bu sekme yalnızca bir web soket bağlantısı incelenirken Ağ panelinde kullanılabilir.

Mesajlar sekmesi

Şekil 21. Mesajlar sekmesi

Hataları bildirmek veya iyileştirme önerisinde bulunmak için Chromium sorunu 802182 başlıklı makaleye 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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.

Geliştirici Araçları'ndaki yenilikler

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