Справочник по функциям консоли

Kayce Basques

Sofia Emelianova

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

Если вы ищете ссылку на API для таких функций, как console.log() см. «Справочник по API консоли» . Сведения о таких функциях, как monitorEvents() см. в разделе «Справочник по API консольных утилит» .

Откройте консоль

Вы можете открыть Консоль как панель или как вкладку в ящике .

Откройте панель консоли

Нажмите Control + Shift + J или Command + Option + J (Mac).

Чтобы открыть консоль из командного меню , начните вводить Console , а затем выполните команду «Показать консоль» , рядом с которой есть значок панели .

Откройте консоль в ящике

Нажмите Escape или выберите «Настроить и контролировать инструменты разработчика». а затем выберите «Показать ящик консоли» .

В нижней части окна DevTools появится ящик с открытой вкладкой «Консоль» .

Чтобы открыть вкладку «Консоль» в меню команд , начните вводить Console , а затем выполните команду «Показать консоль» , рядом с которой есть значок «Ящик» .

Открыть настройки консоли

Нажмите Настройки консоли в правом верхнем углу консоли .

Ссылки ниже объясняют каждую настройку:

• Скрыть сеть
• Сохранить журнал
• Только выбранный контекст
• Группируйте похожие сообщения в консоли
• Показать ошибки CORS в консоли
• Записывать XMLHttpRequests
• Стремительная оценка
• Автозаполнение из истории

Откройте боковую панель консоли

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

Просмотр сообщений

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

Отключить группировку сообщений

Откройте настройки консоли и отключите группу, аналогичную отключению группировки сообщений консоли по умолчанию. Пример см. в разделе «Запросы журнала XHR и выборки» .

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

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

• console.* вызывает условные точки останова с оранжевым знаком вопроса ?
• Сообщения Logpoint с двумя розовыми точками ..

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

Просмотр трассировок стека

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

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

Просмотр причин ошибок в трассировках стека

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

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

Просмотр трассировок асинхронного стека

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

В этом случае трассировка стека показывает «полную историю» асинхронной операции.

Показывать известные сторонние кадры в трассировках стека

Если карты источников содержат поле ignoreList , по умолчанию Консоль скрывает от трассировки стека сторонние кадры из источников, созданных сборщиками (например, веб-пакетом) или платформами (например, Angular).

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

Чтобы всегда просматривать полную трассировку стека, отключите параметр Настройки > Список игнорирования > Автоматически добавлять известные сторонние скрипты для настройки списка игнорирования .

Записывать запросы XHR и Fetch

Откройте настройки консоли и включите функцию Log XMLHttpRequests , чтобы регистрировать все запросы XMLHttpRequest и Fetch на консоли по мере их возникновения.

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

Сохранять сообщения при загрузке страниц

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

Скрыть сетевые сообщения

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

Чтобы скрыть сетевые сообщения:

1. Откройте настройки консоли .
2. Установите флажок Скрыть сеть .

Показать или скрыть ошибки CORS

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

Чтобы показать или скрыть ошибки CORS:

1. Откройте настройки консоли .
2. Установите или снимите флажок «Показывать ошибки CORS в консоли» .

Если консоль настроена на отображение ошибок CORS и вы столкнулись с ними, вы можете нажать следующие кнопки рядом с ошибками:

• чтобы открыть запрос с TypeError , связанной с CORS, на панели «Сеть» .
• чтобы получить потенциальное решение на вкладке «Проблемы» .

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

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

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

Откройте боковую панель консоли и нажмите «Сообщения пользователя» , чтобы отображались только сообщения, полученные из JavaScript страницы.

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

DevTools назначает большинству уровней серьезности методов console.* .

Существует четыре уровня:

• Verbose
• Info
• Warning
• Error

Например, console.log() находится в группе Info , а console.error() — в группе Error . В справочнике по API консоли описан уровень серьезности каждого применимого метода.

Каждое сообщение, которое браузер регистрирует в консоли, также имеет уровень серьезности. Вы можете скрыть сообщения любого уровня, которые вас не интересуют. Например, если вас интересуют только сообщения Error , вы можете скрыть остальные 3 группы.

Щелкните раскрывающийся список «Уровни журнала» , чтобы включить или отключить Verbose сообщения, Info , Warning или Error .

Вы также можете фильтровать по уровню журнала по откройте боковую панель консоли и выберите «Ошибки» , «Предупреждения» , «Информация» или «Подробно» .

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

