Chrome Dev Tool Kullanışlı Özellikler

Taha Cankurt
Aug 27, 2020 · 3 min read
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

Thinkerfox

Translating business into software

Thinkerfox

A software company that thinks before acts.

Taha Cankurt

Written by

tahacankurt.com

Thinkerfox

A software company that thinks before acts.