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

Kayce Basques

Sofia Emelianova

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

Вы можете создавать фрагменты на панели «Источники» и запускать их на любой странице и в режиме инкогнито.

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

Например, на снимке экрана ниже показана домашняя страница документации DevTools слева и исходный код некоторых фрагментов на панели «Источники» > «Фрагменты» справа.

Вот исходный код фрагмента, который регистрирует некоторое сообщение и заменяет тело HTML домашней страницы элементом <p> , содержащим это сообщение:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Когда вы нажмете кнопку Нажмите кнопку «Выполнить» , появится панель консоли с сообщением Hello, Snippets! сообщение, которое регистрируется фрагмент, и содержимое страницы изменяется.

Откройте панель «Фрагменты»

На панели «Фрагменты» перечислены ваши фрагменты. Чтобы отредактировать фрагмент, откройте его одним из двух способов:

1. Перейдите к Источникам > > Фрагменты .

   

2. Из командного меню :

   1. Нажмите Control + Shift + P (Windows/Linux) или Command + Shift + P (Mac), чтобы открыть командное меню .
   2. Начните вводить Snippets , выберите «Показать фрагменты» и нажмите Enter .

   

Панель «Источники» > «Фрагменты» отображает список сохраненных вами фрагментов, в этом примере пустой.

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

Вы можете создавать фрагменты на панели «Фрагменты» или запустив соответствующую команду из командного меню в любом месте DevTools.

Панель «Фрагменты» сортирует фрагменты в алфавитном порядке.

Создайте фрагмент на панели «Источники».

1. Откройте панель «Фрагменты» .
2. Нажмите Новый фрагмент .

3. Введите имя фрагмента и нажмите Enter, чтобы сохранить его.

   

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

1. Сфокусируйте курсор в любом месте DevTools.
2. Нажмите Control + Shift + P (Windows/Linux) или Command + Shift + P (Mac), чтобы открыть командное меню .

3. Начните вводить Snippet , выберите «Создать новый фрагмент» , затем нажмите Enter , чтобы запустить команду.

   

Если вы хотите присвоить новому фрагменту собственное имя, ознакомьтесь с разделом «Переименование фрагментов» .

Редактировать фрагменты

1. Откройте панель «Фрагменты» .

2. На панели «Фрагменты» щелкните имя фрагмента, который вы хотите отредактировать. Панель «Источники» открывает ее в редакторе кода .

   

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

   

4. Нажмите Control + S (Windows/Linux) или Command + S (Mac), чтобы сохранить.

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

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

Запустите фрагмент на панели «Источники»

1. Откройте панель «Фрагменты» .
2. Нажмите на название фрагмента, который хотите запустить. Панель «Источники» открывает ее в редакторе кода .

3. Нажмите Запустите панель действий в нижней части редактора или нажмите Control + Enter (Windows/Linux) или Command + Enter (Mac).

   

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

1. Сфокусируйте курсор в любом месте DevTools.
2. Нажмите Control + O (Windows/Linux) или Command + O (Mac), чтобы открыть командное меню .

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

   

4. Нажмите Enter, чтобы запустить фрагмент.

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

1. Откройте панель «Фрагменты» .
2. Щелкните правой кнопкой мыши имя фрагмента и выберите «Переименовать» .

Удалить фрагменты

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