JavaScript Console.log Kullanımı – Ahmet Cansever
Pazartesi , 26 Haziran 2017
Anasayfa » Javascript » JavaScript Console.log Kullanımı

JavaScript Console.log Kullanımı

Web dünyasında uzun süredir var olmasına rağmen çok fazla üzerinde durulmayan bir ekrandır console ekranı. Fakat javascript ile web projeleri geliştiriken console ekranında nesnelerin değişimini, değişkenlerin durumunu görmek alert ile ekrana bastırmaktan çok çok daha iyidir.

Bu makaleden neden console ekranı kullanmak gerekir onu anlatacağım. Ancak benim yazdıklarımdan çok daha fazlasını console ekranında yapmak mümkündür. Bunu da şimdiden belirteyim.

Öncelikle tarayıcımızın console ekranı olup olmadığını öğrenmemiz gerkiyor. Tarayıcımızda F12 tuşuna bastığımızda altta açılan sekmelerden birinde console görünüyorsa tarayıcımızın console ekranı olduğu anlamına gelmektedir.(Tercih olarak sıklıkla Chrome Tarayıcısını kullanıyorum console ekranına geçmek için sağ tık incele ile console ekranına geçiyorum)

 

Screenshot_1

Peki Console ekranında veri nasıl gösterilir. İnceleyelim.

Screenshot_2

 

Basit bir şekilde console.log yazarak console ekranında yazıyı gösterdik. Şimdi gelelim. Console.logun alertede farkına

Bizinin değerlerini ekran görmek için alert kullandığımızda ekrana metinsel olarak virgüllerle ekrana yazdırıyor. Ancak console.log kullanırsak dizinin tüm değerlerini tanımladığımız şekilde ekranda görme şansına sahip oluyoruz.

Screenshot_3

Tabi Sadece bu kadar değil örneği daha da derinleştirelim. Bir javascript nesnesine sahibiz ve bu nesneyi kontrol etmek için ekrana yazdırmak istediğimizde alert bize object yazısını döndürecektır.

Ama console log kısmına geçtiğimizde nesnenin özelliklerinden metodlarına kadar herşeyi görmek mümkün olacaktır.

Screenshot_4

Screenshot_5

 

Sadece oluşturduğumuz nesneler değil html etiketlerini de kontrol etmek mümkün. Hatta etiketlerin içindeki olayların nasıl gerçekleştirildiğini etiketlerini hangi attribute değerlerini aldığını kontrol etmek ve yönetmek console ekrandında yapmak ve kontrol etmek web geliştiricileri için büyük kolaylıklar sunmaktadır.

Screenshot_6

Hakkında Hayri

Yorum Yap

Wordpress Tema indir