Tarayıcı geliştirici araçlarının sırları

1. Console'da log()'dan çok daha fazla özellik var

• Filtreleme seçenekleri

• {} : değişken değerini/adını birlikte yazdırma

• warn/info/error() : log seviyesi

• assert() : yalnızca belirli koşullarda çıktı verme

• trace() : kimin çağırdığını gösterme

• group() : mesajları gruplayıp açıp kapatabilme

• table() : bilgileri tablo olarak gösterme

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

  `return {url: a.href, text: a.innerText}`
  

  })

2. Kaynak koda erişmeden log bırakmak

• Live Expressions : gerçek zamanlı değişen değişken değerlerini görme

• logpoints : özel bir breakpoint türü; ilgili satır çalıştığında log üretir. Teknik olarak bakarsak, web sayfasının herhangi bir yerine console.log ekleyebilmek demektir

3. Tarayıcı dışına log bırakmak

• VS Code Debugger

4. Herhangi bir siteye kod enjekte etmek (Chromium tabanlı tarayıcılar: Edge, Chrome, Brave..)

• Snippets : mevcut web sitesi için script çalıştırma

• Overrides : uzak script'in bir kopyasını kaydedip düzenledikten sonra sayfa yüklenirken onunla override etme

5. Daha fazla yerde Inspect & Debug yapmak mümkün (Chromium tabanlı tarayıcılar)

• Electron tabanlı her şeyi destekler : GitHub Desktop, VS Code, hatta tarayıcının Developer Tools'unu bile yine Developer Tools ile debug etmek mümkün

• MS Edge Tools for VS Code

6. Dağınık sırlar

• İnsanlar geliştirici araçlarının sadece bir kısmını kullanıyor. Muhtemelen bunun nedeni yeterli açıklama dokümantasyonunun olmaması; bu yüzden çok zaman harcayıp doküman hazırladılar ama bu da çözüm gibi görünmüyor

• Geliştirici araçları giderek daha karmaşık hale geliyor ve sayısız özellikle bunaltıcı oluyor. Bunu iyileştirmenin bir yolu yok mu?

→ Edge, Focus Mode'u sunmayı planlıyor. Tüm özellikleri göstermek yerine kullanım senaryosuna göre sadece gerekli araçları göstermek

→ Informational Overlays de üzerinde çalışılıyor. Geliştirici araçlarının içinde doğrudan görülebilen yardım sunmak

• Kod yazımı ile ortaya çıkan ürünü debug etme arasında hâlâ bir kopukluk var

→ Geliştirici araçlarında yapılan değişiklikler koda nasıl yansıtılabilir?

→ Yollardan biri, geliştirici araçlarını VSCode ile değiştirmek ve aracı kullanırken sabit diskteki dosyaları doğrudan düzenlemesini sağlamak

→ Diğeri ise VSCode eklentisinin bir parçası olarak, geliştirici araçlarıyla yapılan değişikliklerin disk dosyalarına da yazılmasını seçilebilir hale getirmek

7. Geliştirici araçlarının hedef kitlesi ve müşterisi sensin

→ Report a Bug / Request a Feature gibi yollarla geri bildirim vermek

[galadbran]

Biraz farklı bir açıdan bakarsak, kullanıcılarla geliştiricilerin aynı araçlara sahip olması söz konusu. Bu yüzden web uygulamalarının, kurnazca ve kötü niyetli kullanıcılarla başa çıkmaya epey dikkat etmesi gerekecek gibi görünüyor.

[laeyoung]

console.log() ile ilgili yazı

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

İyi özellikler olsa bile, belgelerde iyi örneklerin olup olmaması büyük bir fark yaratıyor gibi görünüyor.