Методы консоли в JavaScript
Методы для работы с консолью. Какие есть методы и примеры их применения. Как вывести стилизованные сообщения в консоль, в табличном виде, в виде js-объекта.
Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.
Методы Console
В методы для консоли можно передавать неограниченное число аргументов, разделённых запятыми:
В результате в консоли все эти аргументы будут объеденены в одну строку через пробелы:
Ещё вариант простого сообщения 1 2 3 4
console.log выводит DOM-элементы в консоль как HTML. Чтобы вывести DOM-элемент в консоль в виде объекта используем метод dir()
Форматированные сообщения консоли
При выводе в консоль эти методы имеют визуальное оформление, но в каждом браузере это реализовано немного по разному.
console.info()
Выводит информационное сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.
console.warn()
Выводит предупреждающее сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.
console.error()
Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
В консоли браузера Google Crome эти сообщения будут выглядеть так:
А вот так это же выглядит в браузере Mozilla Firefox, где видно что в мазиле для info есть иконка:
console.time()
Метод time() для объекта консоли, выводит время выполняемого фрагмента кода.
Таймеров может быть установлено неограниченное количество, главное не забывать в конце фрагмента кода ставить console.timeEnd(‘Name’)
console.group()
Теперь в консоли можно сворачивать сообщения согласно их групп. При этом поддерживается вложенность:
console.table()
Метод console.table() позволяет вывести данные в консоль в виде таблицы. Эта возможность не является стандартной и стандартизировать её пока никто не собирается. И хоть метод не стандартизированный, он поддерживается в браузерах Crome, Firefox и многих других.
Имеет следующий синтаксис:
При выводе данных в консоль в виде таблицы, у таблицы всегда будет первым столбиком индексовая колонка.
В консоли мы увидим такую картину:
При этом если кликнуть на название колонки, то будет выполнена сортировка элементов.
Используем console на полную
Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert’ом. Что-ж, давайте исправим это положение.
Небольшое примечание: использование отладочного кода может негативно сказаться на производительности. Удаляйте его из продакшн версии.
Больше, чем просто сообщения
Перед тем, как погрузиться в малоизвестные методы console, рассмотрим функционал console.log подробнее. Например, возможность передачи любого числа аргументов:
В результате все переданные аргументы будут выведены и разделены пробелом. Это, конечно, хорошо, но было бы еще лучше, если бы мы могли как-нибудь вывести все эти аргументы в виде красиво отформатированного сообщения. Хотя, постойте… мы можем!
Если Вы знакомы с функцией printf() в других языках, то спешим обрадовать: console.log() умеет вести себя похожим образом. Возьмем последний пример и передадим первый аргумент в немного измененном виде.
Что за %s?
Отличный вопрос! Это управляющие последовательности, которые заменяются на соответствующие им значения (в порядке очередности). %s означает «трактовать значение как строку», %d — как число (Также можно использовать %i или %f).
Каждое вхождение такой последовательности будет заменено на следующий по порядку аргумент. Первое вхождение — на первый (за первым аргументом-строкой, конечно), ну и так далее.
Эта команда как бы говорит «Я начну со второго аргумента и продолжу, начиная со следующего». Как Вы видите, последовательности, которым не хватило аргументов, остались нетронутыми.
Первый аргумент (строка формата) также участвует в нумерации (она идет с нуля) аргументов. Таким образом, в нашем примере последний аргумент будет иметь номер 5. Но мы задали всего 5 аргументов и, при этом, начали со второго. Поэтому, последней управляющей последовательности аргументов не досталось, и она не изменилась.
Чтобы это исправить, можно изменить формат строки таким образом, чтобы «указатель» не следующий элемент синхронизировался со списком аргументов в определенный момент. Тогда все будет работать как положено.
Для того, чтобы аргументы были выведены правильно, нам нужно изменить порядок вывода второго и третьего элементов. Другие элементы и так в правильном положении, так что нет необходимости указывать их позиции. Аргументы будут использованы в следующем порядке: 2, 1, 3, 4, 5.
Форматирование строк — мощный инструмент, и я охватил только вершину айсберга. Попробуйте поиграться самостоятельно и почитать, что пишет Joe Hewitts о консоли.
Различные типы сообщения
Есть еще пара методов, подобных log, но отличающихся внешне. А именно: console.info(), console.warn() и console.error().
console.info(), console.warn() и console.error() в Firebug’е.
Все три метода умеют выводить строки в соответствие с форматом и принимать любое количество аргументов.
Логи DOM’а
Когда Вам нужно как-то указать в логах на DOM узел лучшего всего использовать методы console.dir() или console.dirxml(), которые могут перечислить свойства элемента или вывести HTML кода элемента.
Знакомьтесь: console.dir() и console.dirxml() в Chrome.
Группировка
Иногда бывает полезно сгруппировать логи для упрощения работы с ними. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().
Группировка в консоли Safari.
Как Вы можете видеть, подряд идущие вызовы group создают вложенные папки. Чтобы закрывать папку, используйте метод console.groupEnd(). Метод console.groupCollapsed() аналогичен console.group() за тем лишь исключением, что группа со всем содержимым будет изначально свернута.
Профилирование и замеры
Также консоль позволяет точно замерять время, используя метод console.time() и console.timeEnd(). Расположите вызов первого из них перед кодом, время исполнения которого хотите замерить, а второго — после.
Пример работы console.time() и console.timeEnd() в Firefox
Таймеры связаны между собой метками (передаются первым аргументом и могут быть любой строкой), так что Вы можете запустить несколько таймеров одновременно. Когда сработает console.timeEnd(), будет выведено сообщение с меткой и прошедшим временем в миллисекундах.
Помимо замера времени можно профилировать Ваш код и вывести стек профилирования, который подробно показывает, где и сколько времени потратил браузер.
Профилирование в Chrome.
Assert’ы
Когда Вы работаете над сложным проектом, важно покрывать код юнит тестами. Это позволит избежать глупых ошибок и возможных регрессий. К счастью, консоль включает в себя assert’ы.
Assert’ы позволяют обеспечивать соблюдение правил в коде и быть уверенным, что результаты выполнения этого кода соответствуют ожиданиям. Метод console.assert() позволяет проводить элементарное тестирование кода: если что-то пойдет не так, будет выброшено исключение. Первым аргументом может быть все, что угодно: функция, проверка на равенство или проверка существования объекта.
Assert в Chrome
Метод assert принимает условие, которое является обязательным к выполнению (в данном случае простая строгая проверка на равенство) и, вторым аргументом, сообщение, которое будет выведено в консоль вместе с выброшенным исключением, если первое условие не будет выполнено.
Поддержка браузерами
Большинство перечисленных методов поддерживаются достаточно хорошо. IE8+, Firefox с расширением firebug, Opera или webkit-браузер вроде Safari или Chrome. Есть, правда, некоторые различия: Firefox, Safari и Chrome отличаются более широкой поддержкой. Проще всего проверить совместимость можно выполнив console.dir(console), результатом которого будет вывод объекта console со всеми его методами.
Opera с Dragonfly поддерживает большинство методов, за исключением форматирования строк и профилирования (хотя методы profile, profileEnd и реализованы, это всего лишь заглушки).
IE8 также поддерживает много вкусностей, включая форматирование строк и assert’ы, но не замеры времени, профилирование, методы dir или dirxml.
Стоит отметить, что firebug lite может добавить некоторые методы к console в браузерах, их не поддерживающих.
Это не полный список того, что есть в console, но я перечислил наиболее полезные возможности, существенно упрощающие процесс отладки и тестирования. Используйте приобретенные знания и не ограничивайтесь одним лишь логированием строк.
Extra
Итак, это был очень вольный перевод статьи, но теперь я бы хотел добавить немного от себя:
Node.JS (ветка 0.2) поддерживает методы log, info, warn, error, dir, time / timeEnd, assert и trace.
log не умеет изменять порядок аргументов для подстановок, но сами подстановки реализованы. При вызове метода trace в консоль будет выведен стек вызовов (все методы ничего не возвращают, а просто пишут в консоль). Работает это также как минимум в Chrome и Opera.
В Opera и Chrome, помимо уже перечисленных, реализованы следующие методы:
count — выводит, сколько раз уже выполнялась строка, на которой расположен вызов метода. Аргументом передается строка, которая будет выведена перед количеством вызовов.
debug — ничем не отличается от log.
Также в Chrome у объекта console есть свойство memory, являющееся объектом со свойствами totalJSHeapSize и usedJSHeapSize. Однако, в Chromium’е мне так и не удалось застать эти свойства со значениями, отличными от нуля.
Почти всё в JavaScript — объект
Время чтения: 6 мин
Обновлено 1 ноября 2021
Кратко
Как понять
Массивы и функции
Объект — это сущность с набором свойств. Мы можем добавлять, менять и удалять эти свойства.
console.dir — это функция, которая отображает любой объект в виде иерархического дерева. Полезно, когда нужно провести анализ прототипов.
Если взглянуть на массив, то у него тоже есть набор свойств, но свой. Например, у массива есть длина, есть методы для работы с ним. Обращение к элементу массива по индексу, как можно заметить, это очень похоже на обращение к полю объекта с помощью квадратных скобок.
Аналогичная ситуация с функциями — у них тоже есть набор свойств, который можно увидеть, выведя информацию о ней в консоль.
Такая структура массивов и функций очень похожа на структуру объектов. Но на самом деле это и есть объекты, и в этом можно легко убедится.
Свойство __proto__ является устаревшим (deprecated), не используйте его в коде, особенно для того, чтобы самостоятельно устанавливать прототип.
Если посмотреть свойство прототипа, то можно заметить, что прототипом текущего прототипа является объект. Заглянув в этот прототип, можно увидеть такую картину:
В этой цепочке следующего прототипа уже нет, а это значит, что мы дошли до самого конца цепочки, т.е нашли прародителя. Если подобным образом вывести в консоль любой массив, то спускаясь ниже по цепочке прототипов, в конце обязательно будет именно прототип объекта. Любая сущность в JavaScript наследуется от объекта.
Примитивы
В JavaScript существуют примитивные типы данных, такие как строки, числа или булевы значения. При работе со строкой можно обнаружить, что у неё тоже есть свойства и методы, к которым можно обратится.
Для других типов данных есть аналогичные функции: Number для чисел, Boolean для булевых значений. Все эти функции так же являются наследниками объекта.
Главное отличие между объектами (массивами, функциями) и примитивами в том, что примитивы неизменяемые. Попытка изменения или добавления свойств к примитиву ничего не сделает.
Как пишется
У объектов и массивов поля и методы можно вызывать всегда: и через переменную, и инлайн (inline), т.е без использования переменной.
Почти у всех примитивов без переменной тоже можно обращаться к методам:
Правда, в случае с числами можно получить синтаксическую ошибку, потому что точка воспринимается как часть самого числа:
Чтобы этого избежать, можно использовать две точки, взять выражение в скобки или вызвать обёртку примитивного типа:
Вызов методов или свойств не сработает у null и undefined :
На практике
Егор Огарков
Очень редко возникает необходимость делать обращение к каким-либо методам объекта или примитива без использования переменной (как в примерах выше). Это негативно влияет на читаемость кода, поэтому лучше всегда использовать переменные для хранения значений. Так можно безопасно обращаться к методам как объекта, так и примитива, а JavaScript самостоятельно решит что сделать, чтобы выдать нужный результат.
Консоль JavaScript: выводим отладку на новый уровень
Список всех методов консоли, которые описаны в этой статье:
1. console.log()
Это наиболее распространенный метод ведения отладки. Эта функция просто выводит в консоль любые переменные/строки. Достаточно перечислить несколько переменных/строк, поставив между ними запятую.
Единственная строка выведенная в консоль:
В консоль будет выведено несколько переменных:
В консоль будет выведено несколько переменных:
Вы также можете украсить вывод в консоли используя CSS стили. Если вы отлаживаете приложение с большим количеством записей, вам могут пригодиться следующие методы ведения логов:
log, info, error и warn
Чтобы применить свои собственные стили к логам, поставьте перед выводом флаг %c, а во втором параметре укажите строку свойств стилей CSS, как показано в примере ниже:
Зачем применять CSS стили к логам?
Цвета могут помочь сделать понятнее логи. Чтобы отлаживать приложение с множеством логов, создайте собственный набор методов ведения логов, в котором каждый метод имеет уникальный цвет для каждого компонента или модуля. Затем по цветам вы можете легко определить, откуда берется та или иная запись.
2. console.clear()
Использование логирования при разработке или отладке – обычная практика. Вы заметите, что с каждым обновлением консоль начинает загромождаться записями.
Чтобы этого избежать, вы можете просто добавить console.clear () в начало кода. Теперь при каждом обновлении вы будете получать чистую консоль.
3. console.warn()
Если вы работаете с панелью инструментов разработчика или API, console.warn() действительно полезна для предупреждения пользователей о том, что что-то не так.
Обычно это используется пакетами NPM, чтобы сообщить разработчикам, устарело ли API или о любых будущих изменениях в библиотеке. Некоторые браузеры добавляют в журнал консоли небольшой восклицательный знак ⚠️ для предупреждений.
4. console.table()
Он отображает объект, массив или массив объектов в табличном формате, что упрощает просмотр объектов и массивов.
Ограничение выводимых колонок
Используя этот метод, вы также можете ограничить количество столбцов, отображаемых в таблице (в консоли). Это делается путем передачи методу второго аргумента, который представляет собой список столбцов в формате массива.
Давайте еще раз посмотрим на приведенный выше пример (массив объектов), но на этот раз мы будем отображать только имя и возраст.
Обратите внимание: вы можете отсортировать таблицы, кликнув по заголовкам столбцов.
5. console.dir()
console.dir() распознает объект как объект и выводит его свойства, тогда как console.log() выводит объект в его строковом представлении.
Когда нужно напечатать строку, и console.log(), и console.dir() возвращают обычную строку.
А теперь посмотрим на вывод объектов и массивов:
console.dir() может принимать только один аргумент, тогда как в console.log() мы можем передавать несколько аргументов.
Если в console.dir() передается несколько аргументов, в консоль будет выведен только первый аргумент, а остальные аргументы будут проигнорированы.
Ниже приведен пример console.dir() с несколькими аргументами, переданными методу. В консоль выводится только первый аргумент.
6. console.group() и console.groupCollapsed()
Если вам нужно вывести слишком много сообщений в консоль, все очень быстро запутается (особенно, если вы не используете метки для значений). Более того, когда вы используете console.log() внутри цикла, в консоль будет записываться множество повторяющихся сообщений.
Для группировки логов для каждого цикла обычно используется console.log() с разделителем. Например – console.log(‘*’). Лучшим способом обработки таких сценариев будет использование console.group().
console.group и console.groupEnd
console.group() позволяет нам группировать операторы консоли. Для завершения группировки или консольных операторов используется метод console.groupEnd().
console.groupEnd() не требует никаких параметров, так как всегда закрывает последнюю созданную группу.
Обратите внимание: вы также можете использовать группы внутри групп.
console.groupCollapsed и console.groupEnd
Группировка сообщений методом console.groupCollapsed
Обратите внимание: вы также можете использовать группы внутри групп.
7. console.count() и console.countReset()
console.count()
Этот метод устанавливает счетчик на значение, указанное в качестве аргумента. Каждый раз, когда этот метод вызывается, счетчик увеличивается.
Если аргумент, переданный этому методу, является числом в строковом представлении, строка преобразуется в число. Пример:
Если при последовательном вводе метода count в консоль отладки аргумент не указан, в качестве параметра принимается пустая строка.
console.countReset()
Этот метод сбрасывает счетчик для конкретной метки, переданной в качестве аргумента. Аргумент является необязательным, и если аргумент не передан, он сбрасывает счетчик «по умолчанию».
Давайте сначала посмотрим на сброс счетчика по умолчанию в приведенном ниже примере:
Теперь посмотрим на пример сброса счетчика в обход метки:
8. console.assert()
Этот метод принимает несколько аргументов. Первый аргумент – это логическое значение, и если первый аргумент имеет значение false, он записывает сообщение об ошибке в консоль, добавляя остальные параметры.
Ниже приведен пример использования. Он выдаст сообщение об ошибке Assertion failed, если первый параметр имеет значение false.
9. console.error()
Этот метод выводит в консоль сообщение об ошибке.
Методы и свойства строк и чисел. Что это такое?
Понятие методы и свойства относятся и к объектам.
Методов и свойств у строк и чисел очень много. Рассмотрим основные из них.
Свойство length
Свойство length возвращает число символов строки.
Пример 1.1
Свойство length возвращает число элементов массива.
Пример 1.2
Методы выполняют какие-либо действия. Рассмотрим некоторые из них.
Метод toUpperCase
Метод toUpperCase() переводит все символы строки в верхний регистр. При этом исходное значение строки остается прежним.
Методы indexOf и lastIndexOf, slice и substring
Метод substr()
Начиная с 6-го метод substr возвращает 3 символа.
Не имеет смысла рассматривать все строковые и числовые методы: их много. Со временем и на практике большая часть из них будет освоена.
Документация по строкам и документация по числам: здесь есть все методы и свойства строк и чисел.
Чтобы получить какой-либо элемент строки, нужно вместе с именем строковой переменной указать индекс (порядковый номер) элемента строки.
Мы получили 3-ий элемент строки. Нумерация элементов строк/массивов в JavaScript начинается с нуля.
Для работы с числами в JavaScript есть отдельная библиотека, существующая внутри браузера. Это объект Math.
И метод random, который возвращает случайное число.
Методы parseInt() и parseFloat()
На практике также часто используются методы parseInt и parseFloat, которые являются отдельными функциями и которые позволяют конвертировать строки в числа.
