Запуск фрагментов Кода 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. Начните вводить "фрагменты", выберите Показать фрагменты и нажмите клавишу ВВОД , чтобы выполнить команду:

   

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

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

   

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

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

   

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

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

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. При появлении запроса введите имя файла и расположение.

Примечание.

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

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