Поделиться через

Запуск фрагментов Кода JavaScript на любой веб-странице

Если вы несколько раз вводите один и тот же код в консольное средство, попробуйте сохранить код в виде фрагмента кода, а затем запустить его. Фрагменты кода — это скрипты, созданные в средстве "Источники ". Фрагменты кода имеют доступ к контексту JavaScript веб-страницы, и вы можете запускать фрагменты на любой веб-странице. Фрагменты можно использовать для изменения веб-страницы, например для изменения ее содержимого или внешнего вида, а также для извлечения данных.

На следующем снимке экрана показан Microsoft Edge с веб-страницей слева и Средствами разработки справа. Открыт инструмент Источники , в котором отображается исходный код фрагмента, выбранного на вкладке Фрагменты кода. Код фрагмента был выполнен, внося изменения на веб-страницу:

Веб-страница, измененная фрагментом

Исходный код фрагмента кода показан ниже:

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

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

При запуске фрагмента кода на веб-странице исходный код этого фрагмента добавляется на текущую веб-страницу. Дополнительные сведения об изменении существующего кода веб-страницы вместо добавления нового кода см. в разделе Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка Переопределения).

Включение всего кода в один файл

Параметры безопасности большинства веб-страниц блокируют загрузку других скриптов в фрагментах. По этой причине необходимо включить весь код в один файл.

Открытие вкладки "Фрагменты"

Вкладка "Фрагменты" сгруппирована с вкладкой Страница в области Навигатор слева от средства "Источники".

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

  1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  2. В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (значок ") .

    Инструмент

  3. В области Навигатор (слева) выберите вкладку Фрагменты кода. Чтобы получить доступ к параметру Фрагменты кода , может потребоваться нажать кнопку Дополнительные вкладки (Дополнительные вкладки).

Откройте вкладку "Фрагменты" в меню "Команда"

Вы также можете открыть вкладку Фрагменты с помощью меню команд:

  1. Выберите все элементы в средствах разработки, чтобы сосредоточиться на средствах разработки.

  2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.

  3. Начните вводить "фрагменты", выберите Показать фрагменты и нажмите клавишу ВВОД , чтобы выполнить команду:

    Команда Show Snippets

Создание фрагмента кода

Фрагмент кода можно создать из средства "Фрагменты" или с помощью команды Создать новый фрагмент из меню "Команда" в любом месте DevTools.

На панели "Фрагменты" фрагменты сортируются в алфавитном порядке.

Создание фрагмента в средстве "Источники"

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

  1. Откройте вкладку Фрагменты кода.

  2. Щелкните Новый фрагмент кода (+).

  3. Введите имя фрагмента и нажмите клавишу ВВОД:

    Новый пустой фрагмент в средстве

Создание фрагмента из меню "Команды"

  1. Сфокусируйте курсор где-нибудь в Средствах разработки.

  2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.

  3. Начните вводить "фрагмент", выберите Создать новый фрагмент кода и нажмите клавишу ВВОД:

    Команда для создания нового фрагмента кода

Чтобы переименовать новый фрагмент, см. раздел Переименование фрагмента кода ниже.

Изменение фрагмента кода

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

  1. Откройте вкладку Фрагменты кода.

  2. На вкладке Фрагменты щелкните имя фрагмента кода, который требуется изменить. Фрагмент кода откроется в Редактор кода:

    Редактор кода

  3. Используйте Редактор Code, чтобы добавить JavaScript в фрагмент кода.

  4. Если рядом с именем фрагмента кода отображается звездочка, это означает, что у вас есть несохраняемый код. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить:

    Звездочка рядом с именем фрагмента кода указывает на несохраняемый код.

Разрешить вставку в редактор фрагментов кода

При первой попытке вставить содержимое в редактор фрагментов вкладки "Фрагменты" > средства "Источники>" вместо вставки отображается диалоговое окно "Доверяете этому коду?" с сообщением "Не вставлять код, который вы не понимаете или не проверяли себя в средства разработки. Это может позволить злоумышленникам украсть вашу личность или получить контроль над компьютером. Введите "разрешить вставку" ниже, чтобы разрешить вставку".

Редактор вкладки

Это предупреждение помогает предотвратить собственные атаки межсайтовых сценариев (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

Запуск фрагмента кода

Запуск фрагмента из средства "Источники"

  1. Откройте вкладку Фрагменты кода.

  2. Щелкните имя фрагмента, который требуется запустить. Фрагмент кода откроется в Редактор кода:

  3. Нажмите кнопку Выполнить фрагмент кода (выполнить фрагмент) или нажмите клавиши CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS):

    Кнопка выполнения фрагмента кода в нижней части редактора кода

Запуск фрагмента кода из меню "Команда"

  1. Сфокусируйте курсор где-нибудь в Средствах разработки.

  2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.

  3. > Удалите символ и введите символ !, за которым следует имя фрагмента кода, который вы хотите запустить:

    Выполнение фрагмента из меню

  4. Нажмите клавишу ВВОД , чтобы запустить фрагмент кода.

Переименование фрагмента

  1. Откройте вкладку Фрагменты кода.

  2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Переименовать.

Удаление фрагмента кода

  1. Откройте вкладку Фрагменты кода.

  2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Удалить.

Сохранение фрагмента на диск в виде файла

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

  1. Откройте вкладку Фрагменты кода.

  2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Сохранить как.

    Открывается диалоговое окноСохранить как.

  3. Выберите папку, введите имя файла (например Script snippet #1.js, ), а затем нажмите кнопку Сохранить .

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

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