Простичко логване с console.log

Почти всяка модерна среда за разработка на уеб приложения има изградена система за дебъгване и логване. Неща, без които не може, дори и при разработка на съвсем ‘леки’ компоненти. Те, обикновено са много комплексни и пълни с всевъзможни настройки за достигане на максимално ‘богат’ резултат.

Но понякога, преди да вмъкна, мой компонент в по-голям проект, за последваща разработка, си го тествам локално. Използвам простички методи и инструменти, и то основно, за да придобия представа, да ли изходния резултат ще е такъв, какъвто го очаквам.

Едно от готините неща, и не само, които влезнаха в браузърите след появата на FireBug :o) е възможността да се обърнеш към конзола и да логнеш информация в нея. За целта се използва метода console.log();.

Написал съм си един клас, който използвам за личните ми нужди от логване и дебъгване и ще Ви направя една малка извадка от него, за да видите как използвам метода console.log();:

var Logger = function() {
	function Logger() {
		this.Logger = (window.console && window.console.log);
	}
	Logger.prototype = {
		My : function(property_name, property_value) {
			this.Logger && window.console.log(property_name + ': ' + property_value);
		}
	}
	return Logger;
}

Имам още няколко прототипа, основно за обхождане и логване на JSON и/или jQуery обекти, но този премиер е достатъчен за да придобиете представа как да си обвиете console.log(); в собствени дрешки.

За да Ви покажа как се ползва, ще ползвам примера от статията ми jQuery & HTML5 data attributes:

<div id="wrapper">
   <div id="objectA" class="object" data-manager="a" data-b="true" data-c="true">Object A</div>
   <div id="separatorA" class="separator">&nbsp;</div>>
   <div id="objectB" class="object" data-manager="b" data-a="true" data-c="true">Object B</div>    
   <div id="separatorB" class="separator">&nbsp;</div>    
   <div id="objectC" class="object" data-manager="c" data-a="true" data-b="true">Object C</div>
</div>

В случая искам в конзолата да се изпише броя на всички елементи от тип div и след това – двойките ключ: стойност за всички налични data атрибути. За целта ще добавя една малка функция в кода:

(function (wrapper) {
	var l = new Logger(),
		divs = wrapper.getElementsByTagName('div'),
		divc = (divs.length);

	l.My('Брой DIV елементите', divc);

	while(divc > 0)
		for(var i in divs[--divc].dataset)
			l.My(i, divs[divc].dataset[i]);

})(document.getElementById('wrapper'));

Може да заредите Примера и да включите конзолата, за да видите изхода. Освен console.log();, може да се използвате и console.info();, console.warn();, console.debug(); и console.error();. Може да използвате и console.profile(); и console.profileEnd(); за групиранията.

По мрежата може да намери много примери за обхващане на всички браузъри, за супер логване на събития и асинхронни заявки и т.н. – това съм го оставил за развойната система. Локално знам браузъра на който тествам, а и искам да ми е лекичко и простичко.

Едно мнение по „Простичко логване с console.log

  1. Забравих, да драсна за console.time и console.timeEnd. Два метода, с който много лесно може да проследите времената за изпълнение на отделни блокове от обектите ви. Още информация може да прегледате на http://www.opera.com/dragonfly/documentation/console/ и https://developer.mozilla.org/en-US/docs/DOM/console.

Вашият коментар

This site uses Akismet to reduce spam. Learn how your comment data is processed.