Использование console.log () для отладки JavaScript - одна из наиболее распространенных практик среди разработчиков, даже если многие это не одобряют. Я должен признать, что я все еще использую console.log () в повседневном кодировании, и я не одинок, как и я, большинство разработчиков JavaScript все еще используют его для поиска ошибок в своих код (Обратитесь к отчету разработчика - 2016). Одна из основных причин его использования - это самое простое в использовании и отклонение от курса от старых привычек!

Ниже приведены упомянутые функции и советы для console.log (). Нажмите на них, чтобы просмотреть их.

Подстановка строки

Это метод, который использует заполнители в строке, которые заменяются другими аргументами, которые вы передаете методу консоли. Могут использоваться следующие заполнители.

  • строка =% s
  • integer =% i или% d
  • object =% o или% O
  • float =% f
  • применить правила CSS =% c
console.log('My name is %s, my age is %i and my weight is %f kilograms', 'Dave', 20, 60.7)

Пользовательские стили CSS для console.log ()

По умолчанию существует 4 различных способа вывода сообщений на консоль (log , info , warn , error). Все методы работают одинаково, и разница в том, что каждый из них отображается разным цветом в зависимости от уровня журнала и разных значков.

console.log('Simple Log Message')
console.info('Info Message')
console.warn('Warning Message')
console.error('Error Message')

Помимо этих функций по умолчанию, вы также можете определить собственные стили CSS для журналов, применив правила CSS при подстановке строк с помощью заполнителя %c и передав правила CSS в качестве строкового аргумента. Вы также можете добавить более одного %c в строку.

console.log('%c Log Message 1 with custom CSS styles! ', 'background: #555; color: yellow');
console.log('%c Log Message 2 with custom CSS styles! ', 'background: black; color: red');
console.log('%c Log Message 3 with custom CSS styles! ', 'background: #00f; color: white');

Другой способ определения стилей CSS:

const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
console.info('%c Success Log Message!', success);
console.error('%c Error Log Message!', failure);

console.clear ()

Когда вам нужно программно очистить консоль, просто вызовите метод clear .

console.clear()

Совет. Вы также можете использовать сочетание клавиш Ctrl + L, чтобы очистить консоль, и это работает во всех браузерах.

console.assert ()

Метод assert принимает два аргумента: один - это условие утверждения, а другой - сообщение. Если утверждение ложно, сообщение записывается в консоль с ошибкой уровня журнала, а также трассировкой стека.

console.assert(true, 'This will not be displayed')
console.assert(false, 'This will be printed')

Совет. Метод Assert можно использовать для условного ведения журнала без использования блока if-else.

console.table ()

Метод table можно использовать для отображения массива или объекта в табличном формате в консоли.

Отображение массива

var fruits = ['apple','mango','grapes','orange']
console.table(fruits);
var fruits_quantity = [{ 
    name: 'apple',
    quantity: '20',
},{ 
    name: 'mango',
    quantity: '30',
},{ 
    name: 'grapes',
    quantity: '15',
},{ 
    name: 'oranges',
    quantity: '25',
}]
console.table(fruits_quantity);

Отображаемый объект

var details = {
 "name": "Dave",
 "age": 20,
 "weight": 60.7
}
console.table(details)

console.trace ()

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

console.trace('Test Trace')

console.count ()

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

for (i = 0; i < 10; i++) {
  console.count('Test');
}

console.memory ()

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

console.log(console.memory)

Примечание: память - это свойство, а не функция.

console.time () и console.timeEnd ()

Используйте метод time, чтобы запустить таймер, и метод timeEnd, чтобы завершить таймер и отобразить результат. Вы также можете использовать параметр label для обозначения времени, если вы используете более одного таймера.

console.time('Timer1');
for (i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd('Timer1');

console.group () и console.groupEnd ()

Метод group используется для указания начала группы сообщений. Все сообщения журнала после этого теперь будут записываться внутри группы. Метод groupEnd используется для завершения группы сообщений. Необязательный параметр метки может использоваться, если используется более одной группы.

console.log("Before Group Start");
console.group('Main Group');
console.log("Inside the group : message 1");
console.log("Inside the group : message 2");
console.groupEnd();
console.log("After Group End");

Группа также может быть вложена в другую группу.

console.log("Before Group Start");
console.group('Main Group');
console.log("Inside the group : message 1");
console.log("Inside the group : message 2");
console.group('Sub Group');
console.log("Inside the sub group : message 1");
console.log("Inside the sub group : message 2");
console.groupEnd();
console.log("Inside the group : message 3");
console.groupEnd();
console.log("After Group End");

console.profile () и console.profileEnd ()

Метод profile запускает профилировщик ЦП в браузере. profileEnd method используется для завершения профиля. Вы можете использовать необязательный параметр label для присвоения имени отчету профиля.

console.profile("Profile1");
for (i = 0; i < 100000; i++) {
  // some code
}
console.profileEnd("Profile1");

Созданные отчеты можно просмотреть на вкладке «Профилировщик JavaScript» в инструментах разработчика.

console.dir ()

Метод dir отображает объект в интерактивном списке свойств в виде иерархической древовидной структуры.

var a = { foo: "foo", bar: "bar" };
console.log(a)
console.dir(a)

Это почти все функции и советы, относящиеся к console.log! Удачного кодирования!