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

Kayce Basques

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() çağrılarıyla karmaşaya sokmadan mesajları Konsol'a günlüğe kaydetmek için Günlük Noktaları'nı kullanın.

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

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

    Günlük Noktası Ekleme

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

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

    Kesme noktası düzenleyicisi

    2. Şekil. Kesme noktası düzenleyicisi

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

    Günlük noktası ifadesini yazma

    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}) içine alarak Console'da adını ve değerini kapatın. Bu söz dizimi hakkında daha fazla bilgi edinmek için Nesneleri Her Zaman Günlüğe Kaydet ve Nesne Özellik Değeri Shorthand bölümlerine bakın.

  4. Kaydetmek için Enter tuşuna basın veya Ayrılma Noktası Düzenleyici'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 Günlük Noktası rozeti

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

Satır bir sonraki yürütüldüğünde Geliştirici Araçları, Logpoint ifadesinin sonucunu konsola kaydeder.

Konsoldaki Günlük Noktası ifadesinin sonucu

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 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üğüm inceleme

6. Şekil. Düğüm inceleme

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

  1. İncele'yi Düğüm inceleme 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, kodun kullanılan bölümlerini açıklar. 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, 45-67 aralığı ise h1 { color: #317EFB; } değerine karşılık gelir. Diğer bir deyişle, birinci ve son kural kümesi kullanılır, ortadaki ise kullanılmaz.

Sayfa yüklemede 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ü

    7. Şekil. Komut Menüsü

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

    Kapsamı Göster

    8. Şekil. 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. Geliştirici Araçları, sayfayı yeniden yükler ve gönderilen koda kıyasla ne kadar kod kullanıldığını kaydeder.

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

Kod kapsamı, Geliştirici Araçları ekibi tarafından yönetilen bir tarayıcı otomasyon aracı olan Puppeteer'da da mevcuttur. 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 ifadenin sonucu) odaklanılır. İletide bağlantı varsa önce son bağlantı vurgulanır. Enter tuşuna bastığınızda, bağlantı yeni bir sekmede açılır. Sol ok tuşuna bastığınızda mesajın tamamı vurgulanır (bkz. Şekil 13).

Bağlantıya odaklanma

Şekil 11. Bağlantıya odaklanma

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

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

13. Şekil. Tüm iletiye 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

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, hangi renklerin AAA kontrast oranı önerisini karşıladığını belirtmek için artık ikinci bir satır gösteriyor. AA çizgisi Chrome 65 sürümünden beri var.

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

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

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'dır ve üst satırın üzerindeki her şey AA önerisini bile karşılamaz.

İpucu: Genel olarak, AAA önerisini karşılayan metin miktarını artırarak sayfalarınızın okunabilirliğini iyileştirebilirsiniz. AAA önerisinin karşılanması bir sebepten dolayı 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ç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. 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ü

    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.

    Sensörler sekmesi

    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.

    Ayarlar'daki Coğrafi Konum sekmesi

    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.

    Özel coğrafi konum ekleme

    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.

54-65 arasındaki satırlar katlandı

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 > Tercihler > Kaynaklar bölümünde Kod katlama'yı etkinleştirin.

Bir kod bloğunu katlamak için:

  1. Farenizi engellemenin başladığı satır numarasının üzerine getirin.
  2. Katlayın'ı Kapat 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 bir web soketi bağlantısı incelenirken Ağ panelinde bulunur.

Mesajlar sekmesi

Ş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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü