Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Chrome 73'te Geliştirici Araçları'ndaki yenilikler.

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 mesajları Konsola kaydetmek için Günlük Noktaları'nı kullanın.

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

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

Şekil 1. Günlük Noktası Ekleme
Günlük noktası ekle'yi seçin. Ayrılma Noktası Düzenleyicisi açılır.

2. Şekil. Breakpoint Düzenleyicisi
Ayrılma Noktası Düzenleyicisi'nde Console'a günlüğe kaydetmek istediğiniz ifadeyi girin.

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

İpucu: Bir değişkenin (ör. TodoApp) oturumunu kapatırken, Console'da değişkenin adını ve değerini çıkış yapmak için değişkeni bir nesneye (ör. {TodoApp}) sarmalayın. Bu söz dizimi hakkında daha fazla bilgi edinmek için Nesneleri Her Zaman Günlüğe Kaydet ve Nesne Özelliği Değeri Kısaltması bölümüne bakın.
Kaydetmek için Enter tuşuna basın veya Ayrılma Noktası Düzenleyicisi'nin dışını tıklayın. Satır numarasının üzerindeki turuncu rozet Günlük Noktası'nı temsil eder.

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

Satır tekrar çalıştırıldığında, DevTools Günlük Noktası ifadesinin sonucunu Konsol'a kaydeder.

Console'daki Günlük Noktası ifadesinin sonucu

5. Şekil. Console'daki Günlük Noktası ifadesinin sonucu

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

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

Geliştirici Araçları artık bir düğümü incelerken 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 denetleniyor

6. Şekil. Düğüm denetleniyor

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

Denetle'yi tıklayın.

İpucu: Klavye kısayolunu görmek için fareyle İncele'nin üzerine gelin.
Görüntünüzde 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, kodun kullanılan bölümlerini tanımlar. 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; }, 45 ila 67 aralığı ise h1 { color: #317EFB; } değerine karşılık gelir. Yani ilk ve son kural kümeleri kullanılmış, ortadaki kural ise kullanılmamıştır.

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

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

7. Şekil. Komut Menüsü
coverage yazmaya başlayın, Kapsamı Göster'i seçin ve ardından Enter tuşuna basın.

8. Şekil. Kapsamı Göster

Kapsam sekmesi açılır.

9. Şekil. Kapsam sekmesi
Yeniden yükle'yi tıklayın. Geliştirici Araçları sayfayı yeniden yükler ve gönderilen koda kıyasla ne kadar kod kullanıldığını kaydeder.
Verileri JSON dosyası olarak dışa aktarmak için 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 717195 numaralı Chromium sorunu sayfasına bakın.

Klavyeyle Console'da gezinme

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

Üst Karakter + Sekme tuşlarına basmak son iletiye (veya değerlendirilen bir ifadenin sonucuna) odaklanı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 odaklanır.

Başka bir bağlantıya odaklanma

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

Yukarı ok tuşuna tekrar bastığınızda iletinin tamamı odaklanır.

Mesajın tamamına odaklanma

Şekil 13. Mesajın tamamına odaklanma

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

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

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

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

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

Renk Seçici'deki AAA kontrast oranı çizgisi

Renk Seçici artık hangi renklerin AAA kontrast oranı önerisini karşıladığını belirtmek için ikinci bir satır gösteriyor. AA satırı Chrome 65'ten beri kullanılıyor.

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

Şekil 15. AA satırı (üst) ve AAA satırı (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, aynı tarafındaki tüm öğeler de öneriyi karşılar. Örneğin, Şekil 15'te alt çizginin altındaki tüm değerler AAA, üst çizginin üzerindeki her şey AA önerisini karşılamamaktadır.

İpucu: Genel olarak, AAA önerisine uygun metin miktarını artırarak sayfalarınızın okunabilirliğini iyileştirebilirsiniz. Herhangi bir nedenle 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çici'deki kontrast oranı bölümüne bakın.

Hataları bildirmek veya iyileştirme önerilerinde bulunmak için 879856 numaralı Chromium sorunu sayfasına 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ıyor.

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ü
sensors yazın, Sensörleri Göster'i seçin ve Enter tuşuna basın. Sensors (Sensörler) sekmesi açılır.

Şekil 17. Sensörler sekmesi
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
Konum ekle'yi tıklayın.
Bir konum adı, enlem ve boylam girip Ekle'yi tıklayın.

Şekil 19. Özel coğrafi konum ekleme

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

Kod daraltma

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

54-65 arasındaki satırlar katlandı

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

Kod daraltmayı etkinleştirmek için:

F1 tuşuna basarak Ayarlar'ı açın.
Ayarlar > Tercihler > Kaynaklar altında Kod daraltma'yı etkinleştirin.

Bir kod bloğunu daraltmak için:

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

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

Mesajlar sekmesi

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

Mesajlar sekmesi

Şekil 21. Mesajlar sekmesi

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.