Выполнение фрагментов кода JavaScript на любой странице с Microsoft Edge DevTools

Если вы обнаружите, что один и тот же код запускается повторно на консоли , попробуйте сохранить его как фрагмент кода. Фрагменты — это сценарии, созданные вами на панели « источники ». У них есть доступ к контексту JavaScript на странице, и вы можете запускать их на любой странице. Фрагменты — это альтернатива для Закладка.
В Firefox DevTools есть функция, похожая на фрагменты, которые называются блокнотом.

Например, на приведенном ниже рисунке показана домашняя страница DevTools слева и фрагмент исходного кода справа.

Вид страницы перед выполнением фрагмента

Исходный код фрагмента на предыдущем рисунке.

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

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

Вид страницы после выполнения фрагмента

Открытие области "фрагменты кода"

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

Область фрагментов

Открытие области фрагментов с помощью мыши

  1. Перейдите на вкладку источники , чтобы открыть панель " источники ". Обычно область страницы открывается по умолчанию.

    Панель «источники» с открытой областью страницы в левой части экрана

  2. Перейдите на вкладку фрагменты кода , чтобы открыть область фрагменты . More Tabs  Для доступа к параметру фрагментов может потребоваться нажать кнопку Другие вкладки \ (другие вкладки ).

Открытие области фрагментов с помощью меню команд

  1. Сфокусировать указатель мыши в DevTools.

  2. Control + Shift + P Чтобы открыть меню команд, нажмите клавиши \ (Windows ) или Command + Shift + P \ (macOS ).

  3. Начните вводить текст Snippets , нажмите кнопку Показать фрагментыи нажмите клавишу Enter для запуска команды.

    Команда «Показать фрагменты»

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

Создание фрагмента с помощью панели «источники»

  1. Открытие области фрагментов .

  2. Нажмите кнопку создать фрагмент.

  3. Введите имя для фрагмента, а затем нажмите Enter для сохранения.

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

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

  1. Сфокусировать указатель мыши в DevTools.

  2. Control + Shift + P Чтобы открыть меню команд, нажмите клавиши \ (Windows ) или Command + Shift + P \ (macOS ).

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

    Команда для создания нового фрагмента.

Если вы хотите присвоить новому фрагменту настраиваемое имя, просмотрите фрагменты Rename .

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

  1. Открытие области фрагментов .

  2. В области фрагменты щелкните имя фрагмента, который вы хотите изменить, чтобы открыть его в редакторе кода.

    Редактор кода

  3. С помощью редактора кода добавьте JavaScript в сниппет.

  4. Если рядом с именем фрагмента появится звездочка, это означает, что у вас есть несохраненный код. Чтобы сохранить, нажмите клавиши Control + S \ (Windows ) или Command + S \ (macOS ).

    Звездочка рядом с именем фрагмента, обозначающее несохраненный код.

Выполнение фрагментов кода

Выполнение фрагмента на панели «источники»

  1. Открытие области фрагментов .
  2. Щелкните имя фрагмента, который вы хотите выполнить. Фрагмент откроется в редакторе кода.
  3. Выберите команду выполнить фрагмент \ (  выполнить фрагмент \ ) или нажмите клавиши Control + Enter \ (Windows ) или Command + Enter \ (macOS ).

Выполнение фрагмента с помощью меню команд

  1. Сфокусировать указатель мыши в DevTools.

  2. Control + Shift + P Чтобы открыть меню команд, нажмите клавиши \ (Windows ) или Command + Shift + P \ (macOS ).

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

    Выполнение фрагмента из меню команд

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

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

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

Удаление фрагментов

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

Примечание

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

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