Emre AYRILMAZ

Emre AYRILMAZ

Eski MCT, Coder,

© 2019

.Net Denemeleri

Chrome DevTools : Console.

Web tabanlı proje geliştiren yazılımcılar tarayıcıların Web Geliştime Araçlarını (Web Development Tools) çok sık kullanırlar. Günümüzde ise hemen hemen tüm tarayıcılar bu araca sahip. İsimlendirmeleri yada kısa yolları faklı olsa da yaptıkları iş açısından nerede ise aynılar ve tek bir amaçları var; geliştirme aşamasında yazılımcıya kolaylıklar sunmak.

örneğin js kodumun bir kısmını debug etmek gerektiğinde;

    function ornekFn(){
     let degisken = 10;
     debugger;
     //kodun devamı
    }

çalışma sırası debugger yazan satıra geldiğinde DWT den devam edip kodumuzu test edebiliriz.

Tercihen testlerimi Google Chrome tarayıcısı ile yapıyorum. Aşağıdaki örnekleri de Chrome ile yaptım. Ama siz dilediğiniz tarayıcı ile örnekleri test edebilirsiniz.

Console.Log

Eminim sizlerde çok kez şu satırı

    >console.log(degisken)

yazmışsınızdır. Peki sadece log mudur consolun tek fonksiyonu? Gelin beraber inceleyelim.

Çıktıyı Biçimlendirme

    >console.log("%d + %d = %d", 1 ,2, 1 + 2)

1 + 2 = 3

%i yada %d ile sayısal alanları, %f ile kayan noktalı sayısal alanlar ve %s ile de metinsel ifadeleri yazdırılabilir.

Ayrıca %c ile çıktıya css uygulanabilir.

    >var neKadar = "çok";
     console.log('Bakın %cburası %s önemli!', neKadar, 'color: red; font-size: 14px');

Bakın burası çok önemli!

Zamanı ölçme

time ve timeEnd funksiyonları arası geçen süreyi milisaniye cinsinden hesaplar.

    >console.time("for");
     for(let i = 0; i <= 10000; i++){
     }
     console.timeEnd("for");

for: 0.174072265625ms

Log ve alternatifleri

    >console.log("kayıt")
     console.info("bilgi")
     console.warn("ikaz")
     console.error("hata")

consolelog.png

Trace ile yığın izleme

    >function fn(a){
     console.warn(a);
     }
     console.trace(fn(1));

logtrace.png

Sonucu tablo olarak gösterme

    >let array = new Array();
     let elScripts = document.getElementsByTagName("script");
     for(let i = 0; i < elScripts.length; i++){
    	let elScript = elScripts[i];
    	array.push({ id: elScript.id, src: elScript.src});
     }
     console.table(array);
     //alternatif - sadece ilgili kolonlar
     //console.table(array, ['src']);

consoletable.png

Sayaç kullanma

Belli bir değer için otomatik artan sayaç kullanılabilir.

    >var s1 = 1;
     console.count(s1);
     console.count(1);
     console.count("1");//string otomatik olarak sayısa çevrilecek
     console.count(2);

1: 1
1: 2
1: 3
2: 1