[Перевод] Используем console.log() в JS на полную17.12.2019 11:48

da6ccbfe2b6f2ff56fe0fa8c8260f2c1.jpg

Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log () — лекарство от большинства болезней кода.


Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес

Но помимо повсеместно используемой функции console.log (), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.

Самое простое — печать строки цветом, соответствующем типу события.


afdb0500acf470178449e81aeccdc02c.png


Для того, чтобы подставить данные в строку с сообщением, удобнее всего использовать плейсхолдеры.

%o — для объекта
%s — для строки
%d — для десятичного или целого числа


7802fd66ac5f1856c534429363530490.png


Не хватает info/warn/error? Не беда! К консольным сообщениям можно применять CSS.


7c1e4b12ec1391728fecd266f5cba85c.png

Хотите применить CSS только к части сообщения? Это делается вот так:


3af81f8b145cd25dcf84f5e5b390bd13.png


Часто гораздо удобнее напечатать JSON представление интересующего нас объекта.


9de51b8d118764c99ba27d0b4ceb5209.png


HTML элементы в консоли можно исследовать так же, как в инспекторе.


914dc06f7b649c1012051bda0e46ebf8.png


Хотите быстро посмотреть данные в списке из JSON?


46d51e24c5223b8b3bdef560b9b66a9d.png


Сообщения в консоли можно группировать для удобства.


0f7a1904fb08f256496e56b82a28b716.png


Эта функция записывает, сколько раз она была вызвана.

Если передан опциональный аргумент label, то функция будет записывать количество вызовов с той же label.


d80b61df948cdcd768209aff361671b7.png

Если функция вызвана без параметров, то она запишет количество вызовов на той же строке.


e3447f4b09f1e26fc124cd8621bc72de.png


Удобно использовать, когда вы хотите выводить информацию по условию. Будут напечатаны только те сообщения, где первый аргумент assert () ложен.


c7459285d0658168de521397fb991577.png


Этот метод поможет понять, каким путём код дошёл до определённой точки.


31aef5fae7cbe9ce97e6095c7b8e86d5.png


Самый простой способ замерить время исполнения участка кода.


d0f5ffd8f99c3d1e2b508cb9a18d23cd.png


Хотите наконец-то узнать, куда пропала вся свободная оперативная память?  


3800a9e79a50a8c0488806ca115784d3.png


Используйте, чтобы начать работу с чистого листа. Полностью очищает консоль от предыдущих сообщений.



Код, использованный в статье
// time and time end
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
  total += j
}
console.log("Result", total);
console.timeEnd("This");

// Memory
console.memory()

// Assertion
const errorMsg = 'Hey! The number is not even';
for (let number = 2; number <= 5; number += 1) {
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}

// Count
for (let i = 0; i < 11; i++) {
  console.count();
}

// group & groupEnd
console.group();
  console.log('Test message');
  console.group();
    console.log('Another message');
    console.log('Something else');
  console.groupEnd();
console.groupEnd();


// Table
const items = [
  {
    name: "chair",
    inventory: 5,
    unitPrice: 45.99
  },
  {
    name: "table",
    inventory: 10,
    unitPrice: 123.75
  },
  {
    name: "sofa",
    inventory: 2,
    unitPrice: 399.50
  }
];
console.table(items)

// Clear
console.clear()

// HTML Element
let element = document.getElementsByTagName("BODY")[0];
console.log(element)

// Dir
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);

// Color
console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small');

// pass object, variable
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);

// Default 
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');

© Habrahabr.ru