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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

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

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

Например, на снимке экрана ниже показана домашняя страница документации 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. Щелкните правой кнопкой мыши имя фрагмента и выберите «Удалить» .
,

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

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

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

Например, на снимке экрана ниже показана домашняя страница документации 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. Щелкните правой кнопкой мыши имя фрагмента и выберите «Удалить» .