9 различных вариантов использования console log

9 различных вариантов использования console log

18-10-2020 09:35:58
Каждый из нас использовал console.logдля отладки больше, чем нам хотелось бы признать. Я использую его несколько раз в день, чтобы проверить свои изменения, но в основном это делается только с помощью console.log. Тем не менее, консольный API предоставляет гораздо больше функциональных возможностей - больше функциональных возможностей, чем известно большинству пользователей.

Мы можем использовать его не только для регистрации, но и для устранения проблем с производительностью или для проверки изменений с помощью утверждений. Эта статья представляет собой набор из девяти различных вариантов использования консольного API, который может помочь вам в отладке поверх console.log.

Давайте начнем с самого начала с простых вещей, которые мы все знаем: уровни логирования.



1: Уровни журнала



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

consolelog

Глядя на GIF выше, вы уже можете видеть различные доступные уровни журнала. По умолчанию Verbose отключен - следовательно, вы не увидите журнал отладки, пока он не будет проверен. То же самое верно и для остальных трех.

Следующий уровень, который является Info, отвечает за обработку console.info. Если вы снимите флажок Информация, оба console.infoи console.logбудут скрыты. Два эквивалентны. Предупреждения и ошибки, однако, будут оформлены по-другому.

consolelog ><br> 
<br> 
Как вы можете видеть, нет никакой визуальной разницы между console.logи console.info. Оба могут быть использованы для выхода из общей информации.<br> 
<br> 
Вы должны использовать, warnкогда что-то идет не так, как надо в вашем приложении, но оно все еще может восстанавливаться автоматически и не влияет на работу, в то время как его errorследует использовать в случае, если это влияет на поток пользователя и может привести к сбою приложения и его остановке.<br> 
<br> 
<br> 
<br> 
<h2>2. Dir и DirXml</h2><br> 
<br> 
Если вам нужны дополнительные возможности отладки, dirи, dirxmlвозможно, это то, что вы ищете.<br> 
<br> 
Оба используются для отображения интерактивного списка объекта. Давайте посмотрим несколько примеров. Допустим, вы хотите выйти из свойств элемента DOM. Понятно, что если вы используете console.log, вы получите представление HTML. Это тот случай, когда вы используете console.dirxmlтакже. Как следует из названия, оно отображает представление XML или HTML указанного вами объекта.<br> 
<br> 
<img src=

Но не с console.dir. Как видно из приведенного выше примера, в этом случае logи dirxmlидентичны. Но console.dirвыходит из тела в представлении объекта JavaScript.

Какие еще случаи? Есть определенные объекты, которые logстроковые. Лучший пример будет regex:

consolelog

Пока logвыводится только строковое представление выражения, с помощью которого dirмы получаем все доступные свойства объекта.



3. Форматирование



Если предыдущие примеры по-прежнему не удовлетворяют вашим потребностям, вы можете воспользоваться другими вариантами форматирования. Одним из них является console.table. Он отображает переданные данные - которые могут быть массивом или объектом - в таблице.

consolelog

Таблицы также могут быть отсортированы

И если вы хотите, чтобы ваши сообщения действительно выделялись, потому что вы не можете найти то, что ищете в море консольных сообщений, тогда вы можете указать стили CSS в качестве второго аргумента console.log.

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

consolelog



4. Группировка



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

consolelog

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

consolelog



5. Утверждения



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

Это для чего console.assert. Он ожидает утверждения, и если он оценивается как ложный, он выводит трассировку стека на консоль.

consolelog


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



6. Отладка



Мы использовали утверждения и видим, как все провалилось. Нам нужен способ отладки вещей. Для целей отладки мы можем использовать console.trace. Используется для отображения трассировки стека:

consolelog

Кроме того, если вы подозреваете, что у вас есть проблемы с памятью, такие как утечка памяти, вы можете распечатать использование памяти с помощью console.memory.

consolelog



7. Мониторинг производительности



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

Итак, вы хотите измерить производительность. Вы думаете, что это из-за цикла for, который вы реализовали ранее, чтобы заполнить страницу цыплятами. Для измерения производительности мы можем использовать console.time.

consolelog

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

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

consolelog

Вызов timeLogвыйдет из текущего значения времени.



8. Обратный отсчет



И теперь мы достигли конца этого списка, так что давайте посчитаем - или, вернее, до - прежде чем закончить все.

consolelog


Эта этикетка будет распечатана вместе с количеством вызовов. Это полезно, если вы хотите узнать, сколько раз была вызвана функция или какой компонент был представлен. Если вы хотите сбросить счет и начать все сначала, вы можете использовать countReset.

consolelog



9. Начиная с новой страницы



И, наконец, отпустить все , что мы так до сих пор и начать с чистого листа, давайте использовать , console.clearчтобы избавиться от беспорядка мы сделали.

consolelog

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

























САМОЕ ОБСУЖДАЕМОЕ

