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

Кейси Баски

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

Сообщения в консоли.

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

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

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

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

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

    Это руководство слева и демо справа.

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

    DevTools открывается справа от демо-версии.

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

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

    DevTools отстыкованы в отдельном окне: DevTools открепился в отдельном окне.

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

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

  1. Нажмите кнопку «Информация журнала» в демо-версии. Hello, Console! регистрируется в консоли.

    Консоль после нажатия кнопки «Информация журнала».

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

    DevTools открывает панель «Источники» после нажатия 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 страницы пытается получить несуществующий файл.

    Ошибка 404 в консоли.

  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 . Это ошибка.

    Фильтрация любого сообщения, не содержащего `Dave`.

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

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

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

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

    Фильтрация любого сообщения, не соответствующего шаблону `/^[AH]/`.

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

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

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

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

    Боковая панель.

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

    Просмотр источника сообщений в боковой панели.

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

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

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

    Фильтрация сообщений браузера.

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

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

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

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

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

    Вкладка **Консоль** в ящике.

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

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