Bu makalede özellikle web geliştiricilerin içli dışlı olduğu developer tools’ların çok bilinmeyen ama geliştirmele hız katacak bazı özellikleri anlatmaya çalışacağım.

Developer Tools’un Pek Bilinmeyen Nimetleri

Makale biraz uzun olacak ama açıkçası makaleyi tamamen bitirdiğinizde web projesi geliştirirken geliştirmelerinizde size çok pratiklik ve hız kazandıracak yöntemler öğreneceğinize eminim.

Makale içerisinde Developer tools içerisinde yer alan console sekmesine konsol, Elements sekmesine element, Sources sekmesine kaynak, Developer tools için’de geliştirici araçları denilecek ve makale devamında da bu şekilde kullanılacaktır

Evet lafı uzatmadan uzun makalemizin ilk örneğine geçelim.

1. $_

Bu komut en son çalıştırılan ifadenin çıktısını verir örnek üzerinden ne yapmaya çalıştığımızı anlayalım misal geliştirici araçlarında konsol sekmesi üzerinde bir dizi tanımladınız ve bu dizi nesnesine alt satırlardan değişken tanımlamadan erişebileceğiniz bir diğer yöntem $_ komutudur ben bu komuttan önce değişkene değeri aktarıp alt satırlardan ilgili değişken adı ile erişip işlemlerimi yapıyordum ama değişken tanımlamaya ihtiyaç duymadan bu komutu kullanmak daha pratik oluyor.

Bu komut’u görsel ile dahada anlamlandırmak için şöyle bir senaryo düşünelim üstteki açıklamamız arasında bahsettiğim gibi konsol’da bir dizi tanımlayalım ve tanımlama sonrasında $_ komutunu çalıştıralım yine aynı dizi çıktısını göreceksiniz ve $_.length komutunu çalıştırdığınızda ise dizinin boyutunu elde edeceksiniz ve hemen ardından tekrar $_ komutunu çalıştırdığınızda artık dizi değilde son çalıştırdığınız dizinin boyutu verdiğini göreceksiniz. Anlatılanları alttaki görüntüde görebilirsiniz.

2. $0 – $4

$0’dan $4’e kadar olan geliştirici araçları değişkenleri element sekmesinde yaptığınız son 5 dom elementini hafızasında tutar böylelikle testleriniz için uzun seçiciler yazmak yerine direkt olarak $0(en son seçilen dom elementi),$1,$2,$3,$4(Önceki 5.seçiminiz olan dom elementi) değişkenleri ile dom elementlerine erişebilirsiniz dom elementini değiştirdiğinizde sayı olarak bir üst sayıdaki değişkene aktarılır ve en son seçimize hep $0’dan erişebilirsiniz.

3. $(selector)

Bu seçiciyi hep geliştirici araçların’dan kullanınca jquery seçicisi olduğunu düşünürdüm ama aslında jquery olmayan sayfalardada çalıştığını gördüm bunun nedenide eğer sayfada jquery varsa jquery’i gerçekten kullanmış oluyorsunuz ve çıktı jQuery nesnesi oluyor ama sayfada jquery yoksa o zaman geliştiri araçlarının document.querySelector() fonksiyonu için oluşturduğu jquery benzeri kısayol ve yılların alışkanlığından gelen jquery benzeri sözdizimi ile dom elementlerini seçebiliyoruz. Örnek olarak tarayıcı adres barına data:html/text, yazıp enter’a basın ve size açılan boş sayfada konsoldan $(“body”) yazın ardından jquery olan bir sayfayı açın ve aynı kodu bu konsoldan çalıştırın bu iki aynı sözdiziminin verdiği sonuç farklı. jQuery olmayan siteden bize direkt olarak dom elementi dönüyor ama jquery varsa jQuery nesnesi dönüyor.

Eğer $(“body”) kodunuz sonrası dom nesnesi dönerse(Resim 3.1.’de sağdaki kısım) o zaman jquery’nin seçisicini değilde developer tools’un özelliği üzerinden kullanıyor olduğunuzu bilmelisiniz. Dönen sonuca sağ tuş yapıp Reveal in Elements panel tıklayınca ilgili element’e konuşmanmış şekilde element paneline geçişiniz sağlanır diğer bir seçenek Scroll into view seçeneğine tıklarsanız scroll’un ilgili element’e kaydırılması sağlanır.

