Запуск JavaScript в консоли
Вы можете ввести любое выражение JavaScript, инструкцию или фрагмент кода в консоли, и он запускается сразу и в интерактивном режиме по мере ввода. Это возможно, так как средство Консоли в Средствах разработки является средой REPL . REPL — чтение, оценка, печать и цикл.
Консоль:
- Считывает вводимый код JavaScript.
- Оценивает код.
- Выводит результат выражения.
- Цикл возвращается к первому шагу.
Чтобы ввести операторы и выражения JavaScript в интерактивном режиме в консоли, выполните следующие действия:
- Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить. Откроется devTools. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы напрямую открыть консоль DevTools.
- При необходимости щелкните в средствах разработки, чтобы сосредоточиться на нем, а затем нажмите клавишу ESC , чтобы открыть консоль.
- Щелкните консоль и введите 2+2 , не нажимая клавишу ВВОД. Консоль сразу же отображает результат 4 в следующей строке при вводе. Эта Eager evaluation функция помогает создавать допустимые коды JavaScript. Консоль отображает результат во время ввода, независимо от того, правильно ли ваш Код JavaScript, и независимо от того, существует ли допустимый результат.
- При нажатии клавиши ВВОДконсоль запускает команду JavaScript (выражение или инструкцию), отображает результат, а затем перемещает курсор вниз, чтобы вы могли ввести следующую команду JavaScript.
Автозаполнения для записи сложных выражений
Консоль помогает создавать сложные коды JavaScript с помощью автозаполнения. Эта функция — отличный способ узнать о методах JavaScript, о которые вы не знали ранее.
Чтобы попробовать автозавершение при написании многокомпонентных выражений, выполните следующие действия:
- Тип doc .
- Нажмите клавиши со стрелками, чтобы выделить document их в раскрывающемся меню.
- Нажмите клавишу TAB , чтобы выбрать document .
- Тип .bo .
- Нажмите клавишу TAB , чтобы выбрать document.body .
- Введите другой . , чтобы получить большой список возможных свойств и методов, доступных в тексте текущей веб-страницы.
Журнал консоли
Как и во многих других средах командной строки, журнал введенных команд доступен для повторного использования. Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы отобразить команды, введенные ранее.
Аналогичным образом автозавершение сохраняет журнал команд, введенных ранее. Вы можете ввести первые несколько букв предыдущих команд, а предыдущие варианты отображаются в текстовом поле.
Кроме того, консоль также предлагает довольно много служебных методов , которые делают вашу жизнь проще. Например, всегда содержит результат последнего выражения, $_ запущенного в консоли.
в консоли всегда содержит последний результат.» /> в консоли всегда содержит последний результат.» />
Многостроковые изменения
По умолчанию консоль предоставляет только одну строку для записи выражения JavaScript. Код выполняется при нажатии клавиши ВВОД. Ограничение на одну строку может сорвать вас. Чтобы обойти ограничение на 1 строку, нажмите клавиши SHIFT+ВВОД , а не ВВОД. В следующем примере отображаемое значение является результатом выполнения всех строк (инструкций) по порядку:
Если запустить многострочный оператор в консоли, блок кода будет автоматически распознан и отступ. Например, если запустить оператор block, введя фигурную скобку, следующая строка будет автоматически отступить:
Сетевые запросы с использованием await() верхнего уровня
За исключением собственных скриптов, консоль поддерживает ожидание верхнего уровня для выполнения произвольного асинхронного JavaScript. Например, используйте fetch API без упаковки инструкции await с асинхронной функцией.
Чтобы получить последние 50 проблем, которые были зарегистрированы в средствах разработчика Microsoft Edge для Visual Studio Code репозитория GitHub:
- В средствах разработки откройте консоль.
- Скопируйте и вставьте следующий фрагмент кода, чтобы получить объект, содержащий 10 записей:
await ( await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json(); 
10 записей трудно распознать, так как отображается много информации.
Чтобы повторно использовать данные, возвращенные из выражения, используйте copy() служебный метод Консоли.copy(await (await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json()) Консоль — это отличный способ попрактиковаться в JavaScript и выполнить некоторые быстрые вычисления. Реальная сила заключается в том, что у вас есть доступ к объекту окна . См . раздел Взаимодействие с DOM с помощью консоли.
Как вставить скрипт в консоль браузера
Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools) :
После этого внизу браузера откроется консоль:
Мы можем напрямую вводить в консоль браузера выражения JavaScript, и они будут выполняться. Например, введем в консоли следующий текст:
alert("Привет мир");
И что замечательно при работе с консолью, при вводе она предлагает всплывающую подсказку с названиями, которые мы хотим ввести, что упрощает ввод, снижает количество возможных ошибок:
Функция alert() выводит в браузере окно с сообщением. В итоге после ввода этой команды и нажатия на клавишу Enter браузер выполнит эту функцию и отобразит нам окно с сообщением:
Таким образом, для написания и выполнения кода JavaScript нам в принципе не нужен ни текстовый редактор, ни файл веб-страницы, который содержит код javascript, достаточно одной консоли браузера. Однако набирать большой и сложный код JavaScript в консоли может быть не очень удобно, поэтому в дальнейшем для всех примеров по прежнему будет использовать код JavaScript, который встраивается на html-страницу.
Вывод на консоль и console.log
Для вывода различного рода информации в консоли браузера используется специальная функция console.log() . Например, определим html-страницу со следующим кодом:
METANIT.COM
В коде javascript с помощью ключевого слова const объявляется константа sum , которой присваивается сумма двух чисел 5 и 8:
const sum = 5 + 8;
Далее с помощью метода console.log() на консоль браузера выводится некоторое сообщение
console.log("Результат операции");
И в конце также с помощью метода console.log() на консоль браузера выводится значение константы sum.
console.log(sum);
И после запуска веб-страницы в браузере мы увидим в консоли результат выполнения кода:
Что очень полезно, в консоли браузера вы также можете заметить номера строк кода, где именно выполнялся вывод на консоль.
В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.
Причем подобный код мы могли бы ввести в самой консоли:
Также последовательно вводим инструкции и после ввода каждой инструкции нажимаем на Enter. В данном случае я ввел две инструкции:
const sum2 = 1 + 2 // определяем константу sum2, которая равна сумме 1 + 2 console.log(sum2) // выводим значение константы sum2 на консоль
Если нам надо, чтобы код в консоли переносился на новую строку без выполнения, то в конце выражения javascript нажимаем на комбинацию клавиш Shift + Enter . После ввода последней инструкции для выполнения введенного кода javascript нажимаем на Enter.
Выводим элемент в консоль
Мы сказали JavaScript найти на странице элемент с классом page , но как узнать, что он его действительно нашёл? И что элемент — тот самый? Для этого нам понадобится консоль.
Консоль — это инструмент разработчика, который помогает тестировать код. Если во время выполнения скрипта возникнет ошибка, в консоли появится сообщение о ней. А ещё в консоль можно выводить текстовые подсказки. В нашем интерфейсе консоль находится справа от редактора кода, между мини-браузером и списком задач. Чтобы увидеть сообщения в консоли, её нужно развернуть, щёлкнув по значку справа.
Задачи Выполнено 0 из 3
Чтобы вывести сообщение в консоль, нужно использовать console.log :
console.log('Привет от JavaScript!');В результате этой инструкции в консоли появится сообщение Привет от JavaScript!
В консоль можно выводить не только текст, но и результаты выполнения инструкций. Например, найденный с помощью querySelector элемент:
console.log(document.querySelector('.page'));Инструкция получилась длинной и сложной, но вскоре мы разберём, как её упростить. А пока займёмся тестированием кода. Так называется этап создания программы, когда мы проверяем, что всё работает, как надо. И это не менее важно, чем написание кода.
Давайте убедимся, что JavaScript нашёл нужный элемент, а заодно потренируемся работать с консолью.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим
Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке: 
Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:
