Начало работы с JavaScript на консоли

В этом интерактивном учебнике показано, как запустить JavaScript на консолиMicrosoft Edge DevTools. Дополнительные сведения о том, как записывать сообщения на консоль, можно найти в разделе Начало работы с сообщениямив журнале. Дополнительные сведения о том, как приостановить код JavaScript и пошагово прокручиваться по одной строке, можно найти в разделе Начало отладки JavaScript.

На консоли

Обзор

Консоль — это REPL, который означает чтение, оценку, печать и зацикливание. Она считывает JavaScript, который вы вводите в него, оценивает код, выводит результат выраженияи осуществляет переход к первому шагу.

Настройка DevTools

Этот учебник предназначен для того, чтобы открыть демонстрацию и попробовать все рабочие процессы самостоятельно. После того как вы будете физически подписаться на нее, вы, наверное, захотите запомнить рабочие процессы позже.

  1. Control + Shift + J Чтобы открыть консоль, нажмите клавиши \ (Windows ) или Command + Option + J \ (macOS Console).

  2. Удерживайте клавишу Control \ (Windows ) или Command \ (macOS ) и щелкните пример на консоли JavaScript , чтобы открыть его в новом окне.

    Страница примера JavaScript на консоли в левой части экрана и DevTools справа

Просмотр и изменение JavaScript или DOM страницы

При сборке или отладке страницы часто бывает полезно запускать инструкции на консоли , чтобы изменить внешний вид или выполнение страницы.

  1. Обратите внимание на текст на кнопке.

  2. Введите текст document.getElementById('hello').textContent = 'Hello, Console!' в консоли и нажмите клавишу Enter , чтобы вычислить выражение. Обратите внимание на то, как изменится текст внутри кнопки.

    Внешний вид консоли после вычисления выражения

    Под кодом, который вы проверили "Hello, Console!" . Отзывайте 4 шага REPL: чтение, оценка, печать, цикл. После оценки кода программа REPL выводит результат выражения. Это "Hello, Console!" должно быть результатом вычисления document.getElementById('hello').textContent = 'Hello, Console!' .

Запуск произвольного кода JavaScript, не связанного со страницей

Иногда требуется, чтобы код Песочница в том месте, где вы можете протестировать какой-либо код, или опробуйте новые возможности JavaScript, с которыми вы не знакомы. Консоль — это идеальное место для экспериментов такого рода.

  1. Введите текст 5 + 15 на консоли и нажмите клавишу Enter , чтобы вычислить выражение. Консоль печатает результат выражения под кодом. На приведенном ниже рисунке на консоли должны отобразиться результаты после вычисления выражения.

  2. На консоливведите следующий код. Попробуйте ввести его, а затем построчно, а не скопировав.

    function add(a, b=20) { return a + b; }
    

    Если вы не знакомы с b=20 синтаксисом, ознакомьтесь со сведениями Определение значений по умолчанию для аргументов функций.

  3. Теперь запустите определенную функцию.

    add(25);
    

    add(25) вычисляется 45 , так как при add вызове функции без второго аргумента b равным ему присваивается значение по умолчанию 20 .

Дальнейшие действия

DevTools позволяет приостановить выполнение сценария в центре выполнения. Во время приостановки вы можете использовать консоль для просмотра и изменения window DOM страницы в данный момент времени. Рабочий процесс обеспечивает мощный процесс отладки. Интерактивные учебники можно найти в статьях Приступая к отладке JavaScript.

Кроме того, консоль имеет набор удобных функций, которые облегчают взаимодействие с страницей. Например:

  • Вместо того document.querySelector() чтобы выделять элемент, введите $() . Этот синтаксис имеет тот факт, что jQuery, но он не является jQuery. Это просто псевдоним document.querySelector() .
  • debug(function) фактически задает точку останова в первой строке этой функции.
  • keys(object) Возвращает массив с ключами указанного объекта.

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

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