Запуск 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 записей трудно распознать, так как отображается много информации.
При необходимости используйте
console.table()
метод журнала, чтобы получать только интересующие вас сведения:Чтобы повторно использовать данные, возвращенные из выражения, используйте
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 с помощью консоли.