20+ консольных методов, держу пари, вы даже не можете назвать 10

Привет, кодеры, меня зовут Rubics, и сегодня я собираюсь пройти более 20 консольных методов. Бьюсь об заклад, вы не можете знать даже 10.

Они полезны?

Определенно, не все из них полезны все время, но да, знание их увеличивает ваши шансы решить веб-проблемы.

Возможно, вы знаете о методе console.log и, возможно, о некоторых других консольных стратегиях, таких как console.blunders и console.dir, однако есть действительно более 20 консольных стратегий, которые можно использовать с определенной целью. У каждой из этих стратегий есть свои варианты использования, и если вы используете правильный метод для каждого варианта использования, вы значительно повысите удовольствие от отладки.

Я решил разбить эту статью на четыре замечательных раздела.
1. Базовое ведение журнала
2. Ведение журнала производительности
3. Ведение журнала служебных программ
4. Ведение журнала формата

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

Основные методы ведения журнала

Для начала мы хотим поговорить примерно о пяти основных методах логирования.
1. log
2. отладка
3. информация
4. предупреждение
5. ошибка

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

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

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

Основной синтаксис

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

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

Проблемы с просмотром в реальном времени

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

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

Расширенное ведение журнала строк

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

В приведенном выше примере мы используем %s, %d, %f,и %o в качестве заполнители, в которых значения должны быть вставлены в вывод нашей консоли. Когда вы работаете с этими заполнителями, могут быть опубликованы следующие значения, переданные в подход журнала, в которых находятся значения заполнителей.
- %s для строковых заполнителей.
 – %d для целочисленных заполнителей.
- %f для десятичных заполнителей.
- %o для заполнителей элементов.
Теперь это довольно крутая функция, однако, без сомнения, я редко ею пользуюсь, потому что вместо этого я могу просто использовать теговые литералы шаблонов.

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

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

Методы форматирования журналов

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

Каталог

Подход dir может быть очень прямолинейным, поскольку он работает почти так же, как подход log, однако с одним исключением. Подход журнала будет выводить HTML-факторы как HTML, который можно просматривать в то же время, когда dir будет регистрировать всю партию, как если бы это был JSON. Этот метод, который HTML-факторы может регистрироваться так же, как элемент, при использовании каталога, что делает его чрезвычайно полезным для просмотра местоположений в элементе HTML.

Таблица

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

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

Группировка
Самый последний способ компоновки вывода консоли — это три стратегии организации.
1. group
2. groupcollapsed
3. groupEnd

Названия этих стратегий говорят сами за себя, и каждая из стратегий groupCollapsed начинает коллекцию с самым простым отличием в том, что метод groupCollapsed по умолчанию закрывает учреждение внутри консоли, даже если учреждение по умолчанию имеет учреждение открытое. Затем метод groupEnd закрывает современный институт.
Каждый журнал, который происходит в начале и остановке сбора, может быть размещен внутри этого учреждения. Давайте изучим пример.

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

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

Последующее учреждение консольных стратегий, о которых я должен говорить примерно, — это общие стратегии, ориентированные на производительность. Их можно разделить на группы.
1. Связано со временем
2. Связано с профилированием

Временная регистрация

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

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

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

Ведение журнала профилировщика

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

Это выпустит профилировщик для вашего браузера и сообщит о группе общих фактов, связанных с производительностью. Теперь, в зависимости от вашего браузера, этот факт размещается в единственной в своем роде области и отображается единственным в своем роде способом. Кроме того, это немодная характеристика, поэтому некоторые браузеры могут не поддерживать это или также обрабатывать это нестандартным образом. Из-за этого я обычно не рекомендую использовать эту технику, пока вы не узнаете, как она работает вместе с вашим браузером.
Наконец, прежде чем мы перейдем к следующему, я должен указать, что так же, как и в случае с полностью основанным на времени ведением журнала, вы можете использовать технику timeStamp, чтобы указать маркер для вашего профилировщика, чтобы вы могли видеть, сколько времени потребовалось, чтобы добраться до эта точка.

Способы ведения журнала утилит

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

Подтвердить

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

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

Очистить

Подсчет и сброс счетчика

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

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

Отследить

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

Заключение

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

О нас:

Подпишитесь на нас на medium, чтобы получить полное путешествие по теме, или подпишитесь на Facebook, Quora, LinkedIn или свяжитесь с сообществом >» на Facebook. Прочтите наши другие блоги.

Прочитайте 25 алгоритмов, которые вы должны знать: издание Rubics
Прочитайте: Хотите ли вы почувствовать структуры данных?: своего рода Дорожная карта
Читать: Поиск и сортировка
Читать: Давайте рисовать Дорожная карта для конкурентного кодирования
Читать Игра во времени и пространстве: давайте найдем сложность моего кода

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

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