Если вы обнаружите, что постоянно запускаете один и тот же код в консоли , рассмотрите возможность сохранения кода в виде фрагмента. Фрагменты имеют доступ к контексту JavaScript страницы. Они являются альтернативой букмарклетам .
Вы можете создавать фрагменты на панели «Источники» и запускать их на любой странице и в режиме инкогнито.
Например, на снимке экрана ниже показана домашняя страница документации 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!
сообщение, которое регистрируется фрагмент, и содержимое страницы изменяется.
Откройте панель «Фрагменты»
На панели «Фрагменты» перечислены ваши фрагменты. Чтобы отредактировать фрагмент, откройте его одним из двух способов:
Перейдите к Источникам > > Фрагменты .
Из командного меню :
- Нажмите Control + Shift + P (Windows/Linux) или Command + Shift + P (Mac), чтобы открыть командное меню .
- Начните вводить
Snippets
, выберите « Показать фрагменты» и нажмите Enter .
На панели «Источники» > «Фрагменты» отображается список сохраненных вами фрагментов, в данном примере пустой.
Создание фрагментов
Вы можете создавать фрагменты на панели «Фрагменты» или запустив соответствующую команду из командного меню в любом месте DevTools.
Панель «Фрагменты» сортирует фрагменты в алфавитном порядке.
Создайте фрагмент на панели «Источники».
- Откройте панель «Фрагменты» .
- Нажмите Новый фрагмент .
Введите имя фрагмента и нажмите Enter , чтобы сохранить его.
Создайте фрагмент из командного меню.
- Сфокусируйте курсор в любом месте DevTools.
- Нажмите Control + Shift + P (Windows/Linux) или Command + Shift + P (Mac), чтобы открыть командное меню .
Начните вводить
Snippet
, выберите « Создать новый фрагмент» , затем нажмите Enter , чтобы запустить команду.
Если вы хотите присвоить новому фрагменту собственное имя, ознакомьтесь с разделом «Переименование фрагментов» .
Редактировать фрагменты
- Откройте панель «Фрагменты» .
На панели «Фрагменты» щелкните имя фрагмента, который вы хотите отредактировать. Панель «Источники» открывает ее в редакторе кода .
Используйте редактор кода для редактирования кода во фрагменте. Звездочка рядом с названием фрагмента означает, что вы еще не сохранили изменения.
Нажмите Control + S (Windows/Linux) или Command + S (Mac), чтобы сохранить.
Запуск фрагментов
Подобно созданию фрагмента, его можно запустить как на панели «Фрагменты» , так и из меню команд .
Запустите фрагмент на панели «Источники»
- Откройте панель «Фрагменты» .
- Нажмите на название фрагмента, который хотите запустить. Панель «Источники» открывает ее в редакторе кода .
Нажмите Запустите панель действий в нижней части редактора или нажмите Control + Enter (Windows/Linux) или Command + Enter (Mac).
Запустите фрагмент из командного меню
- Сфокусируйте курсор в любом месте DevTools.
- Нажмите Control + O (Windows/Linux) или Command + O (Mac), чтобы открыть командное меню .
Введите
!
символ, за которым следует имя фрагмента, который вы хотите запустить.Нажмите Enter , чтобы запустить фрагмент.
Переименование фрагментов
- Откройте панель «Фрагменты» .
- Щелкните правой кнопкой мыши имя фрагмента и выберите «Переименовать» .
Удалить фрагменты
- Откройте панель «Фрагменты» .
- Щелкните правой кнопкой мыши имя фрагмента и выберите «Удалить» .