Обзор консоли

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

Панель консоли рядом с домашней страницей DevTools.

Рисунок 2 . Панель консоли рядом с домашней страницей DevTools.

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

Рисунок 3 . Использование консоли для изменения заголовка страницы.

Изменение страницы из консоли возможно, поскольку консоль имеет полный доступ к window страницы. DevTools имеет несколько удобных функций, упрощающих проверку страницы. Например, предположим, что ваш JavaScript содержит функцию с hideModal . Запуск debug(hideModal) приостанавливает ваш код на первой строке hideModal при следующем вызове. Полный список служебных функций см. в разделе «Справочник по API консольных утилит» .

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

См. раздел «Начало работы с запуском JavaScript» , чтобы получить практический опыт запуска JavaScript в консоли.