Как очистить консоль в браузере

автор: admin
30.01.2024

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

В этой статье описаны функции консоли.

Содержимое:

Открытие консоли
- Открытие средства «Консоль»
- Открытие средства «Консоль» в ящике
- Открытие параметров консоли
- Открытие боковой панели консоли
- Отключение группирования сообщений
- Ведение журнала запросов XHR и выборки
- Сохранение сообщений при загрузке страницы
- Скрыть сетевые сообщения
- Фильтрация сообщений браузера
- Фильтрация по уровню журнала
- Фильтрация сообщений по URL-адресу
- Фильтрация сообщений из разных контекстов
- Фильтрация сообщений, не соответствующих шаблону регулярного выражения
- Повторное выполнение выражений из журнала
- Просмотр значения выражения в режиме реального времени с помощью динамических выражений
- Отключить страстную оценку
- Отключение автозаполнения из журнала
- Выбор контекста JavaScript
Открытие консоли

Консоль можно открыть как инструмент в верхней области или как инструмент в ящике.

Открытие средства «Консоль»

Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).

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

Открытие средства «Консоль» в ящике

Нажмите клавишу ESC. Или щелкните Настройка и управление средствами разработки ( . ), а затем выберите Показать панель консоли.

В нижней части окна Средства разработки появится окно «Панель» с открытым инструментом «Консоль «.

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

Открытие параметров консоли

Нажмите кнопку Параметры консоли ().

Открытие боковой панели консоли

Чтобы отобразить боковую панель, щелкните Показать боковую панель консоли (). Боковая панель помогает выполнять фильтрацию.

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

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

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

Чтобы отключить поведение группирования сообщений по умолчанию в консоли, нажмите кнопку Параметры консоли (), а затем установите флажок Рядом с пунктом Сгруппировать аналогично. Пример см. в разделах Log XHR и Fetch requests.

Ведение журнала запросов XHR и выборки

Чтобы записать все XMLHttpRequest запросы в консоль по Fetch мере каждого из них, нажмите кнопку Параметры консоли () и установите флажок рядом с полем Log XMLHttpRequests.

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

##### Old Figure 9 > How the logged `XMLHttpRequest` and `Fetch` requests look after ungrouping > ![How the logged XMLHttpRequest and Fetch requests look after ungrouping](./reference-images/console-xhr-fetch-all.png) —>

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

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

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

Действие по умолчанию для Microsoft Edge заключается в том, чтобы записывать сетевые сообщения в консоль. На следующем рисунке выбранное сообщение представляет код 429 состояния HTTP для .

Чтобы скрыть сетевые сообщения, выполните приведенные далее действия.
1. Нажмите кнопку Параметры консоли ().
2. Установите флажок рядом с пунктом Скрыть сеть.
Фильтрация сообщений

Существует несколько способов фильтрации сообщений в консоли.

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

Чтобы отобразить только сообщения, поступающие из JavaScript веб-страницы, откройте боковую панель консоли и щелкните #пользовательские сообщения.

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

DevTools назначает каждому console.* методу один из четырех уровней серьезности:

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

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

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

Чтобы использовать уровень журнала для фильтрации, откройте боковую панель консоли и выберите Ошибки, Предупреждения, Сведения или Подробные сведения.

Фильтрация сообщений по URL-адресу

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

Чтобы скрыть сообщения из URL-адреса, введите -url: . Это отрицательный фильтр URL-адресов.

Чтобы отобразить сообщения из одного URL-адреса, выполните приведенные далее действия.
1. Откройте боковую панель консоли.
2. Разверните раздел #пользовательские сообщения .
3. Выберите URL-адрес скрипта, который содержит сообщения, на которые нужно сосредоточиться.
Фильтрация сообщений из разных контекстов

Предположим, что у вас есть объявление (объявление) на веб-странице. Объявление встроено в и создает много сообщений в консоли. Так как объявление работает в другом контексте JavaScript, один из способов скрыть сообщения — нажать кнопку Параметры консоли () и установить флажок рядом с пунктом Только выбранный контекст.

Фильтрация сообщений, не соответствующих шаблону регулярного выражения

Введите регулярное выражение, /[gm][ta][mi]/ например, в текстовое поле Фильтр , чтобы отфильтровать сообщения, которые не соответствуют шаблону. DevTools проверяет, найден ли шаблон в тексте сообщения или в скрипте, который вызвал запись сообщения в журнал.

Запуск JavaScript

В этом разделе содержатся функции, связанные с запуском JavaScript в консоли. Практическое пошаговое руководство см. в статье Запуск JavaScript.

Повторное выполнение выражений из журнала

Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы циклически просмотреть журнал выражений JavaScript, которые вы выполнили ранее в консоли. Нажмите клавишу ВВОД , чтобы снова запустить это выражение.

Просмотр значения выражения в режиме реального времени с помощью динамических выражений

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

Отключить страстную оценку

При вводе выражений JavaScript в консоли отображается предварительный просмотр возвращаемого значения. Чтобы отключить предварительный просмотр возвращаемых значений, выполните следующие действия.
1. Нажмите кнопку Параметры консоли ().
2. Снимите флажок рядом с кнопкой Охотное вычисление.
Отключение автозаполнения из журнала

При вводе выражения во всплывающем окне автозаполнения консоли отображаются выражения, которые вы выполнили ранее. Выражения предварительно заполняются символом > . Чтобы остановить отображение выражений из журнала, нажмите кнопку Параметры консоли (), а затем снимите флажок Рядом с флажком Автозаполнение из журнала .

