Chrome Dev Tool Kullanışlı Özellikler
Web Developerlar olarak çalıştığımız süre boyunca editörlerimizden sonra en sık kullandığımız tool açık ara farkla browserımızda bulunan development tooldur.Bu yazımızda chrome dev toolda bulunan bizlere fayda sağlayabilecek bazı özelliklere değineceğiz.
1) document.designMode
Bu özellik yakın zamanda kullanıcıların kullanımına sunuldu.Design mode sayesinde yaptığınız web uygulamalarında anlık text değişikliği yapmak isteyen müşterilerinize hızlı bir şekilde istedikleri yazının uygulamada istenilen bölümde nasıl durduğunu gösterebilirsiniz.
document.designMode = ’on’
2) Network Hızını Simüle Etmek
Özellikle SPA uygulamalarınızda data fetch işlemleri sırasında load statetinizin nasıl gözüktüğünü detaylı olarak görmek istediğinizde bu özelliği kullanabilirsiniz.Bu özelliği load statelerinizi test etmek için timeOut yerine kullanabilirsiniz.Network hızı için default olarak test edebileceğiniz fast 3g slow 3g gibi profile’ları kullanabilirsiniz yada download ve upload hızlarını kendiniz belirlediğiniz kendi profile’ınızıda yaratabilirsiniz.
3) Pause Script Execution
Javascript ile çalışırken özellikle gelişmiş bir IDE yerine editör kullanıyorsanız Google Chrome’u debugger olarak kullanabilirsiniz.Bu noktada debug yapmak için breakpoint bırakmak verimli bir çözüm olacaktır. Bunun yanında daha basit işlemler için javascript yürütmesini durdurmak isterseniz chrome dev tools açık iken Ctrl+Shift+I yada macOs için fn + f8 kısayolunu kullanabilirsiniz.
4) Seçili Elementi Referans Almak
Bir elementi seçip o element ile çalışmak isterseniz element paneli üzerinden elemente tıklayıp konsola $0. yazmanız yeterli olacaktır.Referans aldığınız element üzerinden artık konsol yolu ile eventleri tetikleyebilir , değişiklik yapabilirsiniz.
Eğer jquery kullanıyor iseniz $($0) ile kolayca element üzerinden jquery fonksiyonlarına erişebilirsiniz.
$0.click()
5) Element State’ini Değiştirme
Özellikle css hover active gibi stateler ile uğraşırken bu özelliği sık sık kullanmamız gerekebiliyor.Bu özelliği kullanmadığınız taktirde eğer mümkünse her seferinde manuel olarak hedef aldığınız state’i tetiklemeniz gerekecektir.
6) Konsol Stillendirme
Javascript uygulamalarında her hangi bir değişkeni , objeyi veya fonksiyonu göstermek için genelde console.log kullanıyoruz.Ardışık değişken yada birden çok değişkenin aynı console satırında göstermek istediğinizde isterseniz bu değişkenleri veya bilgi yazılarınızı stillendirebilirsiniz.Birkaç örnek vermek gerekirse;
console.log("%cBu yazı yeşil olacaktır.", "color:green");
console.log("%cAynı zamanda font özelliklerine de müdahale edebiliriz.","color: blue; font-size: 20px");
Buna ek olarak listelerinizi veya dizilerinizi konsola basmak istediğinizde console.log yerine console.table kullanabilirsiniz.
7) Cihaz Sensörlerini Simüle Etmek
Günümüzde PWA(Progressive Web Application) kavramı ile birlikte web uygulamarı her geçen gün native deneyime adım adım yaklaşmakta.Yapılan güncellemeler ile birlikte mobil browserlar cihazlarda bulunan bir çok sensöre erişebiliyor.Mobil cihazlara geliştirdiğiniz web uygulamaları için cihazda bulunan sensörleri simüle edebileceğiniz bir araç mevcut.
