Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:
- в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
- оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.
В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.
- Вывод в консоль Ошибки и предупреждения Проверки Фильтрация вывода в консоли Группирование вывода Замена строк и их форматирование Представление DOM-элементов как JavaScript-объекты Стилизация вывода консоли с помощью CSS Измерение временных затрат Корреляция с панелью Timeline Создание точек останова
Базовые операции
Открытие консоли
Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.
Для того, чтобы открыть вкладку Console вы можете:
- использовать хоткей Command - Option - J (Mac) или Control - Shift - J (Windows/Linux);
- выбрать пункт меню View > Developer > JavaScript Console.
Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.
Очистка консоли
Для очистки консоли:
- через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
- Используйте хоткеи ⌘K или ⌃L (Mac) Control - L (Windows и Linux).
По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).
Настройки консоли
Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:
- Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
- Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.
Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.
Использование API консоли
Console API — набор методов, доступных из объекта console, объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.
Вывод в консоль
Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:
var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Количество дочерних элементов: " + a.childNodes.length);
Вместо того, чтобы конкатенировать параметры функции с помощью оператора + (как показано выше), вы можете ввести каждый параметр друг за другом через запятую и их значения будут выведены в одну строку, разделённые пробелом.
console.log("Количество дочерних элементов: ", a.childNodes.length, "; текущее время: ", Date.now() );
Ошибки и предупреждения
Метод console.error() выводит красную иконку рядом с сообщением красного цвета.
function connectToServer() {
console.error("Ошибка: %s (%i)", "Сервер не отвечает",500);
}
connectToServer();
Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.
if(a.childNodes.length < 3 ) {
console.warn('Внимание! Слишком мало дочерних элементов (%d)', a.childNodes.length);
}
Проверки
Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false. К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.
console.assert(list.childNodes.length < 500, "Количество дочерних элементов > 500");
Фильтрация вывода в консоли
Вы можете быстро фильтровать сообщения в консоли по их типу (уровню) — ошибки, предупреждения и стандартный лог — выбрав один из доступных опций внизу консоли:
Возможные фильтры:
- All — без фильтрации.
- Errors — сообщения console.error().
- Warnings — сообщения console.warn().
- Logs — сообщения console.log(), console.info() и console.debug().
- Debug — сообщения console.timeEnd() и остальных функций консольного вывода.
Группирование вывода
Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().
var user = "Вася Пупкин", authenticated = false;
console.group("Этап аутентификации");
console.log("Аутентификация пользователя '%s'", user);
// Код авторизации… if (!authenticated) {
console.log("Пользователь '%s' не был аутентифицирован.", user)
}
console.groupEnd();
Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.
var user = "Вася Пупкин", authenticated = true, authorized = true;
// Внешняя группа console.group("Аутентификация пользователя '%s'", user);
if (authenticated) {
console.log("Пользователь '%s' был аутентифицирован.", user)
// Начало вложенной группы console.group("Авторизация пользователя '%s'", user);
if (authorized) {
console.log("Пользователь '%s' был авторизован.", user)
}
// Конец вложенной группы console.groupEnd();
}
// Конец внешней группы console.groupEnd();
console.log("Обычный вывод без групп.");
Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group():
console.groupCollapsed("Аутентификация пользователя '%s'", user);
if (authenticated) {
//… }
Замена строк и их форматирование
Первый параметр, передаваемый в любой метод консоли (например, log() или error()), может содержать модификаторы форматирования. Модификатор вывода состоит из символа %, сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.
В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.
console.log("%s купил %d бочонков мёда", "Саша", "100");
Результатом будет «Саша купил 100 бочонков мёда».
Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:
Модификатор форматированияОписание%sФорматирует значение как строку.%d или %iФорматирует значение как целое число (decimal и integer).%fФорматирует объект как число с плавающей точкой.%oФорматирует значение как DOM-элемент (также как в панели Elements).%OФорматирует значение как JavaScript-объект.%cПрименяет переданные в качестве второго аргумента CSS-стили к выводимой строке.
В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.
console.log("Количество дочерних элементов: %d; текущее время: %f", a.childNodes.length, Date.now() );
Представление DOM-элементов как JavaScript-объекты
По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:
console.log(document.body.firstElementChild);
Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir():
console.dir(document.body.firstElementChild);
Точно также вы можете использовать модификатор вывода %0 в методе console.log():
console.log("%O", document.body.firstElementChild);
Стилизация вывода консоли с помощью CSS
Можно использовать модификатор %c, чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.
console.log("%cЭта надпись будет отформатирована крупным голубым текстом", "color: blue; font-size: x-large");
Измерение временных затрат
Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.
console.time("Инициализация массива");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Инициализация массива");
Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.
Корреляция с панелью Timeline
Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.
Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.
В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp("Adding result")
function AddResult(name, result) {
console.timeStamp("Добавление результатов");
var text = name + ': ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "<br>");
}
Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:
- жёлтая вертикальная линия в панели Timeline.
- Запись добавлена в список записанных событий.
Создание точек останова
Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness():
function brightness() {
debugger;
var r = Math.floor(this.red*255);
var g = Math.floor(this.green*255);
var b = Math.floor(this.blue*255);
return (r * 77 + g * 150 + b * 29) >> 8;
}
Использование Command Line API
Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:
- удобные функции для выделения DOM-элементов.
- Методы управления CPU-профайлером.
- Псевдонимы для некоторых методов Console API.
- Отслеживание событий.
- Просмотр обработчиков событий объекта.
Выполнение выражений
Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.
Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.
Выделение элементов
Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».
$('#loginBtn');
Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn, нужно ввести:
$$('button.loginBtn');
И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы <script>, являющиеся дочерними по отношению к элементу <body>:
$x('/html/body/script');
Инспектирование DOM-элементов и объектов
Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.
К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент <li>. Затем последнее исполненное выражение ($_) передаётся в inspect(), чтобы открыть этот элемент в панели Elements.
Доступ к недавно вызванным DOM-элементам или объектам
Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.
Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0, второй — $1 и так далее.
Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:
Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»
Отслеживание событий
Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.
monitorEvents(window, "resize");
Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body:
monitorEvents(document.body, ["mousedown", "mouseup"]);
Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.
monitorEvents($('#scrollBar'), "touch");
Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.
Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.
unmonitorEvents(window);
Контроль за CPU-профайлером
С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.
Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:
Новый профиль появляется в панели Profiles с именем Profile 1:
Если вы обозначите имя для нового профиля, то оно будет использоваться в качестве его заголовка. Если вы создаете множество профилей с одинаковыми именами, то они группируются под одним заголовком:
Результат в панели Profiles:
Профили CPU могут быть вложенными, например:
profile("A");profile("B");profileEnd("B")profileEnd("A")
Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:
profile("A");profile("B"); profileEnd("A");profileEnd("B");
Оригинальная статья: Chrome DevTools: Using the Console
Разрешение ввода скриптов в панель консоли Google Chrome.
Нужно вставить скрипт в хром а он мне выдаёт "Внимание! Не вставляйте в консоль инструментов разработчика код, который вы не понимаете или не проверяли. Так злоумышленники могут украсть у вас данные или получить контроль над вашим компьютером. Чтобы разрешить вставку, введите 'разрешить вставку' ниже." а куда тыкать я не знаю .
На русском отобразиться вот это :
Внимание! Не вставляйте в консоль инструментов разработчика код, который вы не понимаете или не проверяли. Так злоумышленники могут украсть у вас данные или получить контроль над вашим компьютером. Чтобы разрешить вставку, введите 'разрешить вставку' ниже.
Вводим " allow pasting " разрешить вставку нажимаем enter . " allow pasting "
Теперь можно вставить скрипт для сайта .
Как поменять язык в панели русский в панели просмотра кода .
Сперва входим в панель кода правой кнопкой мышки нажимаем у нас меню
На панели в консоли ищем три точки и шестерёнку . Нажимаем на шестерёнку
открываться меню настройки .
В меню настройки находим языки выбираем русский внизу есть кнопка сохранения настроек теперь у нас 2 языка английский и русский для чего мы меняли язык мы узнали все в меню настроек где какая панель .