Ama jQuery sonucu dönerse(Resim 3.1’de soldaki kısım) 0: body.pos… ile başlayan kısıma sağ tuş yaparsanız az önceki örnekte yer alan Reveal in Element panel seçeneğinin olduğunu göreceksiniz. Ayrıca daha hızlı bir yöntem olan direkt 0: body.pos… yazan kısma tıklarsanız Reveal in Element panel seçeği ile aynı işi yaparak Element sekmesine geçişinin sağlanır ve ilgili nesne işaretlenmiş olur fakat Scroll into view seçeneğinin olmadığını görmüşsünüzdür.

4. $$(selector)

Bir önceki örneğimizde yer alan $(selector) seçisinin aksine tek bir dom elementi(Eğer jQuery seçicisi değilse bir tane dom elementi döner) döndürmeyip belirttiğiniz seçici ile eşleşen tüm elementleri dizi olarak döndürür. Ayrıca $(selector) seçicisinin document.querySelector() seçicisinin kısayol kullanım seçki olduğunu söylemiştik $$(selector) seçiciside document.querySelectorAll() fonksiyonunun kısayoludur.

Üstteki kod bloğunda img etiketlerinin listesi dizi halinde geri dönmektedir ve for  döngüsü ile img etiketlerinin src özelliğindeki adres konsola log olarak bastırılmaktadır. Alttaki görüntüde anlattığımız bu kurgunun çıktısı mevcut.

5. $x(path)

XPath sorgusu yazarak dom elementlerini elde edebilirsiniz çıktı olarak $$(selector) seçicisinde gibi dizi olarak dom nesnesi dönmektedir. Alttaki kod ile sayfada yer alan tüm p etiketleri geri dönderilmektedir.

Alttaki sorgumuz ile p içerisinde a etiketi yer alan tüm p etiketlerinin listesi dönmektedir.

XPath için daha önce yazdığım 2 farklı makale yer almaktadır eğer XPath‘i merak ediyorsanız yada sözdizimlerine gözatmak için makaleleri ziyaret edebilirsiniz.

• XML İçerisinde XPath İle Filtreleme Yapma
• Xpath Sorgusu İle Xml İçerisindeki Verileri Süzme Yöntemleri

6. clear()

Konsol sekmesinde yazdığımız kodlar ve çıktılarını temizler.

7. copy(object)

fonksiyona parametre olarak geçtiğiniz nesne string türünde panonuza kopyalanır.

8. debug(function) & undebug

Çoğu zaman javascript’de yaşadığımız ve o an yaşanan soruna getiremediğimiz çözümden dolayı debug etmek için debug etmek istediğimiz yeri geliştirici araçları kaynak sekmesinden ilgili kod bloğu kısmını bulup breakpoint koyarız yada geliştirme ortamında debugger; kodunu yazıp sayfaya tekrar girer ve breakpoint’imize düşmesi için kaynak kodlarını yenilemek için sayfayı yenileriz. Eğer breakpoint’e düşmesi için yapacağınız işlem uzunsa yada hiç kodlarınız arasına debugger; v.s. yazmak istemiyorsanız o an geliştirici araçlarından buna çözüm bulmak isterseniz debug(function) yardımcısını kullanarak fonksiyonunuzun çalışma esnasına breakpoint koyabilirsiniz.

Bu olayı daha net anlamak için şöyle birşey yapalım jQuery’nin animate fonksiyonunun yaptığı işleri görmek için jQuery.Animation fonksiyonuna debug(jQuery.Animation) tanımı ile breakpoint koymuş oluyoruz ve herhangi bir nesneye animate fonksiyonu ile animasyon tanımladığımızda ve kod bloğu çalıştığında breakpoint’in jQuery.Animation adlı fonksiyona düştüğünü göreceksiniz.

Eğer debug’a düşmesini istediğiniz fonksiyonun artık debug’a düşmesini istemiyorsanız üstteki jQuery.Animation örneği üzerinden gidersek undebug(jQuery.Animation) kodunu çalıştırdığınızda artık jquery animate fonksiyonunu çalıştırdığınızda debug’a düşmediğini göreceksiniz.

