JAVASCRIPT KÜTÜPHANELERİNİN HATA AYIKLAMA VE LOGLAMA İÇİN KULLANIMI VE BLACKBIRD KÜTÜPHANESİ
JavaScript Kütüphanelerinin Hata Ayıklama ve Loglama İçin Kullanımı
Merhaba arkadaşlar, bu hafta JavaScript kütüphanelerinin hata ayıklama ve loglama için kullanımını ve BlackBird kütüphanesini göreceğiz. JavaScript hata ayıklama (debugging) ve loglama işlemlerinde, oldukça pratik ve görsel olarak gelişmiş işlemler sunmaktadır. Bu işlemler için kullanılan başlıca kütüphaneler; NitobiBug (nesnelerle dizgi, sayı gibi basit veri tiplerini ayrıştırabilen JavaScript hata ayıklama kütüphanesi), Firebug Lite (NitobiBug gibi çalışan fakat daha geniş bir tarayıcı desteğine sahip kütüphane) ve BlackBird (bu hafta üzerinde duracağımız temel loglama kütüphanesi) gibidir.
BlackBird Kütüphanesi
BlackBird Kütüphanesi
BlackBird loglama için oluşturulmuş açık kaynak bir JavaScript kütüphanesidir. Tüm temel tarayıcılarda çalışır. JavaScript alert() methodu loglama için yaygın bir kullanıma sahip olsa da, BlackBird kütüphanesiyle daha iyi görünümlü ve kategorize edilmiş bir loglama konsolu oluşturulabilir. Kütüphaneyi Blackbird JS linkinden indirebilirsiniz. Bir ASP.NET sayfasında bu kütüphaneyi kullanabilmek için, şekilde görüldüğü gibi projenin dosyalarına kütüphaneyi eklememiz gerekiyor:
Kütüphaneyi ekledikten
sonra, sayfamızda kullanabilmek için sayfanın <head> bölümüne aşağıdaki
kod satırını ekleyerek kütüphaneyi kullanabilir hale getiriyoruz:
<script type="text/javascript" src="blackbirdjs/blackbird.js"> </script>
Örnek projemize başlamadan önce kütüphanenin belli başlı fonksiyonlarını tanıyalım ve işlevlerini öğrenelim:
- toggle(): Fonksiyon, blackbird loglama konsolunu göstermek veya gizlemek için kullanılır. Kullanımı:
log.toggle();
log.resize();
log.clear();
log.debug('hata ayıklama mesajı');
log.info('bilgi mesajı');
log.warn('uyarı mesajı');
log.error('hata mesajı');
log.profile('profil etiketi'); //profil oluşturuldu
//profil oluşturulduktan sonra yapılacak işlemler
log.profile('profil etiketi'); //profil sonlandırıldı ve işlemlerin süresi konsola eklendi.
Şimdi buraya kadar gördüklerimizden faydalanarak ASP.NET sayfamızda bir örnek yapalım:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="blackbirdjs/blackbird.js"></script>
<link href="blackbirdjs/blackbird.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function konsolGoster() {
log.toggle();
}
function debugMesaj() {
log.debug('Hata Ayıklama Mesajı');
}
function bilgiMesaj() {
log.info('Bilgi Mesajı')
}
function uyariMesaj() {
log.warn('Uyarı Mesajı!');
}
function hataMesaj() {
log.error('Hata Mesajı!!');
}
function profilOlustur() {
log.profile('Profil Etiketi');//Profil oluşturuldu.
//Yapılacak işlem burada, aynı isimli 2
//profil etiketi arasında bulunacak.
var test = '';
for (var i = 0; i < 300000; i++) {
test+= '-';
}
log.profile('Profil Etiketi');//Profil sonlandırıldı.
}
function boyutunuDegistir() {
log.resize();
}
function konsoluTemizle() {
log.clear();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
BlackBird Test
</h1>
<input type="button" name="name" value="Konsolu Göster"
onclick="konsolGoster();" style="left: auto; width: 137px;"/>
<br />
<input type="button" name="name" value="Hata Ayıklama Mesajı"
onclick="debugMesaj();" style="width: 137px" />
<br />
<input type="button" name="name" value="Bilgi Mesajı" onclick="bilgiMesaj();"
style="width: 137px" />
<br />
<input type="button" name="name" value="Uyarı Mesajı" onclick="uyariMesaj();"
style="width: 137px" />
<br />
<input type="button" name="name" value="Hata Mesajı" onclick="hataMesaj();"
style="width: 137px" />
<br />
<input type="button" name="name" value="Profil Oluştur"
onclick="profilOlustur();" style="width: 137px" />
<br />
<input type="button" name="name" value="Boyutunu Değiştir"
onclick="boyutunuDegistir();" style="width: 137px" />
<br />
<input type="button" name="name" value="Konsolu Temizle"
onclick="konsoluTemizle();" style="width: 137px"/>
</form>
</body>
</html>
Şimdi örneğimizin çıktısını ve oluşturduğumuz butonların ne işe yaradıklarını görelim:
"Konsolu Göster" butonuna basınca:
"Hata Ayıklama Mesajı" butonuna basınca:
"Bilgi Mesajı" butonuna basınca:
"Uyarı Mesajı" butonuna basınca:
"Hata Mesajı" butonuna basınca:
"Profil Oluştur" butonuna basınca:
"Boyutunu Değiştir" butonuna basınca:
"Konsolu Temizle" butonuna basınca:
Örnekte görüldüğü gibi, anlattığımız fonksiyonları ve Blackbird kütüphanesini kullanarak oldukça güzel görünümlü ve pratik bir loglama konsolu oluşturup, bu konsolda istediğimiz türde log mesajları gösterebiliyoruz. Bu haftalık anlatacaklarım bu kadar. Umarım kütüphanenin kullanımı anlaşılmış ve loglama konusundaki ihtiyaçlarınızı karşılamaya yetecek düzeyde olmuştur.
Kaynaklar:
Hiç yorum yok:
Yorum Gönder