Запуск JavaScript в консоли

Вы можете ввести любое выражение JavaScript, инструкцию или фрагмент кода в консоли, и он запускается сразу и в интерактивном режиме по мере ввода. Это возможно, так как средство "Консоль" в средствах разработки представляет собой среду с циклом чтения и печати (REPL).

Консоль:

1. Считывает вводимый код JavaScript.
2. Оценивает код.
3. Выводит результат выражения.
4. Цикл возвращается к первому шагу.

Чтобы ввести операторы и выражения JavaScript в интерактивном режиме в консоли, выполните следующие действия:

1. Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить. Откроется devTools. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы напрямую открыть консоль DevTools.

2. При необходимости щелкните в средствах разработки, чтобы сосредоточиться на нем, а затем нажмите клавишу ESC , чтобы открыть консоль.

3. Щелкните консоль и введите 2+2, не нажимая клавишу ВВОД.

   Консоль сразу же отображает результат 4 в следующей строке при вводе. Эта Eager evaluation функция помогает создавать допустимые коды JavaScript. Консоль отображает результат во время ввода, независимо от того, правильно ли ваш Код JavaScript, и независимо от того, существует ли допустимый результат.

   

4. При нажатии клавиши ВВОДконсоль запускает команду JavaScript (выражение или инструкцию), отображает результат, а затем перемещает курсор вниз, чтобы вы могли ввести следующую команду JavaScript.

   

Автозаполнения для записи сложных выражений

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

Чтобы попробовать автозавершение при написании многокомпонентных выражений, выполните следующие действия:

1. Тип doc.

2. Нажмите клавиши со стрелками, чтобы выделить document их в раскрывающемся меню.

3. Нажмите клавишу TAB , чтобы выбрать document.

4. Тип .bo.

5. Нажмите клавишу TAB , чтобы выбрать document.body.

6. Введите другой . , чтобы получить большой список возможных свойств и методов, доступных в тексте текущей веб-страницы.

   

Журнал консоли

Как и во многих других средах командной строки, журнал введенных команд доступен для повторного использования. Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы отобразить команды, введенные ранее.

Аналогичным образом автозавершение сохраняет журнал команд, введенных ранее. Вы можете ввести первые несколько букв предыдущих команд, а предыдущие варианты отображаются в текстовом поле.

Кроме того, консоль также предлагает довольно много служебных методов, которые делают вашу жизнь проще. Например, всегда содержит результат последнего выражения, $_ запущенного в консоли. См . раздел Функции и селекторы средств консоли.

Многостроковые изменения

По умолчанию консоль предоставляет только одну строку для записи выражения JavaScript. Код выполняется при нажатии клавиши ВВОД. Чтобы обойти ограничение на 1 строку, нажмите клавиши SHIFT+ВВОД , а не ВВОД.

В следующем примере отображаемое значение является результатом выполнения всех строк (инструкций) по порядку:

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

Разрешить вставку в консоль

При первой попытке вставить содержимое в консоль вместо вставки отображается сообщение : "Предупреждение: не вставляйте код в консоль средств разработки, который вы не понимаете или не проверяли самостоятельно. Это может позволить злоумышленникам украсть вашу личность или получить контроль над компьютером. Введите "разрешить вставку" ниже и нажмите клавишу ВВОД, чтобы разрешить вставку".

Это предупреждение помогает предотвратить собственные атаки межсайтовых сценариев (self-XSS) на конечных пользователей. Чтобы вставить код, сначала введите разрешить вставку в консоли, а затем нажмите клавишу ВВОД. Затем вставьте содержимое. Или запустите Edge с флагом ниже.

Вставка в редактор фрагментов кода средства "Источники " аналогична; См . раздел Разрешить вставку в редактор фрагментов кода статьи Выполнение фрагментов Кода JavaScript на любой веб-странице.

Отключение предупреждений self-XSS путем запуска Edge с флагом командной строки

Чтобы предотвратить появление указанных выше предупреждений и немедленно разрешить вставку в консольное средство и редактор фрагментов средств Источников , например для автоматического тестирования, запустите Microsoft Edge из командной строки с помощью следующего флага: --unsafely-disable-devtools-self-xss-warnings. Флаг применяется к одному сеансу Microsoft Edge.

Например, в Windows:

Edge Stable:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Бета-версия Edge:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Dev:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Сетевые запросы с использованием await() верхнего уровня

За исключением собственных скриптов, консоль поддерживает ожидание верхнего уровня для выполнения произвольного асинхронного JavaScript. Например, используйте fetch API без упаковки инструкции await с асинхронной функцией.

Чтобы получить последние 50 проблем, которые были зарегистрированы в средствах разработчика Microsoft Edge для Visual Studio Code репозитория GitHub:

1. В средствах разработки откройте консоль.

2. Скопируйте и вставьте следующий фрагмент кода, чтобы получить объект, содержащий 10 записей:

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   10 записей трудно распознать, так как отображается много информации.

3. При необходимости используйте console.table() метод журнала, чтобы получать только интересующие вас сведения:

   

   Чтобы повторно использовать данные, возвращенные из выражения, используйте copy() служебный метод Консоли.

4. Вставьте следующий код. Он отправляет запрос и копирует данные из ответа в буфер обмена:

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

Консоль — это отличный способ попрактиковаться в JavaScript и выполнить некоторые быстрые вычисления. Реальная сила заключается в том, что у вас есть доступ к объекту окна . См . раздел Взаимодействие с DOM с помощью консоли.

См. также

• Взаимодействие с DOM с помощью консоли
• Функции и селекторы средств консоли

GitHub:

• Предложение ECMAScript: верхний уровень await
• Средства разработчика Microsoft Edge для Visual Studio Code

MDN:

• Объект Window .

Википедия:

• Цикл read–eval–print (REPL)