Использование консоли JavaScript не только для простого ведения журнала

10 полезных вещей, которые вы можете делать с помощью консоли для лучшей отладки и улучшения рабочего процесса

В JavaScript для отладки кода goto используется console.log(). Мы используем console.log(), чтобы что-то записывать в консоль, а затем проверять правильность данных и правильность работы функций. Консоль JavaScript также предлагает множество других методов, которые вы можете использовать в дополнение к console.log().

Здесь вы подробно увидите десять методов, которые вы можете использовать, которые являются частью объекта консоли JavaScript. Эти методы также помогут вам улучшить рабочий процесс отладки и разработки.

1. журнал, информация, отладка, предупреждение и ошибка

Эти методы можно использовать для вывода сообщений на консоль с разными уровнями журнала.

бревно( )

log() выводит сообщение на консоль.

Примеры log() с разными параметрами:

Несколько объектов в качестве параметров

2. Одностроковый объект в качестве параметра

3. Строковое сообщение с заменяющими значениями

Для подстановки можно использовать следующие директивы:

%d или %i для целочисленного значения
%f для значения с плавающей запятой
%s для строкового значения
%O или %o для значения объекта

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

Информация( )

info() отображает сообщения в консоли так же, как и log (), но эти сообщения классифицируются как информативные.

Пример info() с несколькими строковыми объектами в качестве параметров

отладка ()

debug() отображает сообщение на консоли с отладкой на уровне журнала.

Пример debug() с несколькими строковыми объектами в качестве параметров

предупреждать( )

warn() отображает сообщение на консоли в виде предупреждения.

Пример warn() с несколькими строковыми объектами в качестве параметров

ошибка( )

error() отображает сообщение для консоли в виде ошибки.

Пример error() с несколькими строковыми объектами в качестве параметров

Совет. Вы также можете отфильтровать разные уровни журналов, переключив панель фильтров в инструментах разработчика, как показано ниже.

Когда вы увидите панель фильтров, вы можете щелкнуть разные уровни журналов, чтобы просмотреть только сообщения из этих категорий. Обратите внимание, что результаты для log() и info() относятся к категории информация (для браузера Chrome).

2. Добавьте стили в вывод консоли.

Вы можете использовать %c директиву внутри строкового сообщения любого из методов ведения журнала для стилизации вывода на консоли.

Стили будут применены к тексту после директивы %c, и текст перед директивой не будет затронут.

Пример оформления сообщения с использованием log() с несколькими директивами %c и несколькими объявлениями CSS в качестве параметров

Примечание. Здесь вы видели пример с log(), но вы также можете применять стили к сообщениям со всеми другими методами ведения журнала, такими как info(), debug(), warn(), и error().

Некоторые стандартные свойства, которые вы можете использовать с директивой %c:

фон и его эквиваленты.
граница и ее длинные эквиваленты
border-radius
цвет
шрифт и его длинные эквиваленты
высота линии
прибыль
набивка

3. Отображение объектов и элементов HTML / XML в интерактивном формате с помощью dir и dirxml.

dir ()

dir() отображает интерактивный список свойств в форме объекта JavaScript для данного параметра объекта, и вы можете развернуть его, чтобы увидеть все доступные дочерние свойства и методы этого объекта. объект.

Пример отображения свойства местоположения объекта документа в формате интерактивного списка

dirxml ()

dirxml() отображает интерактивное дерево для данного элемента HTML / XML в качестве параметра. Если невозможно отобразить данный элемент в виде дерева, он будет отображаться как объект JavaScript. И вы можете развернуть дерево, чтобы увидеть содержимое дочерних узлов для данного элемента.

Пример отображения объекта документа в виде интерактивного дерева

4. Отображение данных в табличной форме с помощью таблицы

table() принимает обязательный параметр данных, который может быть массивом или объектом, а также необязательный параметр массива имен столбцов. Каждый элемент в свойстве Array / в объекте будет строкой в таблице, отображаемой на консоли.

Первый столбец таблицы будет помечен как индекс, если данный параметр является массивом со значениями индексов, а в случае объекта - значениями в первом столбце. будут именами свойств этого объекта.

Примеры table() с разными параметрами:

С массивом в качестве параметра

2. Отображение составных типов

2.1. С массивом массивов в качестве параметра

2.2. С массивом объектов в качестве параметра

2.3. С объектом, свойства которого являются объектами в качестве параметра

3. Если количество столбцов в таблице ограничено вторым параметром

4. Где вы можете отсортировать таблицу по определенному столбцу, щелкнув ярлык этого столбца (используя вывод того же кода выше)

5. Подсчитайте, сколько раз сообщение распечатывается, используя count и countReset.

считать( )

count() отображает количество вызовов count() с той же меткой / меткой по умолчанию.

countReset ()

countReset() сбрасывает значение счетчика на 0 для данной метки / метки по умолчанию.

Примеры count() и countReset() с разными параметрами:

С ярлыком в качестве параметра

В этом примере вы дважды вызываете функцию счетчика, которая имеет count() с меткой, которая два раза отображает счетчик на консоли с заданной меткой. Затем вы используете countReset() с той же меткой, чтобы сбросить значение до 0 и снова вызываете функцию счетчика, чтобы отобразить счетчик с данной меткой, которая началась с 0, потому что мы использовали countReset() ранее.

2. Без параметров (в качестве метки выводится значение по умолчанию)

6. Сгруппируйте разные журналы, используя group, groupCollapsed и groupEnd.

группа( )

group() создает новую группу сообщений и делает отступы для этих сгруппированных сообщений в консоли до тех пор, пока не будет вызван groupEnd(), и все сообщения консоли, зарегистрированные между этими двумя вызовами функций, будут частью этой помеченной / немаркированной группы.

groupEnd ()

groupEnd() останавливает группировку сообщений, начатую group().

groupCollapsed ()

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

Примеры group(), groupCollapsed() и groupEnd() с разными параметрами

С ярлыком в качестве параметра

2. Без каких-либо параметров

7. Выведите сообщение на консоль на основе оценки условия с помощью assert.

assert() отображает сообщение в консоли, если условие оценивается как ложное, и ничего не выводит на консоль, если условие выполнено.

Примечание. Все директивы замены, которые вы видели для методов ведения журнала , также применимы для assert().

Примеры assert() с разными параметрами:

С условием и одним строковым объектом в качестве параметров

2. С условием и несколькими объектами в качестве параметров

3. С условием и строкой с заменами в качестве параметров

8. Рассчитайте время, затрачиваемое на выполнение операций, используя time, timeLog и timeEnd.

время( )

time() запускает таймер, чтобы отслеживать время, необходимое для завершения операции.

timeLog ()

timeLog() выводит текущее значение таймера, запущенного time().

timeEnd ()

timeEnd() завершает таймер, запущенный time(), и отображает конечное значение таймера.

Примеры time(), timeLog() и timeEnd() с разными параметрами:

С ярлыком в качестве параметра

2. Без параметров (в качестве метки выводится значение по умолчанию)

9. Отобразите трассировку стека кода.

trace() выводит трассировку стека на консоль.

Примеры trace() с разными параметрами:

1. С несколькими объектами в качестве параметров