Консоль - это объект, который обеспечивает доступ к консоли отладки браузера, и console.log широко используется. Но мир JavaScript не ограничивается только console.log, у него есть различные методы, которые делают отладку более продуктивной и эффективной.
Некоторые из вас могут использовать метод alert () для отладки, но я лично стараюсь избегать его использования из-за определенных ограничений:
1. Когда мы пытаемся напечатать объект JavaScript, он не показывает реальные данные, а всегда возвращает [Object Object].
2. Когда мы используем его в цикле, с ним становится труднее справиться.
3. Когда мы перемещаем его в другое окружение и если мы забываем прокомментировать / удалить метод alert (), его увидят конечные пользователи.
4. Он не поддерживает тип данных, переданный методу.
В то же время alert () может быть удобен в некоторых случаях использования, основанных на наших требованиях, например, когда вы хотите выполнить, когда пользователь что-то нажимает.
Начнем с объекта консоли
Консоль является частью оконного объекта. Объект window представляет окно браузера. Все глобальные объекты, функции и переменные JavaScript автоматически становятся членами объекта окна. Консоль дает нам доступ к консоли браузера. Мы можем получить доступ к консоли двумя способами: -
window.console; console;
Console.log ()
Это одна из самых популярных и часто используемых консольных функций. Мы можем передавать аргументы, которые могут быть любого типа данных, таких как число, строка и т. Д. Он печатает все, что мы передаем в качестве аргумента, и в то же время он также поддерживает тип данных. Например: - Если мы передаем объект, он выводит результат как Object.
Мы можем передать несколько аргументов, разделенных запятой, и результат будет напечатан рядом друг с другом. Мы можем стилизовать и отформатировать наш вывод с помощью CSS. Он должен начинаться с% c для каждой строки.
console.log("%cText in Blue ","color:blue; font-size:50px");
Console.group ()
Console.group - еще один метод, доступный в окне. объект консоли. Это помогает нам сгруппировать несколько выходов console.log вместе. Например: - если мы используем несколько console.log в нашем цикле для вывода на печать, это может затруднить чтение нашего вывода. Как показано на изображении 3
По умолчанию, когда мы группируем несколько console.log, отображается весь вывод. Но когда мы хотим свернуть весь вывод console.log и показать только метку группы, мы можем использовать groupCollapsed.
Мы можем использовать console.group () внутри console.group для печати иерархических данных или для лучшего форматирования нашего вывода.
let stud =[{"name":"Joe","class":'X'},{"name":"Greg","class":'V'}];
for(let std=0;std<stud.length;std++){
console.group('Student: '+std);
console.group('Personal Details')
console.log('Name Of Student: '+stud[std].name);
console.groupEnd()
console.group('Class Details')
console.log('class: '+stud[std].class);
console.groupEnd()
console.groupEnd()
}
console.table ()
Это позволяет нам отображать наш вывод в табличной форме в консоли разработчика.
Требуется второй аргумент, в который мы можем передать столбец, который нужно распечатать.
let personD=[{name:"David",age:43,color:"red"},{name:"Malin",age:30,color:"blue"}];
console.table(personD,"name");//passing the second argument as name to list only name.
Console.trace ()
console.trace поможет нам записать трассировку стека. Мы также можем использовать console.log, чтобы найти, где наш скрипт вызывает проблему, но нам нужно продолжать добавлять его в каждую вызываемую функцию. Мы можем использовать console.trace () для решения этой проблемы, когда нам просто нужно написать для нее одну функцию, и она будет автоматически регистрировать трассировку.
На изображении 9 вы можете видеть, что у нас есть родительская функция, а внутри у нас есть две функции, а именно child1 () и runStackTrace (). Мы вызываем console.trace из runStackTrace (), а runStackTrace () вызывается из child1 ().
Вы можете видеть, что в выделенном списке он регистрирует стек в том порядке, в котором он был вызван.
Console.warning ()
это помогает нам выводить любые предупреждающие сообщения в консоль разработчика.
Console.error ()
Это помогает нам распечатать сообщение об ошибке в консоли разработчика.
Console.assert ()
Метод console.assert () используется для написания сообщения для пользователя в консоли разработчика, только если определенное условие возвращает false. Он принимает два аргумента: первый - это выражение, а второй - сообщение об ошибке, которое необходимо отобразить.
Console.timer () / Console.timeEnd () / Console.timeLog ()
Он запускает таймер, который мы можем использовать для отслеживания времени выполнения функции. Требуется один аргумент, в который мы можем передать уникальную метку таймера. На одной странице может быть запущено 10 000 таймеров. Когда мы вызываем console.timeEnd () с тем же именем, браузер выводит время в миллисекундах. Console.timeLog () Регистрирует текущее значение таймера, который ранее был запущен путем вызова console.time () в консоли.
console.time("time");
alert("Click Ok");
console.timeLog("time");
alert("function call");
console.timeEnd("time");
Мы просто изучаем важные методы консоли, есть несколько других методов, например console.memory и т. Д.
