Thinkerfox
Published in

Thinkerfox

Chrome Dev Tool Kullanışlı Özellikler

Chrome Dev Tools Logo

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’

Chrome Design Mode Gif
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.

Google Chrome Developer Tools Network Tab
Google Chrome Network Pane

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.

Chrome Pause Javascript Execution

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.

Dev Tools Console Styling

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.

Chrome Dev Tool Mobile Location Simulation

--

--

A software company that thinks before acts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store