Как получить максимальную отдачу от консоли JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Darryl Pargeter

Одной из самых базовых инструментов отладки в JavaScript является console.log () Отказ Консоль Поставляется с несколькими другими полезными методами, которые могут добавить к отладке разработчика.

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

• Вывод таймера, чтобы помочь с простой бенчмаркингом
• Выведите таблицу, чтобы отобразить массив или объект в простой в формате чтения
• Применять цвет и другие варианты стиля до выхода с CSS

Объект консоли

Консоль Объект дает вам доступ к консоли браузера. Он позволяет вам выводить строки, массивы и объекты, которые помогают отладить свой код. Консоль является частью окно объект, и поставляется Модель объекта браузера (BOM) Отказ

Мы можем получить доступ к Консоль в одном из двух

1. window.Console.log («Это работает»)
2. console.log ('Так что это')

Второй вариант в основном ссылка на первое, поэтому мы будем использовать последнюю, чтобы сохранить нажатия клавиш.

Одна быстрая заметка о BOM: у него нет установленного стандарта, поэтому каждый браузер реализует его немного по-разному. Я проверил все мои примеры как Chrome, так и Firefox, но ваш выход может появиться по-разному в зависимости от вашего браузера.

Вывод текста

Наиболее распространенный элемент Консоль Объект это console.log Отказ Для большинства сценариев вы будете использовать его, чтобы сделать работу.

Существует четыре различных способа вывода сообщения на консоль:

1. бревно
2. Информация
3. предупреждать
4. ошибка

Все четыре работы так же. Все, что вы делаете, это передавать один или несколько аргументов выбранного метода. Затем он отображает другой значок, чтобы указать уровень регистрации. В приведенных ниже примерах вы можете увидеть разницу между журналом Info Loge и журналом предупреждения/ошибки.

Возможно, вы заметили сообщение журнала ошибок – это более эффектное, чем другие. Это отображает как красный фон, так и Стек трассировки , где Информация и предупреждать не. Хотя предупреждать У желтого фона в хроме.

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

Струнные замены

Эта техника использует заполнитель в строке, которая заменяется другим аргументом, которые вы передаете в метод. Например:

Вход : Console.log («String% S», «Замена»)

Выход : Струнные замены

% s Заполнитель для второго аргумента «Замена» Это приходит после запятой. Любые строки, целые числа или массивы будут преобразованы в строку и заменит % s Отказ Если вы пройдете объект, он будет отображаться [Объект объекта] Отказ

Если вы хотите пройти объект, вам нужно использовать % о или % О вместо % s Отказ

Console.log («Это объект% O ‘, {Obj: {obj2:’ hello ‘}})

Числа

Струнный замена может использоваться с целыми значениями и значениями плавающих точек с помощью:

• % я или % d Для целых чисел,
• % f для плавучих точек.

Вход : console.log ('int:% d, плавающая точка:% f', 1, 1.5)

Выход : INT: 1, с плавающей точкой: 1.500000

Поплавки можно отформатировать, чтобы отобразить только одну цифру после десятичной точки, используя % .1f Отказ Вы можете сделать % .nf отображать количество цифр после десятичной.

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

Вход : console.log ('int:% d, плавающая точка:% .1f', 1, 1.5)

Выход : INT: 1, плавающая точка: 1,5

Форматирование спецификаторов

1. % s |. заменяет элемент со строкой
2. % (d | i) |. заменяет элемент с целым числом
3. % f |. заменяет элемент с поплавком
4. % (o | o) |. Элемент отображается как объект.
5. % c |. Применяет предоставленные CSS

Струнные шаблоны

С появлением ES6 шаблонные литералы являются альтернативой заменам или конкатенации. Они используют BackTicks (“) вместо кавычек, а переменные идут внутрь $ {} :

const a = 'substitutions';

console.log(`bear: ${a}`);

// bear: substitutions

Отображение объектов как [Объект объекта] В шаблонах литералов, так что вам нужно будет использовать замену % о или % О Чтобы увидеть детали или регистрировать его отдельно по себе.

