Консоли Javascript забавны, красивы и имеют большой потенциал. Вы должны знать, как его использовать!

Что такое консоль Javascript?

Консоль JavaScript — это интерфейс командной строки в вашем браузере, который может выполнять фрагменты кода.

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

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

Как получить доступ к консоли браузера?

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

WINDOWS: наиболее распространенный способ — просто нажать [F12] в окне браузера, чтобы открыть «Инструменты разработчика». Второй вкладкой в инструментах разработчика будет «Консоль».
MAC-OS: [⌘ + Options + i] — это комбинация клавиш для инструментов разработчика.
Он работает для Chrome и в основном для всех других браузеров.
Другой способ — щелкнуть правой кнопкой мыши в окне браузера и выбрать опцию «Проверить». Он будет делать то же самое.
Вы также можете использовать опции меню браузерного приложения.

Где веселье?

У нашего любимого объекта window.console есть несколько методов.
Просто введите ниже на вкладке Консоль браузера и просмотрите список доступных методов:

окно.консоль

Теперь мы все знаем, что это не ограничивается только console.log(), .warn() или .error().

Здесь я пытаюсь объяснить, как лучше всего использовать очень мощный объект консоли для различных практик. Некоторые из них могут быть следующими:

Предупреждение. Конечные пользователи (например, Facebook и Google)
Регистрация соответствующих и необходимых выходных данных для отладки.
Структурирование журналов (табличное, отступное, цветное и т.д.)
Мониторинг производительности. (Как? 😲 Мы скоро узнаем об этом.)
Многое другое.

ЖУРНАЛЫ — console.log

Давайте рассмотрим наиболее часто используемый метод объекта Console; консоль.лог().

console.log("Привет, мир!")
Привет, мир!

Выше приведен наиболее распространенный способ использования метода .log().
Теперь давайте повеселимся.

Не строка

Нет необходимости передавать полную строку только в метод .log.

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

Код: https://justpaste.it/2dw9v

Как насчет добавления CSS в наш метод .log().

Действительно! Я не шучу.

Код: https://justpaste.it/5krdd

Цвета градиента с отступами, полями, фоном…

Код: https://justpaste.it/4bi41

Добавление эмодзи (иконки и смайлики)

Поверьте, это просто копипаст. Никакой магии.

Если вы хотите использовать то же самое в своем HTML-коде, я рекомендую вместо этого использовать соответствующий HTML-код Dec.

Вы можете использовать Интернет для поиска и копирования-вставки значков / смайликов.

😍😇☺👻💭🤘👀 Ууууу!!!🌈

Несколько веб-сайтов перечислены ниже:

https://www.alt-codes.net/smiley_alt_codes.php

https://www.alt-codes.net/food-emoji

https://graphemica.com/%F0%9F%8C%88

Узнайте больше о стандартах использования эмодзи: https://css-tricks.com/it-all-started-with-emoji-color-typography-on-the-web/

Добавление изображений в консоль 🥺

Нет! Что… на самом деле это так же просто, как добавить изображения на веб-страницу. Просто с помощью CSS.

Код: https://justpaste.it/3rnvs

Хитрость вот в чем:

добавьте несколько пробелов в текст, чтобы распределить его по ширине изображения.
Установите размер шрифта в соответствии с высотой изображения.
Поэкспериментируйте со свойствами фонового изображения и другими атрибутами CSS, чтобы открыть для себя больше возможностей 😉

БОНУС: корпоративная осторожность

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

Код: https://justpaste.it/8a9j5

GIF-анимации в консоли

Сдулся! 🤯

Даже я пробовал это только при создании этой истории. Программирование — это весело.. Не правда ли! Делиться веселее :)

Код: https://justpaste.it/8hopl

Сторонние библиотеки:

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

Одним из примеров может быть градиентная строка».

Ссылка: https://github.com/bokub/gradient-string

ПРЕДУПРЕЖДЕНИЯ И ОШИБКИ

Методы .warn() и .error() — это два других часто используемых консольных метода для вывода предупреждений и журналов ошибок в консоли браузера.

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

console.warn("Это предупреждение!")
console.error("Это ошибка!")

Преимущество или различие между этими методами и методами console.log в основном заключается в символе, который он добавляет к зарегистрированному сообщению, и цвете с фоном для выделения отдельно.

Подробнее:
http://w3schools-fa.ir/jsref/met_console_warn.html
http://w3schools-fa.ir/jsref/met_console_error.html

Табличное ведение журнала

console.table(["элемент1", "элемент2"]);

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

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

console.table({name:"Железный человек", job:"Спасти мир"})

console.table({имя:"Железный человек", задание:"Спасти мир", asl: {возраст:"69, пол:"мужской", местоположение:"земля"}})

Код: https://justpaste.it/9qxsz

Более подробную информацию можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

Мониторинг производительности скрипта

Да! Вы можете отслеживать производительность или время, затраченное на скрипт, функцию и т. д., используя консоль.

Такие методы, как time() и timeEnd(), делают это возможным.

Например;

console.time(“for”);
let sum = 0;
for (let i = 0; i ‹ 1e4; ++i) {
sum += i;
> }
console.log(sum);
console.timeEnd("for");
console.time("while");
sum = 0;
> пусть i = 1e4;
while( — i) {
sum += i;
}
console.log(sum);
console.timeEnd(“ пока");

Пример ссылки: https://dev.to/wangonya/better-consolelogs-448c
код: https://justpaste.it/7xz3j

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

ВЫВОД:

Я попытался охватить все часто используемые или полезные консольные методы. Хотя я настоятельно рекомендую вам перейти по ссылке ниже для более подробной информации:

https://developer.mozilla.org/en-US/docs/Web/API/Консоль

Я очень надеюсь, что это поможет, и вы узнали что-то новое.

Использованная литература:

https://dev.to/wangonya/better-consolelogs-448c

https://developer.mozilla.org/en-US/docs/Web/API/console (официальный)

http://w3schools-fa.ir/jsref/obj_console.html