«console.log()» — это больше, чем вы думали!
Если вы разработчик JavaScript, я могу гарантировать, что вы использовали метод console.log() раньше. Для разработчиков, не использующих JavaScript, console.log() эквивалентна print() или System.out.println(). Однако большинство разработчиков JavaScript не осознают, что метод log() является лишь одним из многих свойств большого объекта консоли. Прежде чем приступить к изучению этой статьи, откройте инструменты разработчика Chrome, запустите «console.log(console);» (да, я использую точки с запятой, а кто их не использует?) и посмотрите на вывод.
Если вы запустили «console.log(console);» вы бы видели объект консоли вместе со всеми его многочисленными свойствами и методами. Давайте рассмотрим несколько важных, которые могут быть полезны в некоторых сценариях.
Консоль.assert()
Метод assert() в объекте консоли выводит значение, если первый аргумент в методе равен false. Метод assert() обычно используется при выдаче ошибок на основе условия.
Как видите, первый блок кода выводит ошибку «Утверждение не удалось», потому что первый аргумент в методе был ложным. Он дополнительно предоставляет текст, который был передан в качестве аргумента метода. Однако второй вызов метода assert() ничего не выводит из-за того, что первый аргумент в методе равен true.
Консоль.таблица()
Если бы вы хотели распечатать объект в JavaScript, это было бы легко сделать, и вывод был бы чистым, поскольку показаны и ключи, и значения. Однако вывод распечатываемых списков отображается не так хорошо. Следовательно, вы можете использовать console.table() для упорядоченного вывода списка, как показано в примере ниже.
Как вы можете видеть на изображении, список отображается в красивой таблице на консоли. Вы также можете визуализировать индекс и значение, поскольку они оба находятся в одной строке.
Консоль.группа()
Объект консоли состоит из метода group(), который используется для группировки нескольких методов console.log() для предоставления читаемого вывода. Метод groupCollapsed() обеспечивает тот же вариант использования, что и метод group(), однако единственное отличие состоит в том, что он сворачивает вывод в консоли. Взгляните на пример на изображении ниже.
И console.group(), и groupCollapsed() принимают один строковый аргумент, который является идентификатором группы. После этого места в коде все console.logs будут сгруппированы до тех пор, пока не будет вызван метод console.groupEnd(). Как показано на изображении, метод groupCollapsed() сворачивает вывод до тех пор, пока вы его не развернете, в то время как метод group() уже развернут.
Консоль.count()
Метод console.count() позволяет создать простой счетчик. Он принимает в качестве одного аргумента идентификатор самого счетчика, и каждый раз, когда вызывается метод console.count() вместе с переданным ему соответствующим идентификатором, он увеличивает значение счетчика, как показано на рисунке.
Консоль.время()
В JavaScript есть много случаев, когда мы, разработчики, хотим видеть скорость выполнения конкретной функции или задачи. Console.time() позволяет вам измерять время определенного действия, функции и т. д. Метод console.time() принимает один аргумент, который также является уникальным идентификатором. Оттуда время может быть зарегистрировано в выходных данных, вызвав метод console.timeLog() с уникальным идентификатором, переданным в метод в качестве аргумента. Наконец, если вы хотите перестать измерять время действия, вызовите метод console.timeEnd() с переданным в него уникальным идентификатором.
Консоль.лог()
Как упоминалось в начале статьи, метод console.log() является наиболее распространенным методом в JavaScript для отладки небольших задач и выполнения других действий. Метод console.log() выводит что-то на консоль. Однако, чтобы вывод выглядел лучше, в языке программирования JavaScript есть функция, позволяющая стилизовать выводимый текст.
Чтобы оформить свой вывод, сначала начните с простого оператора console.log() и напишите текст, который вы хотите вывести. После этого добавьте «%c» перед выходным текстом. Наконец, передайте еще один аргумент, который принимает строку со стилем CSS.
Чтобы узнать больше о CSS и базовых стилях CSS, читайте подробнее здесь.
Вывод
Консоль — это просто объект, встроенный в JavaScript. Он предоставляет множество функций, которые могут быть очень полезны в различных сценариях. Однако в этой статье обсуждались лишь некоторые из множества методов объекта консоли. В огромном консольном объекте есть еще много методов, и чтобы увидеть все эти методы, а также некоторые примеры, перейдите по этой ссылке. Надеюсь, хоть один из способов, перечисленных в статье, когда-нибудь пригодится.
Удачи в изучении консоли!
Пишите свои мысли или читайте чужие. Посетите Академически управляемый!
Instagram: @theacademicallydriven
Facebook: @theacademicallydriven
LinkedIn: академический подход
Твиттер: @AcademicallyThe