Использование замены или шаблонов создает код, который легче читать по сравнению с использованием строки Concatenation: console.log (Hello '+ STR +'! '); Отказ

Красивый цвет Interlude!

Теперь настало время для чего-то более веселого и красочного!

Настало время сделать наши Консоль Поп с разными цветами со струнными заменами.

Я буду пользоваться издевателем примером Ajax, который дает нам как успех (зеленый), так и сбой (красным) для отображения. Вот вывод и код:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');

const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');

console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response

console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

Вы применяете правила CSS в строковой замене с помощью % c заполнитель.

console.error('%c /dancing/bats failed!', failure);

Затем поместите элементы CSS в качестве строкового аргумента, и вы можете иметь журналы в стиле CSS. Вы можете добавить больше, чем один % c в строку тоже.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

Это выкроет слова «красный», «синий» и «белый» в уважаемых цветах.

Существует довольно много свойств CSS, поддерживаемых консолью. Я бы порекомендовал экспериментировать, чтобы увидеть, что работает и что нет. Опять же, ваши результаты могут варьироваться в зависимости от вашего браузера.

Другие доступные методы

Вот несколько других доступных Консоль методы. Обратите внимание, что некоторые элементы ниже не имели их API стандартизированных, поэтому между браузерами могут быть несовместимость. Примеры были созданы с Firefox 51.0.1.

Утверждать()

Assert Использует два аргумента – если первый аргумент оценивает фальсифицирующее значение, то он отображает второй аргумент.

let isTrue = false;

console.assert(isTrue, 'This will display');

isTrue = true;

console.assert(isTrue, 'This will not');

Если утверждение неверно, он выводит на консоль. Он отображается в качестве журнала уровня ошибок, как упомянуто выше, предоставляя вам красное сообщение об ошибке и трассировку стека.

DIR ()

Дир Метод отображает интерактивный список, переданный ему объект.

console.dir(document.body);

В конечном итоге, Дир только сохраняет один или два клика. Если вам нужно проверить объект из ответа API, то отображение его в этом структурированном виде может сэкономить вам некоторое время.

Таблица()

Таблица Метод отображает массив или объект в качестве таблицы.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

Индексы индексов массива или имена объектов поставляются под столбце левого индекса. Затем значения отображаются в правой колонке.

const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table(superhero);

Примечание для пользователей Chrome: Это было доведено до моего внимания сотрудниками, но приведенными выше примерами Таблица Метод, кажется, не работает в Chrome. Вы можете обойти эту проблему, разместив любые элементы в массив массивов или массив объектов:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);

const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table([superhero]); 

Группа()

Console.group () состоит как минимум минимум три Консоль Вызывы, и, вероятно, является методом, который требует наибольшего использования для использования. Но это также один из самых полезных (особенно для разработчиков, использующих Redux Logger ).

Несколько базовый звонок выглядит так:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

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

Firefox показывает список отступов:

Chrome показывает их в стиле объекта:

Каждый звонок в Console.group () начнет новую группу или создать новый уровень, если он вызывается внутри группы. Каждый раз, когда вы звоните Console.grupend () Это положит конец текущей группе или уровню и вернуть резервную копию одного уровня.

Я нахожу стиль вывода Chrome легче читать, так как он больше похож на складной объект.

Вы можете пройти Группа аргумент заголовка, который будет отображаться на Console.group :

console.group('Header');

Вы можете отобразить группу как рухнутую с самого начала, если вы звоните Console.groupCollapsed () Отказ Исходя из моим опытом, это, кажется, работает только в Chrome.

Время()

время Метод, как Группа Способ выше, поставляется в двух частях.

Метод для запуска таймера и метода для его конца.

Как только таймер закончится, он выводит общее время выполнения в миллисекундах.

Чтобы начать таймер, вы используете Console.time («ID для таймера») и завершить таймер, который вы используете Console.Timeend («ID для таймера») Отказ Вы можете одновременно работать до 10000 таймеров.

Вывод будет выглядеть немного похоже на этот Таймер: 0,57 мс.

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

Заключение

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

Есть пара методов, о которых я не говорил, так как их API все еще меняется. Вы можете прочитать больше о них или в консоли в целом на MDN Web API Page и его Живая спецификация страницы Отказ