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

Kayce Basques

Sofia Emelianova

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

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

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

Ниже приведен исходный код фрагмента, который регистрирует сообщение и заменяет тело 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. Перейдите в раздел Sources (Источники) > > Snippets (Фрагменты).

   

2. В меню команд:

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

   

На панели Sources (Источники)>Snippets (Фрагменты) показан список сохраненных фрагментов. В нашем примере он пуст.

Создать структурированные описания

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

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

Как создать фрагмент на панели "Источники"

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

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

   

Как создать фрагмент с помощью меню команд

1. Установите курсор в любом месте в Инструментах разработчика.
2. Нажмите Ctrl + Shift + P (Windows/Linux) или Command + Shift + P (Mac), чтобы открыть меню команд.

3. Начните вводить Snippet, выберите Create new snippet (Создать фрагмент) и нажмите Ввод.

   

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

Изменить описания

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

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

   

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

   

4. Чтобы сохранить изменения, нажмите Ctrl + S (Windows/Linux) или Command + S (Mac).

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

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

Как запустить фрагмент на панели "Источники"

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

3. Нажмите Run (Выполнить) на панели действий в нижней части редактора или используйте сочетание клавиш Ctrl + Enter (Windows/Linux) или Command + Enter (macOS).

   

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

1. Установите курсор в любом месте в Инструментах разработчика.
2. Нажмите Ctrl + O (Windows/Linux) или Command + O (Mac), чтобы открыть меню команд.

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

   

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

Как переименовать фрагмент

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

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

1. Откройте панель Фрагменты.
2. Нажмите правой кнопкой мыши на название фрагмента и выберите Удалить.