Javascript Loglarını Yönetmek

Projelerin geliştirme aşamasında sıklıkla console.log deyimini kullanıp, sonucu izleyerek çalışmamızı sürdürürüz. Hataları daha çabuk farketmek ve kademe kademe ilerlemek için oldukça elverişli bir yöntem.

Bunun yanında console.info, console.warn, console.error, console.clear gibi metodlarından da faydalanırız. Hata yakalarken, aradığımızı daha kolay görelim diye ya da  sırf renkli bir görüntü oluşması için :)

Ve projenin sonunda bu logları tek tek arayıp yoruma alırız. Herkes böyle yapmıyordur muhakkak ama yapanlarınız var, biliyorum, ben de sizden biriydim çünkü :)

Temelde iki sebeple yaparız bunu:

1. Javascritp console desteği olmayan tarayıcılarda javascript hatası almamak için
2. Son kullanıcı bu logları görmesin diye

İlki daha önemli olmakla beraber, ikisi de makul sebepler.

console.log hatalarını önlemek

Ben birinci seçeneği, HTML5 Boilerplate içinde yer alan console polyfill kodlarını gördüğümde çözmüş oldum. Böylece console kodlarını yoruma almasam bile, eğer tarayıcının console desteği bulunmuyorsa, kendi oluşturduğum boş bir fonksiyonu çağırmış oluyorum ve Javascript hatası almıyorum.

console.log çıktılarını son kullanıcılardan gizlemek

İkinci seçenek için de ilk seçenekteki çözümü genileterek prepend isminde bir parametre ekliyorum ve consol nesnesini override ederken, console desteği bulunan tarayıcılarda da ilgili metodlara boş fonksiyon atayarak, loglarımın istediğim zaman çıktılanmamasını sağlayabiliyorum.

Örnek

Örnek kodlar aşağıdaki gibi:

/**
 * Manage Console Logs
 *
 * @desc  Avoid `console` errors in browsers that lack a console and disable if you want.
 * @date  2014-11-27,
 * @src   https://github.com/h5bp/html5-boilerplate/blob/master/dist/js/plugins.js
 * @since 3.0
 */

var overrideConsole = function(prevent){
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    prevent = prevent || false;

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method] || prevent) {
            console[method] = noop;
        }
    }
};
overrideConsole();


/**
 * Custom scripts
 */

(function($){
  
  // debug mode
  var debugMode = $('.wrapper').hasClass('dev'); // $('html') is recommended
	// and
  if(!debugMode){
    overrideConsole(true); // disable logs for production
  }
  
  // First log
  console.log('My first log is right here :)');
  
  // Disable logs
  overrideConsole(true);
  
  // Second log
  console.log('But where is my second log?!');
  
  
})(jQuery);

Eğer tarayıcınızın konsolunu açıp bakarsanız, ikinci logun çıktılanmadığını görebilirsiniz.