[Перевод] Используйте консоль творчески!

• оригинал:Getting creative with the Console API!
• автор:Twitter Facebook
• Переводчик:Zavier Tang

Всегда неразделим при отладке программ JavaScriptConsole API, И большую часть времени мы просто используемconsole.log()чтобы выполнить работу. Но вы знаете, что? Нам не нужно, тебе не кажется?console.log()Одиночный выход сильно надоел? На самом деле, вы можете позволить себеConsoleКонсоль стала лучше и читабельнее 💅.

Console.log()

Хочешь верь, хочешь нет,console.log()Есть некоторые особенности, о которых вы можете не знать. Конечно, его основное применение — печать журналов. Единственное, что мы можем сделать, это сделать его более читабельным!

альтернативная строка

а такжеconsole.log()Единственное, что тесно связано с методом, это то, что вы можете связать его с так называемымальтернативная строка(String subs）一起使用。这为你提供了一个在字符串中使用特定表达式的功能，它将被所提供的参数给替换。 следующим образом:

console.log("Object value: %o with string substitution",
    {string: "str", number: 10});

Консольный результат выглядит следующим образом:

Существуют и другие формы выражений замены строки:

• %o / %O- представлятьobjects;
• %d / %i- представлятьintegers;
• %s- представлятьstrings;
• %f- представлятьfloating-point numbers;

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

console.log("Object value: ",
    {string: "str", number: 10},
    " with string substitution");

Возможно, для строк и цифр вы можете использовать толькостроковый литералформа. Однако я хочу сказать, что при выполнении какого-либо читаемого вывода журнала консоли вам нужно лучше выводить строковый формат.альтернативная строка(string subs) позволяет вам сделать это легко! Для вышеуказанных вариантов вы должны согласиться.Строка SUBSБыло бы удобнее. Что касаетсястроковый литерал

CSS

还有一个我们以前没有学过的类似替代字符串的指令。 это％c，它允许你将 CSS 样式应用于你输出打印的内容中！ 😮

console.log("Example %cCSS-styled%c %clog!",
    "color: red; font-family: monoscope;",
    "", "color: green; font-size: large; font-weight: bold");

Результаты контроля следующие:

В приведенном выше примере используется％cинструкция. Как видите, стиль, использованный в%cВсе после директивы. с помощью другого%cдиректива, чтобы закрыть использование стилей. Если вы хотите использовать простое неформатированное содержимое журнала, вам необходимо%cПередать пустую строку. Следует отметить, что％cинструкции и др.альтернативная строка的参数需要以正确的顺序添加。 😉

Группа Print & Print Execution Path

Мы только начинаем, выше мы ввели стили CSS в лог. Далее давайте посмотрим наConsoleКакой другой секрет?

групповая печать

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

вы можете использоватьconsole.group()реализовать. Используя этот метод, вы можете выводить глубокие разборные структуры (группы) в консоли, что может лучше организовать свой журнал. Если вы хотите, чтобы ваши группы рухнули по умолчанию, есть такжеconsole.groupCollapsed()метод.当然，嵌套组也可以根据你的需要进行嵌套。你还可以通过向其传递参数列表（就像使用console.log()），使你的组具有类似于日志头的形式。 В использованииgroupметод, каждая консоль найдет свое место в созданной группе. можно использоватьconsole.groupEnd()метод закрытия группы.

console.group();
console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");

Я думаю, вы заметили, что вы можете скопировать и вставить код из всех предоставленных фрагментов в свою консоль и попробовать их так, как хотите!

Консольный результат выглядит следующим образом:

распечатать путь выполнения

console.trace()

console.trace("Logging the way down here!");

Консольный результат выглядит следующим образом:

Console.XXX

Возможно, вы узнали о некоторых интересных методах API консоли. Далее мы поговорим о добавлении дополнительной информации в журнал. Давайте знакомиться с ними быстро!

Warning

console.warn()эффект иconsole.log()То же самое, но с эффектом предупреждающего стиля. В большинстве браузеров он отображается желтым текстом с символом предупреждения.⚠. При этом по умолчаниюconsole.warning()Путь выполнения также печатается, поэтому вы можете быстро найти источник предупреждения.

console.warn("This is a warning!");

Error

а такжеconsole.warn()аналогичный,console.error()Метод также печатает сообщение с путем выполнения, и стиль сообщения также особенный. Обычно он красный и имеет значок ошибки ❌. Это четко информирует пользователя о том, что здесь есть потенциально ошибочный код. Здесь стоит отметить, что,console.error()Способ просто для печати сообщения консоли, который не является дополнительным эффектом, таким как выполнение кода остановки (так что вы можете бросить ошибку здесь). Это краткое описание, потому что многие новички могут чувствовать некоторые неприятности в этой функции.

console.error("This is an error!");

Info & debug

Есть также два метода, которые можно использовать для вывода некоторых сообщений в журнал. Далее мы представимconsole.info()а такжеconsole.debug(). Их результат печати не всегда имеет уникальный стиль — в некоторых браузерах это просто значок. По сути, этот и предыдущий способы для удобства вывода некоторых ваших операций в консоль по разным категориям. В различных браузерах пользовательский интерфейс инструментов разработчика предоставляет параметры для отображения определенных категорий журналов, таких как: ошибки, отладочные сообщения или общая информация.

console.info("This is very informative!");
console.debug("Debugging a bug!");

Assert

Существует даже специальный консольный метод, предоставляющий ярлыки для выполнения различных эффектов печати при определенных условиях (утверждениях). этоconsole.assert(). как стандартconsole.log()Как и методы, он может принимать бесконечное количество параметров, разница в том, что первый из них должен быть логическим утверждением. Если утверждениеtrueОднако реакции нет, а он в свою очередь выпишет все передаваемые параметры в виде сообщения об ошибке в консоль (сconsole.error()Так же).

console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");

Затем, после печати некоторых новостей, вы можете захотеть, чтобы панель консоли выглядела более аккуратно для некоторых сообщений. нет проблем! Просто используйтеconsole.clear()方法，即可让所有打印过的旧日志全部消失！这是一个非常有用的功能，它甚至在大多数浏览器的控制台界面中都有自己的按钮（和快捷方式）！ 👍

console.clear()

выбор времени

Консольный API даже предоставляет набор методов, связанных со временем⌚. Используя их, вы можете выполнять быстрые тесты производительности для частей вашего кода. Этот API прост, вы можете использоватьconsole.time()方法开始，该方法可以将可选参数作为给定计时器的标签或标识。相关的计时器就在调用此方法时启动。 Затем вы можете использоватьconsole.timeLog()а такжеconsole.timeEnd()Метод (с необязательным идентификатором параметра) для записи вашего времени (в миллисекундах) или окончания соответствующего таймера.

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
1234

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

считать

Что делать, если у вас напечатано много журналов, но вы не знаете, сколько раз выполнялась данная часть кода? Здесь также есть API -console.count()Основная функция метода — подсчет количества его вызовов. Конечно, вы также можете передать необязательный параметр, чтобы указать метку для данного счетчика (по умолчанию используется значение по умолчанию). вы можете использоватьconsole.countReset()Способ сбрасывает выбранный счетчик.

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1

лист

Я думаю, что это одна из самых недооцененных функций API консоли (помимо стилей CSS, упомянутых ранее). Возможность вывода в консоль реальной сортируемой таблицы очень полезна при отладке и печати 2D-объектов и массивов. правильный! На самом деле можно отобразить таблицу в консоли. ты просто используешьconsole.table()И это так же просто, как передать параметр (объект или массив, если это примитивное значение, обычно просто печатает обычный журнал), попробуйте следующий фрагмент кода, чтобы увидеть эффект.

console.table([[0, 1, 2, 3, 4], [5, 6, 7, 8, 9]]);

Console ASCII art

если нетASCII art, консоль не будет такой выдающейся! с помощьюimage-to-asciiмодуль (можно найти вNPMвыше), вы можете легко преобразовать обычные изображения в их аналоги ASCII! 🖼 Кроме того, этот модуль предоставляет множество настраиваемых параметров и параметров для создания желаемого результата. Вот простой пример использования этой библиотеки:

import imageToAscii from "image-to-ascii";

imageToAscii(
"https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
    colored: false,
}, (err, converted) => {
    console.log(err || converted);
});

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

С помощью стилей CSS, с некоторыми свойствами отступов и фона вы также можете вывести полное изображение на консоль! Например: вы можете просмотретьconsole.imageмодуль (такжеNPMвыше), чтобы использовать эту функцию. Однако я думаю, что ASCII более моден. 💅

Современные журналы

Как видите, процесс регистрации и отладки вовсе не обязательно должен быть таким монохромным! помимо простогоconsole.log()Кроме того, есть больше методов. С знанием этой статьи вы можете выбрать! Вы можете использовать традиционныйconsole.log()И обеспечивающее браузер приятное форматирование с разными структурами, или вы можете использовать вышеупомянуту, чтобы добавить некоторую свежесть к консоли.

Надеюсь, вам понравилась эта статья, и я надеюсь, что она научила вас чему-то новому. А пока вы можете поделиться этой статьей с другими, чтобы у каждого была консоль, полная красок 🌈, а также вы можете оставить свое мнение через комментарии! Кроме того, вы можете подписаться на меняTwitter, вы также можете дать мнеFacebookОтправить информационный бюллетень! Наконец, еще раз спасибо за чтение и увидимся в следующей статье! ✌