Console.log() для дебагу фронтенду

Першу свою відладку javascript я робив через alert(). Це був невеликий обхід об’єктів з поверненням їхніх параметрів. З того часу природна лінь автора не стимулювала його до оптимізації, а поза тим, відладка функцією Alert() — це вже давно ознака поганого тону…

Зараз пристойна публіка використовує Console.log() та інструментарій вебмайстра. Що дає використання методу, окрім того, що Ваша відладка не заважатиме користувачам. Назву кілька аспектів, які сам юзаю:

Тривалість виконання функції

Ставимо console.time() перед початком функції та console.timeEnd() вкінці.

console.time("Execution time took"); 
// Ваш код, який перевіряєте
console.timeEnd("Execution time took");

Вивід необмеженої кількості результатів

Якщо Alert() має свої обмеження по читабельності, то з консолькою все простіше: пакуємо все та форматуємо.

var variable = {first: "tubular", second: "rad"}, anotherVariable = "baz"; console.log("string",15,variable.second,anotherVariable,variable.first); // string 15 rad baz tubular

Форматування виводу результатів

За допомогою елементів управлінням послідовностями: %s, %d, %i, %f ми можемо виводити в потрібній послідовності збережені дані. Цей інструмент з послідовностями форматування потребує окремого матеріалу, але від ознайомлення з цим кодом Ви зможете витягнути користь.

var variable = {first: 12.30, second: "work"}, anotherVariable = "interesting"; 

console.log("It's a very %3$s theme, but it's a %1$f and I should to %2$s", variable.first, variable.second, anotherVariable);

//It's a very interesting theme, but it's a 12.3 and I should to work

UPD. Зверніть увагу, що формат float (%f) з’їдає нуль вкінці після коми.

 

Залишити відповідь