Записывать сообщения в консоли

Kayce Basques

В этом интерактивном руководстве показано, как регистрировать и фильтровать сообщения в консоли Chrome DevTools .

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

Настройте демо и DevTools

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

1. Откройте демо .

2. Необязательно: Переместите демо в отдельное окно. В этом примере учебник находится слева, а демо — справа.

   

3. Сфокусируйтесь на демо и нажмите Control + Shift + J или Command + Option + J (Mac), чтобы открыть DevTools. По умолчанию DevTools открывается справа от демо.

   

4. Дополнительно: закрепите DevTools в нижней части окна или открепите его в отдельном окне .

   DevTools закреплен в нижней части демо:

   DevTools откреплен в отдельном окне:

Просмотр сообщений, зарегистрированных с помощью JavaScript

Большинство сообщений, которые вы видите в Консоли, исходят от веб-разработчиков, которые написали JavaScript страницы. Цель этого раздела — познакомить вас с различными типами сообщений, которые вы, скорее всего, увидите в Консоли, и объяснить, как вы можете самостоятельно регистрировать каждый тип сообщений из вашего собственного JavaScript.

1. Нажмите кнопку Log Info в демо. Hello, Console! регистрируется в Console.

   

2. Рядом с сообщением Hello, Console! в Console нажмите log.js:2 . Откроется панель Sources и выделится строка кода, которая привела к записи сообщения в Console.

   

   Сообщение было зарегистрировано, когда JavaScript страницы вызвал console.log('Hello, Console!') .

3. Вернитесь в консоль , используя любой из следующих рабочих процессов:

   • Нажмите вкладку Консоль .
   • Нажимайте Control + [ или Command + [ (Mac), пока консоль не окажется в фокусе.
   • Откройте меню команд , начните вводить Console , выберите команду Показать панель консоли , а затем нажмите Enter .

4. Нажмите кнопку Log Warning в демо. Abandon Hope All Ye Who Enter записывается в консоль.

   

   Сообщения, отформатированные подобным образом, являются предупреждениями.

5. Необязательно: Нажмите log.js:12, чтобы просмотреть код, который привел к форматированию сообщения таким образом, а затем вернитесь в Console , когда закончите. Делайте это всякий раз, когда хотите просмотреть код, который привел к регистрации сообщения определенным образом.

6. Нажмите « Развернуть». значок перед Abandon Hope All Ye Who Enter . DevTools показывает трассировку стека, ведущую к вызову.

   

   Трассировка стека сообщает вам, что была вызвана функция с именем logWarning , которая в свою очередь вызвала функцию с именем quoteDante . Другими словами, вызов, который произошел первым, находится в нижней части трассировки стека. Вы можете регистрировать трассировки стека в любое время, вызвав console.trace() .

7. Нажмите Log Error . Регистрируется следующее сообщение об ошибке: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Нажмите Log Table . Таблица об известных артистах будет зарегистрирована в Консоли.

   

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

9. Нажмите Log Group . Имена 4 знаменитых черепах, борющихся с преступностью, сгруппированы под заголовком Adolescent Irradiated Espionage Tortoises .

   

10. Нажмите Log Custom . Сообщение с красной рамкой и синим фоном регистрируется в консоли.

    

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

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

Просмотр сообщений, зарегистрированных браузером

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

1. Нажмите Причина 404. Браузер регистрирует сетевую ошибку 404 , поскольку JavaScript страницы пытается получить файл, который не существует.

   

2. Нажмите Причина ошибки . Браузер регистрирует неперехваченную ошибку TypeError , поскольку JavaScript пытается обновить узел DOM, который не существует.

   

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

   

4. Нажмите Причина Нарушение . Страница перестает отвечать на запросы на несколько секунд, а затем браузер регистрирует сообщение [Violation] 'click' handler took 3000ms to Console. Точная продолжительность может отличаться.

   

Фильтровать сообщения

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

Фильтр по уровню журнала

Каждому методу console.* назначается уровень серьезности: Verbose , Info , Warning или Error . Например, console.log() — это сообщение уровня Info , тогда как console.error() — это сообщение уровня Error .

Для фильтрации по уровню журнала:

1. Нажмите раскрывающийся список Уровни журнала и отключите Ошибки . Уровень отключается, когда рядом с ним больше нет галочки. Сообщения уровня Error исчезают.

   

2. Снова щелкните раскрывающийся список Уровни журнала и снова включите Ошибки . Сообщения уровня Error снова появятся.

Фильтр по тексту

Если вы хотите просматривать только те сообщения, которые содержат точную строку, введите эту строку в текстовое поле «Фильтр» .

1. Введите Dave в текстовое поле Фильтр . Все сообщения, не содержащие строку Dave , скрыты. Вы также можете увидеть метку Adolescent Irradiated Espionage Tortoises . Это ошибка.

   

2. Удалить Dave из текстового поля Фильтр . Все сообщения появятся снова.

Фильтр по регулярному выражению

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

1. Введите /^[AH]/ в текстовое поле Фильтр . Введите этот шаблон в RegExr для пояснения того, что он делает.

   

2. Удалить /^[AH]/ из текстового поля Фильтр . Все сообщения снова видны.

Фильтр по источнику сообщения

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

1. Нажмите «Показать боковую панель консоли». .

   

2. Нажмите « Развернуть». значок рядом с 12 сообщениями . Боковая панель показывает список URL-адресов, которые вызвали регистрацию сообщений. Например, log.js вызвал 11 сообщений.

   

Фильтр по сообщениям пользователей

Ранее, когда вы нажимали Log Info , скрипт с именем console.log('Hello, Console!') для регистрации сообщения в Console. Сообщения, зарегистрированные из JavaScript, подобные этому, называются пользовательскими сообщениями . Напротив, когда вы нажимали Cause 404 , браузер регистрировал сообщение уровня Error , в котором говорилось, что запрошенный ресурс не найден. Такие сообщения считаются сообщениями браузера . Вы можете использовать боковую панель , чтобы отфильтровывать сообщения браузера и показывать только пользовательские сообщения.

1. Нажмите 9 Сообщения пользователя . Сообщения браузера скрыты.

   

2. Нажмите «12 сообщений» , чтобы снова отобразить все сообщения.

Используйте консоль вместе с любой другой панелью

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

1. Перейдите на вкладку «Элементы» .

2. Нажмите Escape . Откроется вкладка Console в Drawer . Она содержит все функции Console , которые вы использовали в этом руководстве.

   

Следующие шаги

Поздравляем, вы завершили обучение. Нажмите Dispense Trophy , чтобы получить свой трофей.

• Дополнительные сведения о функциях и рабочих процессах, связанных с пользовательским интерфейсом консоли , см. в разделе Справочник по консоли .
• См. Справочник по API консоли, чтобы узнать больше обо всех методах console , которые были продемонстрированы в разделе Просмотр сообщений, зарегистрированных в JavaScript, а также изучить другие методы console , которые не были рассмотрены в этом руководстве.
• Ознакомьтесь с разделом «Начало работы» , чтобы узнать, что еще можно сделать с помощью DevTools.
• Подробнее обо всех методах форматирования и стилизации console см. в разделе Форматирование и стилизация сообщений в консоли .