9. dir(object)

Fonksiyona geçtiğiniz nesne tree list görünümünde sunulur fakat nesneyi direkt olarak çalıştırdığınızda nasıl bir fark olduğunu alttaki görüntüden ayırt edebilirsiniz.  9.1 document nesnesinin dir(object) fonksiyonu kullanılarak xml formatında görünümü sağlanıyor.

Önceki konularda varolan yöntemlerin kısaltması olduğu konusunda bazı bilgilendirmeler yapmıştır dir() yardımcısıda aslında yabancı değil console.dir() fonksiyonunun kısayolu denebilir.

10. dirxml(object)

Parametre olarak geçtiğiniz nesnenin xml türünde görünümü sağlanır. Yine varolan fonksiyonlardan olan console.dirxml() fonksiyonunun kısayoludur.

11. inspect(object/function)

Parametre olarak eğer bir seçici yazarsanız seçinizle eşleşen element seçili olarak Element sekmesi açılır ama bir javascript fonksiyonu geçerseniz o zaman Sources sekmesinde belirttiğiniz fonksiyona odaklanmış olarak açıldığını göreceksiniz.

Belirtiğiniz seçicinin tek bir element döndermesi gerekiyor Elements sekmesinden ilgili nesnenin seçilebilmesi için eğer birden fazla element dönerse Element sekmesinden belirttiğiniz seçici ile eşleşen element seçilemeyecektir.

12. getEventListeners(object)

Parametre olarak geçtiğiniz dom nesnesine kayıtlı olan olaylar listesi döner. Alltaki görseldeki örneğimizde getEventListeners(document) şeklinde tanımlama ile document nesnesine tanım olan tüm olaylar listelenmiştir gördüğünüz gibi. click, mousemove, mouseup gibi birçok olay kayıtlı olduğu görülmektedir.

