Tarayıcı geliştirici araçlarının sırları
(christianheilmann.com)<p>1. Console'da `log()`'dan çok daha fazla özellik var<br />
- Filtreleme seçenekleri<br />
- `{}` : değişken değerini/adını birlikte yazdırma<br />
- `warn/info/error()` : log seviyesi<br />
- `assert()` : yalnızca belirli koşullarda çıktı verme<br />
- `trace()` : kimin çağırdığını gösterme <br />
- `group()` : mesajları gruplayıp açıp kapatabilme <br />
- `table()` : bilgileri tablo olarak gösterme <br />
- `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br />
`$$('a').map(a => {`<br />
`return {url: a.href, text: a.innerText}`<br />
`})`<br />
<br />
2. Kaynak koda erişmeden log bırakmak<br />
- Live Expressions : gerçek zamanlı değişen değişken değerlerini görme<br />
- 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<br />
<br />
3. Tarayıcı dışına log bırakmak <br />
- VS Code Debugger<br />
<br />
4. Herhangi bir siteye kod enjekte etmek (Chromium tabanlı tarayıcılar: Edge, Chrome, Brave..)<br />
- Snippets : mevcut web sitesi için script çalıştırma <br />
- Overrides : uzak script'in bir kopyasını kaydedip düzenledikten sonra sayfa yüklenirken onunla override etme <br />
<br />
5. Daha fazla yerde Inspect & Debug yapmak mümkün (Chromium tabanlı tarayıcılar)<br />
- 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<br />
- MS Edge Tools for VS Code <br />
<br />
6. Dağınık sırlar<br />
- İ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 <br />
- 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?<br />
→ Edge, Focus Mode'u sunmayı planlıyor. Tüm özellikleri göstermek yerine kullanım senaryosuna göre sadece gerekli araçları göstermek <br />
→ Informational Overlays de üzerinde çalışılıyor. Geliştirici araçlarının içinde doğrudan görülebilen yardım sunmak <br />
- Kod yazımı ile ortaya çıkan ürünü debug etme arasında hâlâ bir kopukluk var <br />
→ Geliştirici araçlarında yapılan değişiklikler koda nasıl yansıtılabilir?<br />
→ 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<br />
→ 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<br />
<br />
7. Geliştirici araçlarının hedef kitlesi ve müşterisi sensin <br />
→ Report a Bug / Request a Feature gibi yollarla geri bildirim vermek </p>
3 yorum