Само мъртвите риби се движат по течението

Конзолата на JavaScript е един от най-мощните инструменти за дебъгване. Макар вече да има множество IDE-та, които предлагат breakpoints и други начини за стопиране на разстройството на кода, винаги понякога ни мързи особено много и искаме просто да визуализираме нещо на добре познатата конзола.

За JavaScript неандерталците, а и като уводна част - console е глобален обект в езика, който предоставя функционалност за дебъгване. Сега ще кажете - това го знам, това са функциите console.log, console.warn и console.error. DA AMA NE. Сега ще опитам да ви убедя, че има много още функции, които могат да са ви от полза.


console.log(message)

Класическата функция console.log принтира на конзолата съкратена версия на стойностите на променливите или литералите, които ѝ се подават като параметри. Ако една променлива е обект, който е прекалено голям (напр. съдържа пропърти със стойност масив от много елементи), ще се визуализира в съкратен вариант.

За да принтираме обект в пълния му вид, с детайлност на всички пропъртита, можем да го превърнем в низ, използвайки JSON.stringify(object). За добро форматиране, можем да специфицираме и табулация: JSON.stringify(object, null, 4), където 4 е отстоянието от началото на реда.

Нека разгледаме примера:

const article  = {
    title: "Florida Man Accused of Attacking Girlfriend With Banana",
    author: "Unknown"
};

// принтира променливата-обект article и
// литералния обект с опция за детайлно разглеждане
console.log(article, {
	...article,
	title: "Florida Couple 'Trapped' In Unlocked Closet for Two Days"
}); 

console.clear()

Тази функция изтрива всичко, което се е показало до момента на конзолата. Накрая оставя едно мизерно съобщение тип „Console was cleared“.


console.assert(condition, message)

Функцията console.assert служи за проверка, дали дадено условие е изпълнено. Ако не е, се показва „Assertion failed“ грешка, съпроводена от предоставеното като втори параметър на функцията съобщение.

const daysWithoutNutInNovember = 3; 

// Принтира *„Assertion failed“* грешка + съобщението, което сме задали.
console.assert(daysWithoutNutInNovember === 30, "Опитай пак догодина!");

// Не принтира нищо, тъй като условието, като първи аргумент, е спазено
console.assert(daysWithoutNutInNovember < 7, "Мале, ужас...");

console.count()

Комплексността на тази функция се изучава в ЦЕРН и интригува учените още от създаването на JavaScript през 1995 г. JK, просто показва колко пъти сме я извикали. Готиното е, че има лейбъл, чрез който лесно да водим журнал коя част от кода колко пъти е изпълнявана.

function announceBrexit() {
    console.count("brexit");
}

announceBrexit(); // Принтира brexit: 1
announceBrexit(); // Принтира brexit: 2

Ако не сложим никакъв лейбъл, console.count ползва лейбъла default.


Семейството на console.log

Ако искаме да украсим нещото, което принтираме на конзолата, можем да му дадем цветен контекст - информационно съобщение, предупреждение или грешка.

console.info("Уведомявам Ви, че утре изтича абонамента Ви.");
Резултат от console.info()
console.warn("Днес изтича абонаментът Ви! Отидете до клон на ЦГМ.");
Резултат от console.warn()
console.error("SLIZAI MURSHO");
Резултат от console.error()

console.trace()

Тази функция принтира stack trace с финална точка - конкретния контекст на изпълнение. С други думи, показва последователността от функции, чрез които се е стигнало до финалната точка (когато е извикана console.trace).

function unknown() {
    doBigBang();
}

function doBigBang() {
    createParticles();
}

function createParticles() {
    createAtoms();
}

function createAtoms() {
    createLife();
}

function createLife() {
    console.trace();
}

unknown();

Резултатът, който излиза на конзолата е следният:

Резултатът от изпълнението на console.trace()

console.dir()

console.dir показва подробно подадения обект като параметър, по красив начин. По-горе ви показах как можете да го постигнем и с JSON.stringify(). Второто можем да го използваме и далеч не само в конзолата.

const vehicle = {
    name: "Cybertruck",
    characteristics: {
        range: "250-500 mi",
        autopilot: true,
        glass: false
    }
};

console.dir(vehicle);
Резултат от console.dir()

console.dirxml()

Тази функция показва съдържанието на HTML елемент.

// Отварям google.com и взимам тамошното body
console.dirxml(document.body);
Резултат от console.dirxml

console.time() и console.timeEnd()

Чрез тези 2 функции можем да видим колко време е отнело изпълнението на кода, намиращ се след console.time и преди console.timeEnd.

// Правим версия на setTimeout с Promise
const delay = seconds => new Promise(resolve => {
    setTimeout(resolve, seconds);
});

// Изпълняваме и изчакваме края на горната функция,
// извикана с параметър 2000 (милисекунди)
async function procrastinate() {
    await delay(2000);
}

// Измерваме първи път, без лейбъл
console.time();
await procrastinate();
console.timeEnd();

// Измерваме втори път, слагайки лейбъл
console.time("second try");
await procrastinate();
console.timeEnd("second try");

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


console.group()

console.group стартира т.нар. група и събира всички съобщения от console.log до извикването на console.groupEnd.

console.group("characters");

console.group("jedi");
console.log("Obi-Wan Kenobi");
console.log("Mace Windu");
console.log("Luke Skywalker");
console.group("fake jedi");
console.log("Anakin Skywalker");
console.groupEnd("fake jedi");
console.groupEnd("jedi");

console.group("sith");
console.log("Emperor Palpatine");
console.group("fake sith");
console.log("Kylo Ren");
console.groupEnd("fake sith");
console.groupEnd("sith");

console.groupEnd("characters");

Резултатът от изпълнението на горния JavaScript код е:


console.table()

Тази функция създава таблица с 2 колони (index и value) за обекта, който ѝ се подаде като първи аргумент. Можем да я използваме и с вложени обекти. Тогава се създават допълнителни колони.

const company = {
	name: "Galactic Banitsa",
	website: "https://galacticbanitsa.com",
	parent: {
		name: "Doonloo Ltd.",
		website: "https://doonloo.com"
	}
};

console.table(company);
Изглед след извикването на console.table

Айде, стига ви толкова. Благодаря ви за вниманието!

Ако статията ви е харесала можете да я споделите в социалните мрежи.

Ако аз съм ви харесал, можете да харесате Facebook страницата ми, да си купите баничка от проекта ми Galactic Banitsa или да ме добавите в LinkedIn.

Очаквам и вашите коментари, за да преценя дали да продължа да създавам подобно съдържание. 😉