...
Титан в воздухе
18-10-2020 09:35:58
Это не самолет – это Мрия!!!...
...
Лучшие бюджетные ноутбуки на 2020 год
18-10-2020 09:35:59
Как выбрать лучший ноутбук в 2020 году...
...
Технологические тенденции в 2020 году
18-10-2020 09:35:59
Технологи будущего уже сегодня...
...
Самостоятельная поездка автомобиля под управлением искусственного интеллекта
18-10-2020 09:35:58
Самый далекий перезд без водителя в истории искуственного интеллекта....
...
Ford Bronco наконец дебютирует 9 июля
18-10-2020 09:35:58
После задержек, связанных с коронавирусом, у долгожданной Бронко Форда официально объявлена ​​дата....
...
Tesla Semi готова к «массовому производству»
18-10-2020 09:35:58
Но генеральный директор не указал точные сроки начала производства электрического грузовика....
...
25 самых продаваемых легковых автомобилей, грузовиков и внедорожников 2020 года (пока)
18-10-2020 09:35:58
Хотя пандемия коронавируса привела к хаосу в продажах автомобилей, мы подсчитали рейтинг самых продаваемых в первом квартале....
...
Электрический Mustang
18-10-2020 09:35:58
Ford представляет электрический Mustang с «потрясающим» ускорением...
...
Cамые большие дизайнерские моменты 2018 года
18-10-2020 09:35:59
Мы попросили дизайнеров рассказать нам, что они считают самой важной вещью, которая произошла в отрасли в этом году....
...
Airtable
18-10-2020 09:35:59
Простая в использовании система управления реляционными базами данных...

НАШИ РЕКОМЕНДАЦИИ

Toyota Supra в 2021 году
Toyota Supra в 2021 году
Toyota Supra 2020 года не получит дооснащения, чтобы соответствовать увеличению мощности в 2021 году...
9 различных вариантов использования console log
9 различных вариантов использования console log
Каждый из нас использовал console.logдля отладки больше, чем нам хотелось бы признать....
Расслабление, снятие стресса и развитие сознания
Расслабление, снятие стресса и развитие сознания
Иногда в жизни бывают дни.......
Послушай других и сделай наооборот
Послушай других и сделай наооборот
Основатель Tesla и SpaceX воплотил в жизнь одну идею, противоречащую общепринятому мнению, и это помогло ему заработать миллиарды....
Красный флаг или работа не Вашей мечты.
Красный флаг или работа не Вашей мечты.
В последнее время развелось (были всегда) много организаций на рынке - которые надо обходить стороной....


ИНТЕРЕСНОЕ

Понимание карты и набора в JavaScript
Понимание карты и набора в JavaScript
Эта статья была изначально написана для DigitalOcean ....
Lazareth Wazuma от Феррари
Lazareth Wazuma от Феррари
Lazareth Wazuma V8F Quad – Engine By Ferrari...
20 самых важных секретов настоящих отношений
20 самых важных секретов настоящих отношений
Не простые отношения между женщинами и мужчинами...
Работа в Швеции
Работа в Швеции
Компании в Швеции переходят на 6-часовые рабочие дни и добиваются удивительных результатов...


ЛУЧШИЕ РЕЙТИНГИ

Набор массы
Набор массы
Базовые принципы для новичков
Ежедневные 15-минутные прогулки способны кардинально изменить ваше тело
Ежедневные 15-минутные прогулки способны кардинально изменить ваше тело
Всем известно, как положительно влияют на организм...
Правила для наращивания мышечной массы
Правила для наращивания мышечной массы
Зная интенсивность физических упражнений...
Раскачать грудь
Раскачать грудь
Обычно грудные растут хорошо у тех...

АКТУАЛЬНОЕ

Будущее уже с нами Galaxy Fold
CEO продвижение
Отношения с мужчинами
Раздевалка
Лишь плохие начальники ожидают от своих подчиненных постоянной занятости
Как научиться читать быстрее
Выбирай того, кто ежедневно пишет тебе «С добрым утром»
США скрывают правду о пришельцах
Свечение от ракеты SpaceX американцы приняли за НЛО
Путешествие из Австрии в Италию

ЧИТАЙТЕ ТАКЖЕ

18-10-2020 09:35:59 (120052)
Какую одежду носят манхэттенские модницы летом
Возможно эта новость тебе еще неизвестна
18-10-2020 09:35:59 (120050)
Время сгибаемых смартфонов еще не пришло
Эксперт по технологиям издания Mashable Стэн Шредер написал колонку...
18-10-2020 09:35:59 (120049)
Успешные стартапы, которые начинали как сторонние проекты
Apple, Facebook, Google, SpaceX ...
18-10-2020 09:35:59 (120051)
Надо стараться быть с теми, кто к нам хорошо относится
Маленький гимназист очень плохо учился...
18-10-2020 09:35:59 (120044)
Стопроцентная диета для похудения или питание наоборот
Сделай все наоборот....
18-10-2020 09:35:59 (120046)
Невероятная 12-месячная трансформацией тела
Звезда фитнеса из Сиднея Софи Аллен рассказывает о своей трансформации..