Что такое Javascript консоль

Что такое Javascript Console?

JavaScript console (в дальнейшем консоль) - это встроенный в современные браузеры инструмент, который идёт в комплекте со стредствами разработки в виде shell-подобного интерфейса. С помощи консоли можно:

  • Просматривать лог ошибок и предупреждений на веб странице
  • Взаимодействовать со страницей с помощью JS команд
  • Отлаживать приложения и изменять DOM непосредственно в браузере.
  • Просматривать и проанализировать сетевую активность

В принципе, это все это позволяет вам писать, управлять и контролировать JavaScript прямо в вашем браузере.

Console.log, Console.error, Console.warn и Console.info

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

Console.group

Этот метод позволяет группировать набор команд console.logs (но также информацию об ошибках и т.д.) в группу, которая может быть свернута. Синтаксис действительно очень прост: просто введите все console.log, которые хотите сгруппировать передconsole.group ()(илиconsole.groupCollapsed (), если мы хотим, чтобы он был закрыт по умолчанию). Затем добавьте console.groupEnd () в конец, чтобы закрыть группу.

Пример использования console.group

Результаты будут выглядеть так:

Console.table

Когда я узнал про «console.table» - это было просто крутое открытие. Отображение JSON или очень больших массивов JSON внутри console.log - ужасная штука. «Console.table» позволяет визуализировать эти структуры внутри красивой таблицы, где можно дать названия столбцам и передать их в качестве параметров.

Пример использования console.table

Это очень полезно при отладке:

Console.count, Console.time и Console.timeEnd

Эти три метода - швейцарский армейский нож для каждого разработчика, которому нужно отлаживать. Console.count подсчитывает и выводит количество раз, когда count () был вызван в той же строке и с той же меткой. Console.time запускает таймер с именем, указанным в качестве входного параметра, и может запускать до 10 000 одновременных таймеров на заданной странице. После запуска мы используем вызов console.timeEnd, чтобы остановить таймер и вывести прошедшее время на консоли.

Пример использования console.time и console.count

Результат будет выглядеть так:

Console.trace и Console.assert

Эти методы просто распечатывают трассировку стека из той точки, где она была вызвана. Представьте, что вы создаете JS-библиотеку и хотите сообщить пользователю, где была создана ошибка. В этом случае эти методы могут быть очень полезными. Console.assert похож на console.trace, но будет печататься, только если переданное условие не прошло.

Как мы видим, результат - это то, что React (или любая другая библиотека) покажет нам, когда мы создадим исключение.

Удалить все вызовы в консоли

Использование консолей часто заставляет их удалять после использования. Вы должны оставлять журналы ошибок или журналы трассировки в режиме разработки для помощи при отладке. Я много использую Webpack, как на работе, так и в моих собственных проектах. Этот инструмент позволяет удалить все вызовы консоли, которые вы не хотите сохранять (по типу) из сборки при помощи uglifyjs-webpack-plugin