Alttaki örnekte ise getEventListeners($(‘#scrollingList’)) kodu ile kayıtlı scrollingList id’li elemente kayıtlı olan 2 mousedown olayının döndüğünü görüyoruz.

Alttaki görüntüde görüleceği gibi her bir event nesnesini açarak özelliklerine gözatabilirsiniz. Burada dikkat etmeniz gereken kısım her bir event nesnesi altında yer alan listeners adındaki nesne altında yer alan [[FunctionLocation]] özelliğinde olay’ın tanımlandığı yerin konumu yer almaktadır. Bu konuma tıklayarak olayın kayıt edildiği kısma gidebilirsiniz.

13. keys(object) – values(object)

keys ve values yardımcı fonksiyonlarına geçtiğiniz nesneler içerisindeki özellik ve değerlerini alabilirsiniz. keys ile nesnedeki özellik adlarını values ilede özellik değerlerini alabilirsiniz. keys ve values fonksiyonlarını javascript kod bloklarınızda kullanmak isterseniz Object.keys() ve Object.values() fonksiyonlarını kullanabilirsiniz. Şimdi bu fonksiyonların ne gibi çıktı verdiklerine alttaki görseller ile inceleyelim.

14. monitor(function) & unmonitor(function)

monitor fonksiyonuna parametre olarak geçtiğiniz javascript fonksiyonu dinlenmiş oluyor fonksiyonu her çalıştırdığınızda log olarak konsola bastırılacaktır eğer fonksiyon paramereli ise ve fonksiyon çağrılırken parametre geçilmiş ise parametre değerleri ile birlikte konsola bastırılacaktır. Örnek olarak alttaki koda ve çıktıya göz atabilirsiniz.

Eğer fonksiyon dinleme işini durdurmak isterseniz o zaman üstteki örneğimizden yola çıkarsak unmonitor(sum) diyerek sum fonksiyonunu dinleme işini iptal edebiliriz.

15. profile([name]) and profileEnd([name])

profile() fonksiyonu ile JavaScript CPU profil oturumu başlatabilirsiniz. Fonksiyon tek parametre alıyor ve bu parametre girişi opsiyonel olan profil adı oluyor. profileEnd() fonksiyonunu kullanarak profili tamamlayabilirsiniz profile ait sonucu Profiles sekmesinde bulabilirsiniz. Örnek olarak Profilim adımda yeni bir profil başlatmak için alttaki gibi bir kod kullanmalısınız.

profili tamamlamak için alttaki gibi kod kullanmalısınız.

Profil içerisinde profile kullanabilirsiniz örnek olarak A profili başlattınız ve bu profil tamamlanmadan B profilini başlatabilirsiniz. Alttaki kod bloğundada bu durumu görebilirsiniz.

Profiles sekmenizin örnek ekran görüntüsü alttaki gibi olacaktır.

16. table(data[, columns])

Verileri tablo olarak görebilmek için kullanılabilecek fonksiyondur. Alttaki örnek kod bloğu ve örnek ekran görüntüsü ile nasıl bir çıktıya ulaşabileceğimizi görüyoruz.

17. monitorEvents(object[, events])

monitor fonksiyonunu kullanarak belirlediğimiz fonksiyonları dinliyorduk ve ilgili fonksiyon kullanıldığında konsola parametresi varsa değerleri ile birlikte log atıyordu. Dinlenecek olaylarınız tek bir tane string olarakda yazılabilir veya dizi olarak olayları girebilirsiniz.

monitorEvents‘de ise belirli bir nesnenin belirlediğiniz olaylarını dinleyebiliyorsunuz. Örnek verecek olursak bir elementin click, keydown, keyup gibi olayların dinlenmesini sağyalabilirsiniz böylelikle dinlemeye aldığınız olaylar çalıştığında konsola detaylı bir log atılır.

Örnek olarak window nesnesinin resize olayını dinlemek istersek alttaki kod bloğunu kullanabiliriz.

Eğer monitorEvents fonksiyonunun sadece ilk parametresine dinlenecek nesneyeyi girerseniz nesneye ait tüm olaylar dinlenecek ve olaylara ait loglar konsole yazılacaktır.

Bu kodu çalıştırdığınızda ve tarayıcıyı 2-3 defa boyutunu yeniden ayarladığınızda alttaki görüntüye benzer bir çıktı ile karşılacaksınız.

Eğer dinleyeceğiniz olaylar birden fazla ise o zaman ikinci parametreye string dizisi olarak olayları girmelisiniz. Örnek olarak window nesnesinin hem resize hemde scroll olayını dinlemek için alttaki kod bloğunu kullanmalısınız.

Bazı olaylar için gruplama oluşturulmuş bu gruplar ise mouse, key, touch, control gruplarıdır. Bu grupların içeriğindeki olaylar ise alttaki tabloda sunulmuştur.

Şimdi makale başlarında öğrendiğimiz $0 kısayolu ile Elements panelinden seçtiğimiz input türündeki elementin seçildiğini varsayıyoruz ve monitorEvents fonksiyonunda key grubunu dinlemeye alalım yani şu demek oluyor input elementinde keydown, keyup, keypress, textInput olayları dinlenmiş oluyor.

Eğer monitorEvents fonksiyonu ile dinlediğiniz bir olayı iptal etmek isterseniz unmonitorEvents fonksiyonu kullanılabilir monitorEvents‘de olduğu gibi bir tane olay girerseniz sadece girdiğiniz olaya ait dinleme işi iptal edilebilir ama birden fazla ise dizi olarak girebilirisiniz tüm olayları iptal etmek isterseniz unmonitorEvents fonksiyonun sadece ilk parametresine ilgili nesneyi girmelisiniz unmonitorEvents(window) gibi.

Makale sonuna kadar okuyarak gelebildiyseniz artık geliştirmelerinizde size yardımcı olacak birçok yardımcınız oldu tebrikler 🙂

Makale sonunda bir uyarı yapmak istiyorum Google Developer Tools içerisinde kullandığımız bu kısayolları javascript kodlarınızda kullanmayınız sonuçlarından ben sorumlu değilim 🙂 nedenide bu kısayollar sadece Google Developer Tools için oluşturulmuş kısayollardır eğer kullanacaksanız javascript’deki karşılıkları olan fonksiyonlarını kullanarak kodlarınızı yazınız referans olarak alttaki tabloyu kullanabilirsiniz.