Введите url: и URL-адрес, чтобы просматривать только сообщения, полученные с этого URL-адреса. После ввода url: DevTools отображает все соответствующие URL-адреса.

Домены тоже работают. Например, если https://example.com/a.js и https://example.com/b.js регистрируют сообщения, url:https://example.com позволяет вам сосредоточиться на сообщениях из этих двух сценарии.

Чтобы скрыть все сообщения с указанного URL-адреса, введите -url: и URL-адрес, например https://b.wal.co . Это фильтр отрицательных URL-адресов.

Вы также можете отображать сообщения с одного URL-адреса, открыв боковую панель консоли , развернув раздел «Сообщения пользователя» , а затем щелкнув URL-адрес сценария, содержащего сообщения, на которых вы хотите сосредоточиться.

Фильтрация сообщений из разных контекстов

Предположим, у вас на странице есть реклама. Объявление встроено в <iframe> и генерирует множество сообщений в вашей консоли. Поскольку это объявление находится в другом контексте JavaScript , один из способов скрыть его сообщения — открыть настройки консоли и установить флажок «Только выбранный контекст» .

Отфильтровывать сообщения, которые не соответствуют шаблону регулярного выражения.

Введите регулярное выражение, например /[foo]\s[bar]/ в текстовое поле «Фильтр», чтобы отфильтровать любые сообщения, не соответствующие этому шаблону. Пробелы не поддерживаются, вместо них используйте \s . DevTools проверяет, обнаружен ли шаблон в тексте сообщения или скрипте, вызвавшем регистрацию сообщения.

Например, следующая команда отфильтровывает все сообщения, не соответствующие /[gm][ta][mi]/ .

Поиск текста в журналах

Для поиска текста в сообщениях журнала:

1. Чтобы открыть встроенную панель поиска, нажмите Command + F (Mac) или Ctrl + F (Windows, Linux).
2. В строке введите свой запрос. В этом примере запрос является legacy . По желанию вы можете:
   • Нажмите Укажите регистр, чтобы сделать запрос чувствительным к регистру.
   • Нажмите Используйте регулярное выражение для поиска с использованием выражения RegEx.
3. Нажмите Enter . Чтобы перейти к предыдущему или следующему результату поиска, нажмите кнопку вверх или вниз.

Запустить JavaScript

Этот раздел содержит функции, связанные с запуском JavaScript в консоли. См. практическое руководство в разделе «Запуск JavaScript» .

Параметры копирования строк

По умолчанию консоль выводит строки как допустимые литералы JavaScript. Щелкните правой кнопкой мыши вывод и выберите один из трех вариантов копирования:

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

Повторить выражения из истории

Нажмите клавишу со стрелкой вверх, чтобы просмотреть историю выражений JavaScript, которые вы ранее запускали в консоли. Нажмите Enter , чтобы снова запустить это выражение.

Следите за значением выражения в режиме реального времени с помощью Live Expressions.

Если вы обнаружите, что постоянно вводите одно и то же выражение JavaScript в консоли, возможно, вам будет проще создать Live Expression . Используя Live Expressions , вы вводите выражение один раз, а затем закрепляете его в верхней части консоли. Значение выражения обновляется практически в реальном времени. См. раздел Просмотр значений выражений JavaScript в режиме реального времени с помощью живых выражений .

Отключить нетерпеливую оценку

Когда вы вводите выражения JavaScript в консоли, Eager Evaluation отображает предварительный просмотр возвращаемого значения этого выражения. Откройте настройки консоли и отключите флажок «Стремительная оценка», чтобы отключить предварительный просмотр возвращаемого значения.

Активация триггера пользователя с оценкой

Активация пользователя — это состояние сеанса просмотра, которое зависит от действий пользователя. «Активное» состояние означает, что пользователь в данный момент взаимодействует со страницей или взаимодействовал с момента загрузки страницы.

Чтобы инициировать активацию пользователя при любой оценке, откройте «Настройки консоли» и проверьте Рассматривайте оценку кода как действие пользователя .

Отключить автозаполнение из истории

Когда вы вводите выражение, во всплывающем окне автозаполнения консоли отображаются выражения, которые вы запускали ранее. Эти выражения начинаются с символа > . В следующем примере DevTools ранее оценил document.querySelector('a') и document.querySelector('img') .

Откройте настройки консоли и отключите флажок «Автозаполнение из истории», чтобы прекратить отображение выражений из вашей истории.

Выберите контекст JavaScript

По умолчанию в раскрывающемся списке «Контекст JavaScript» установлено значение «top» , которое представляет контекст просмотра основного документа.

Предположим, на вашей странице есть реклама, встроенная в <iframe> . Вы хотите запустить JavaScript, чтобы настроить DOM объявления. Для этого сначала необходимо выбрать контекст просмотра объявления в раскрывающемся списке «Контекст JavaScript» .

Проверка свойств объекта

Консоль может отображать интерактивный список свойств указанного вами объекта JavaScript.

Чтобы просмотреть список, введите имя объекта в консоль и нажмите Enter .

Чтобы проверить свойства объектов DOM, выполните действия, описанные в разделе Просмотр свойств объектов DOM .

Выявите собственные и унаследованные свойства

Консоль сначала сортирует собственные свойства объекта и выделяет их жирным шрифтом.

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

Оценка пользовательских средств доступа

По умолчанию DevTools не оценивает созданные вами средства доступа. Чтобы оценить пользовательский метод доступа к объекту, нажмите (...) .

Выделите перечислимые и неперечислимые свойства

Перечислимые свойства имеют яркий цвет. Неперечислимые свойства отключены. Перечисляемые свойства можно перебирать с помощью цикла for … in или метода Object.keys() .

Обнаружение частных свойств экземпляров классов

Консоль обозначает частные свойства экземпляров классов префиксом # .

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

Проверьте внутренние свойства JavaScript

Заимствовав нотацию ECMAScript , консоль заключает некоторые внутренние свойства JavaScript в двойные квадратные скобки. Вы не можете взаимодействовать с такими свойствами в своем коде. Тем не менее, было бы полезно их проверить.

Вы можете увидеть следующие внутренние свойства разных объектов:

• Любой объект имеет [[Prototype]] .
• Примитивные оболочки имеют свойство [[PrimitiveValue]] .
• Объекты ArrayBuffer имеют следующие свойства:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• В дополнение к свойствам, специфичным для ArrayBuffer , объекты WebAssembly.Memory имеют свойство [[WebAssemblyMemory]] .
• Коллекции с ключами (карты и наборы) имеют свойство [[Entries]] , которое содержит записи с ключами.
• Объекты Promise имеют следующие свойства:
  • [[PromiseState]] : ожидается, выполнено или отклонено.
  • [[PromiseResult]] : undefined , если ожидается, <value> , если выполнено, <reason> если отклонено
• Proxy объекты имеют следующие свойства: объект [[Handler]] , объект [[Target]] и [[isRevoked]] (выключен или нет).

Проверка функций

В JavaScript функции также являются объектами со свойствами. Однако если вы введете имя функции в консоль , DevTools вызовет ее вместо отображения ее свойств.

Чтобы просмотреть свойства функции, внутренние для JavaScript, используйте команду console.dir() .

Функции имеют следующие свойства:

• [[FunctionLocation]] . Ссылка на строку с определением функции в исходном файле.
• [[Scopes]] . Перечисляет значения и выражения, к которым функция имеет доступ. Чтобы проверить области функций во время отладки, см . раздел Просмотр и редактирование локальных, замыкающих и глобальных свойств .
• Связанные функции обладают следующими свойствами:
  • [[TargetFunction]] . Цель метода bind() .
  • [[BoundThis]] . Ценность this .
  • [[BoundArgs]] . Массив аргументов функции.
• Функции-генераторы отмечены свойством [[IsGenerator]]: true .
• Генераторы возвращают объекты итераторов и имеют следующие свойства:
  • [[GeneratorLocation]] . Ссылка на строку с определением генератора в исходном файле.
  • [[GeneratorState]] : suspended , closed или running.
  • [[GeneratorFunction]] . Генератор, возвративший объект.
  • [[GeneratorReceiver]] . Объект, который получает значение.

Очистить консоль

Для очистки консоли можно использовать любой из следующих рабочих процессов:

• Нажмите «Очистить консоль». .
• Щелкните сообщение правой кнопкой мыши и выберите «Очистить консоль» .
• clear() в консоли и нажмите Enter .
• Вызовите console.clear() из JavaScript вашей веб-страницы.
• Нажмите Control + L, пока консоль находится в фокусе.