На этой странице объясняется, как консоль Chrome DevTools упрощает разработку веб-страниц. Консоль имеет два основных применения: просмотр зарегистрированных сообщений и запуск JavaScript .
Просмотр зарегистрированных сообщений
Веб-разработчики часто регистрируют сообщения в консоли, чтобы убедиться, что их JavaScript работает должным образом. Чтобы зарегистрировать сообщение, вы вставляете в свой JavaScript выражение типа console.log('Hello, Console!') . Когда браузер выполняет ваш JavaScript и видит подобное выражение, он знает, что он должен записать сообщение в консоль. Например, предположим, что вы пишете HTML и JavaScript для страницы:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
На рис. 1 показано, как выглядит консоль после загрузки страницы и ожидания в течение 3 секунд. Попытайтесь выяснить, какие строки кода заставили браузер записать сообщения.
Рисунок 1 . Панель Консоли.
Веб-разработчики регистрируют сообщения по двум основным причинам:
- Убедиться, что код выполняется в правильном порядке.
- Проверка значений переменных в определенный момент времени.
См. раздел «Начало работы с ведением журнала сообщений» , чтобы получить практический опыт ведения журнала. См. Справочник по API консоли , чтобы просмотреть полный список методов console . Основное различие между методами заключается в том, как они отображают данные, которые вы регистрируете.
Запуск JavaScript
Консоль также является REPL . Вы можете запустить JavaScript в консоли, чтобы взаимодействовать с проверяемой страницей. Например, на рисунке 2 показана консоль рядом с домашней страницей DevTools, а на рисунке 3 показана та же страница после использования консоли для изменения заголовка страницы.
Фигура 2 . Панель консоли рядом с домашней страницей DevTools.
Рисунок 3 . Использование консоли для изменения заголовка страницы.
Изменение страницы из консоли возможно, поскольку консоль имеет полный доступ к window страницы. DevTools имеет несколько удобных функций, упрощающих проверку страницы. Например, предположим, что ваш JavaScript содержит функцию с hideModal . Запуск debug(hideModal) приостанавливает ваш код на первой строке hideModal при следующем вызове. Полный список служебных функций см. в разделе «Справочник по API консольных утилит» .
Когда вы запускаете JavaScript, вам не нужно взаимодействовать со страницей. Вы можете использовать консоль, чтобы опробовать новый код, не связанный со страницей. Например, предположим, что вы только что узнали о встроенном методе JavaScript Array map() и хотите поэкспериментировать с ним. Консоль — хорошее место, чтобы опробовать эту функцию.
См. раздел «Начало работы с запуском JavaScript» , чтобы получить практический опыт запуска JavaScript в консоли.