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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

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

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

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

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

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

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

Консоль.

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

Команда показа панели Консоли.

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

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

Показать ящик консоли.

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

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

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

Команда для отображения вкладки «Консоль» в ящике.

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

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

Настройки консоли.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стек следов.

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

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

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

Асинхронная трассировка стека.

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

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

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

Показать еще N кадров.

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

Автоматически добавлять известные сторонние скрипты в список игнорирования.

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

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

Регистрация запросов XMLHttpRequest и Fetch.

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

Как зарегистрированные запросы XMLHttpRequest и Fetch выглядят после разгруппировки.

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

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

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

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

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

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

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

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

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

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

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

Покажите ошибки CORS в консоли.

Если консоль настроена на отображение ошибок 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-адреса.

URL-фильтр.

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

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

Фильтр отрицательных URL-адресов. DevTools скрывает все сообщения, соответствующие указанному URL-адресу.

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

Просмотр сообщений из определенного скрипта.

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

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

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

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

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

Фильтрация любых сообщений, не соответствующих /[gm][ta][mi]/.

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

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

Запустить JavaScript

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

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

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

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

Варианты копирования.

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

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

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

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

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

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

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

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

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

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

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

Всплывающее окно автозаполнения, показывающее выражения из истории.

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

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

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

Раскрывающийся список «Контекст JavaScript».

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

Выбор другого контекста JavaScript.

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

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

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

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

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

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

Отображение свойств объекта.

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

Отображение унаследованных свойств.

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

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

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

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

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

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

Частная собственность экземпляра класса.

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

Автозаполнение частной собственности.

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

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

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

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

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

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

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

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

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

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

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

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