ТОП-6 возможностей console, о которых вы не знали

0
12145

Чтобы узнать список всех возможностей console, понадобится немало времени. Наша редакция его вам сэкономит полезной подборкой.

Дифференцированный вывод сообщений

Консольный метод .log() нужен для того, чтобы отображать входные данные в консоли браузера. Для разделения этих выводов на ошибки, предупреждения, информацию и отладку console имеет методы .error(), .warn(), .info() и .debug() соответственно.

Давайте рассмотрим пример применения метода .err(). Это пригодится при выводе сообщения об ошибке в консоль. Код не только печатает сообщение ярко-красным цветом, но также обеспечивает хорошую трассировку вызовов функций. Если есть необходимость, то в браузере можно отфильтровать ошибки / предупреждения с панели инструментов консоли.

Попробуйте запустить этот код у себя в консоли:

const getEmployeeSalaryByName = function(name){
  if(typeof name === "string") {
    return "Salary is $15000";
  } else console.error(new TypeError("Name should be a string"));
};

getEmployeeSalaryByName(1322); //-> TypeError: "Name should be a string"

Табличное форматирование

Иногда среди беспорядка в выводе сложно увидеть структуру объектов, напечатанных методом console.log(). сonsole обеспечивает удобный способ вывода через метод console.table(). Он принимает два необязательных параметра – data и columns.

Параметр data может быть любым перечислимым объектом (Array, Objects, Set, Map и т. д.). Он даже поддерживает nested objects, такие как массив массивов:

[[1,'Python'],[2,'Java'],[3,'Go'],[4,'PHP']]

и сложных объектов:

{'rank': [1,2,3,4], 'names': ['Python','Java','Go','PHP']};

Вам нужно только передать эти данные в console.table(), а браузер будет обрабатывать все самостоятельно. Примеры:

Список возможностей console

console complex objects

Бенчмаркинг при помощи console.time

Хотя этот метод не предназначен для бенчмаркинга, и существуют гораздо более приемлемые альтернативы по типу performance.now(), он прекрасно работает.

Иногда нужно измерить время, потраченное функцией или циклом, чтобы проверить производительность веб-страницы. Раньше использовался метод Date.now() для вычисления времени выполнения фрагмента кода. Стратегия была проста. Перед выполнением измерялось текущее время и сохранялось в переменной t1. После выполнения кода текущее время сохранялось в переменной t2. В конце: t2-t1= время выполнения.

Сейчас, исходя из возможностей console и производительности, удобнее использовать console.time(). Для расчета каких-либо показателей вам не придется ничего делать, т. к. браузер сделает все сам и напечатает в консоль вывод. Рассмотрим пример с циклом:

var m = 0;
for (let i=0; i<=10000; i++){
  m = m + (Math.random() * 100) * i*i;
}

Вы хотите рассчитать время, затраченное на цикл for. Для этого просто добавляете цикл с console.time("benchmarkName") до его выполнения, а console.timeEnd("benchmarkName") – после. benchmarkName – это просто строка, которая помогает браузеру определить, какую начальную точку соотнести .timeEnd(). Если у вас есть только один вызов .time(), то ближайший .timeEnd() будет связан с ним по умолчанию.

var m = 0;
console.time("for10k");
for (let i=0; i<=10000; i++){
  m = m + (Math.random() * 100) * i*i;
}
console.timeEnd("for10k"); // -> outputs 2ms

Когда код исполнится, браузер автоматически начнет измерять время по метке "for10k", и остановится в методе timeEnd(), вычислит разницу между обеими метками времени и распечатает его в консоли.

Вывод сообщений только для console.assert

Это еще один небольшой, но очень удобный способ. Он принимает два параметра: true / false выражение и сообщение, которое должно быть напечатано, когда выражение равно false. Обратите внимание, что если выражение равно true – ничего не печатается.

const languageProg = ["Hasky"];

function isLanguageProg(name){
 if(languageProgArray.indexOf(name) !== -1)
    return true;
 return false;
}

const isHaskyAlanguageProg = isLanguageProg("Hasky");
if(!isHaskyAlanguageProg){
  console.error("Hasky is not a program language")
}

Использование console.assert может позволить сократить вышеописанный код:

console.assert(isLanguageProg("Hasky"), "Hasky is not a program language");

Изумительный инструмент!

Просмотр всех свойств объекта через console.dir

Среди возможностей console есть интересный метод, который пригодится, если вам необходимо перечислить все свойства объекта в виде "сворачиваемого списка". Хотя вывод console.dir() не отличается от вывода console.log(), он по-другому обрабатывает передаваемые параметры. Попробуйте выполнить пример ниже, чтобы увидеть различия:

console.log(document.body);
console.dir(document.body);

console.group

Рассмотрим вариант, когда вам необходимо выводить несколько сообщений, сохраняя при этом иерархию функций, из которых поступают сообщения. Обычно вывод назначают какому-то объекту, и печатают его на экран.

Чтобы облегчить жизнь разработчикам и сделать вывод читабельнее, console предоставляет отличный метод, называемый .group(). Рассмотрим следующий пример:

console.group("first");
console.log("inside first 1");
console.group("first1");
console.log("inside first1");
console.groupEnd("first1");
console.group("first2");
console.log("inside first2 1");
console.log("inside first2 2");
console.groupEnd("first2");
console.log("outside first2 1");
console.groupEnd("first");
console.log("outside first");
console.group("second");
console.log("inside second");
console.groupEnd("second");

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

Если вы хотели бы пополнить свои знания и узнать больше возможностей console – милости просим в официальный хелп.

Оригинал

Другие материалы по теме:

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG