Используйте консоль для тестирования и отладки веб-приложений Javascript.
Обзор
На этой странице объясняется, как консоль 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 в консоли .