На следующем рисунке и document.querySelector(‘img’) являются выражениями, document.querySelector(‘a’) которые были оценены ранее.

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

По умолчанию раскрывающийся список Контекст JavaScript установлен вверху, который представляет контекст браузера веб-страницы main.

Предположим, у вас есть объявление на веб-странице, внедренное в , и вы хотите запустить JavaScript, чтобы настроить DOM объявления. Щелкните раскрывающийся список Контекст JavaScript и выберите контекст просмотра объявления:

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

Чтобы очистить консоль, используйте любой из следующих подходов:
- Щелкните Очистить консоль ().
- Щелкните сообщение правой кнопкой мыши и выберите Команду Очистить консоль.
- Введите clear() в консоли и нажмите клавишу ВВОД.
- Вызов из console.clear() JavaScript веб-страницы.
- Нажмите клавиши CTRL+L , пока консоль находится в фокусе.
См. также
- Журнал сообщений в средстве «Консоль» — фильтрация сообщений журнала, таких как «Сведения», «Предупреждения» и «Ошибки» в консоли.
- Начало работы с запуском JavaScript в консоли . Инструкции по выполнению инструкций и выражений JavaScript в консоли.
- Справочник по API объектов консоли . Функции и выражения, которые можно ввести в консоли для записи сообщений в консоль, например console.log() .
- Служебные функции и селекторы консольных инструментов — удобные функции, которые можно вводить в средстве консоли , например monitorEvents() .
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

clear()

Не стандартно: Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Содержимое консоли заменяется на информационное сообщение, которое может быть следующим: «Консоль очищена».

Примечание для Google Chrome, от функции console.clear() не будет никакого эффекта, если у пользователя установлена надстройка «Preserve log upon navigation» в настройках.

Синтаксис
```
console.clear();
```
Спецификация

Specification

Console Standard
# clear

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также
- Opera Dragonfly documentation: Console
- MSDN: Using the F12 Tools Console to View Errors and Status
- Chrome Developer Tools: Using the Console
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 16 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support
- Product help
- Report an issue
Our communities

Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Консоль разработчика Google Chrome: десять неочевидных полезностей

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

1. Выбор элементов DOM

Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector().

Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1] дадут доступ, соответственно, к первому и второму элементу полученного массива.

Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор

Вам приходилось ловить себя на мысли о том, что хорошо было бы править текст отлаживаемой веб-страницы прямо в браузере? Если да – значит вам понравится команда, показанная ниже.
```
document.body.contentEditable=true
```
После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.

3. Поиск обработчиков событий, привязанных к элементу

В процессе отладки может понадобиться найти обработчики событий, привязанные к элементам. С помощью консоли сделать это очень просто. Достаточно воспользоваться такой командой:
```
getEventListeners($(‘selector’))
```
В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.

Обработчики событий

Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:
```
getEventListeners($(‘selector’)).eventName[0].listener
```
Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:
```
getEventListeners($(‘#firstName’)).click[0].listener
```
В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName.

4. Мониторинг событий

Если вы хотите понаблюдать за возникновением событий, привязанных к конкретному элементу DOM, консоль в этом поможет. Вот несколько команд, которые можно использовать для мониторинга событий.
5. Измерение времени выполнения фрагмента кода

В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:
```
console.time('myTime'); //Запускает таймер с меткой myTime console.timeEnd('myTime'); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms
```
Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:
```
console.time('myTime'); // Запускает таймер с меткой myTime for(var i=0; i < 100000; i++)< 2+4+5; >console.timeEnd('mytime'); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms
```
6. Вывод значений переменных в виде таблиц

Предположим, у нас имеется такой массив объектов:
```
var myArray=[,,,]
```
Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:
```
console.table(variableName)
```
Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

Вывод массива объектов в виде таблицы

7. Просмотр кода элемента

Быстро перейти к коду элемента из консоли можно с помощью следующих команд:
8. Вывод списка свойств элемента

Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:
```
dir($(‘selector’))
```
Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.

9. Вызов последнего полученного результата

Консоль можно использовать как калькулятор, это, вероятно, знают все. Но вот то, что она имеет встроенные средства, позволяющие использовать в командах результаты предыдущих вычислений, известно немногим. С помощью конструкции $_ можно извлечь из памяти результат предыдущего выражения. Вот как это выглядит:
```
2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления
```
10. Очистка консоли и памяти

Если нужно очистить консоль и память, воспользуйтесь такой вот простой командой:
```
clear()
```
После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.

11, 12, 13, 14…

Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их намного больше. Уверен, вы сможете расширить мой список собственными находками.

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

А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! 🙂
- JavaScript
- HTML
- разработка
- Google Chrome
- консоль разработчика
- Блог компании RUVDS.com
- Веб-разработка
- JavaScript
- Google Chrome
- HTML
Как удалить историю консоли за все время в браузере Chrome?

Здравствуйте! Я думаю многие знают, что в консоли с помощью стрелок «вверх» и «вниз» на клавише доступна история действий. Как это очистить?
- Вопрос задан более года назад
- 252 просмотра
Комментировать

Решения вопроса 0

Ответы на вопрос 1

chromium — правая кнопка в консоли, пункт меняю clear history
firefox — выполнить функцию clearHistory()

Ответ написан более года назад

Комментировать

Нравится 2 Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ
- Google Chrome
- +2 ещё
Есть расширение для временной загрузки видео?
- 1 подписчик
- 26 янв.
- 52 просмотра
Похожие публикации:

Добавить комментарий Отменить ответ