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

Kayce Basques

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

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

Настройте демо-версию и инструменты разработчика.

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

1. Откройте демоверсию .

2. Дополнительно: переместите демонстрацию в отдельное окно. В этом примере обучающий материал находится слева, а демонстрация — справа.

   

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

   

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

   Инструменты разработчика закреплены внизу демонстрационного окна:

   Инструменты разработчика открепляются в отдельном окне:

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

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

1. Нажмите кнопку «Log Info» в демонстрационной версии. В консоль будет записано сообщение 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 . Инструменты разработчика показывают трассировку стека, предшествующую вызову.

   

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

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

   

8. Нажмите «Записать таблицу» . В консоль будет записана таблица с информацией об известных артистах.

   

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

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

   

10. Нажмите «Записать в журнал пользовательские настройки» . В консоль будет записано сообщение с красной рамкой и синим фоном.

    

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

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

Просмотреть сообщения, зарегистрированные браузером.

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

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

   

2. Click Cause Error . Браузер регистрирует необработанную TypeError , поскольку JavaScript пытается обновить несуществующий узел DOM.

   

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

   

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

   

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

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

Важный момент: консоль отфильтровывает только выходные сообщения, все введенные вами данные остаются там.

Фильтрация по уровню логирования

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

Примечание: Полный список методов console.* и уровней серьезности см. в справочнике по API консоли .

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

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

   

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

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

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

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

1. Введите Dave в поле «Фильтр» . Все сообщения, не содержащие строку Dave , будут скрыты.

   

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

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

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

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

   

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

1. Нажмите вкладку «Элементы» .

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

   

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

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

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