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

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. Нажмите кнопку «Информация журнала» в демо-версии. Hello, Console! регистрируется в консоли.

   

2. Рядом с надписью Hello, Console! сообщение в консоли , нажмите log.js:2 . Откроется панель «Источники» и выделится строка кода, которая привела к регистрации сообщения в консоли.

   

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

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

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

4. Нажмите кнопку «Журнал предупреждения» в демо-версии. Abandon Hope All Ye Who Enter входят в консоль.

   

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

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

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

   

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

7. Нажмите «Ошибка журнала» . Записывается следующее сообщение об ошибке: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Нажмите Таблица журнала . Таблица об известных художниках записывается в Консоль.

   

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

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

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

На некоторых страницах вы увидите, что консоль переполнена сообщениями. 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 сообщений.

   

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

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

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

   

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

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

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

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

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

   

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

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

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