«
»
Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

Кейси Баски

Технический писатель, Chrome DevTools & Lighthouse

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

Например, на рисунке 1 слева показана домашняя страница DevTools, а справа – некоторый исходный код Snippet.

Как выглядит страница перед запуском фрагмента.

Рисунок 1. Как выглядит страница перед запуском фрагмента.

Вот исходный код Snippet из рисунка 1 :

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

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

Как выглядит страница после запуска фрагмента.

Рисунок 2. Как выглядит страница после запуска фрагмента.

Откройте панель Snippets

Панель Snippets содержит список ваших фрагментов. Если вы хотите отредактировать фрагмент, вам нужно открыть его на панели фрагментов .

Панель Сниппетов.

Рисунок 3. Панель Сниппетов .

Откройте панель Snippets с помощью мыши

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

    Панель Sources с открытой страницей слева.

    Рисунок 4. Панель Sources с открытой страницей слева.

  2. Перейдите на вкладку « Фрагменты кода », чтобы открыть панель « Фрагменты кода». Возможно, вам придется нажать More Tabs

    Больше вкладок для доступа к опции Snippets .

Откройте панель Snippets с помощью меню команд

  1. Сфокусируйте курсор где-нибудь внутри DevTools.

  2. Нажмите Control+ Shift+ Pили Command+ Shift+ P(Mac), чтобы открыть меню команд.

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

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

    На рисунке 5. Команда Показать фрагменты .

Создать фрагменты

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

  1. Откройте панель Сниппеты .

  2. Нажмите Новый фрагмент.

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

    Называя фрагмент.

    Рисунок 6. Называя фрагмент.

Создать фрагмент через меню команд

  1. Сфокусируйте курсор где-нибудь внутри DevTools.

  2. Нажмите Control+ Shift+ Pили Command+ Shift+ P(Mac), чтобы открыть меню команд.

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

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

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

См. Переименовать фрагменты, если вы хотите дать своему новому фрагменту собственное имя.

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

  1. Откройте панель Сниппеты .

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

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

    Рисунок 8. Редактор кода.

  3. Используйте редактор кода, чтобы добавить JavaScript в ваш сниппет.

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

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

    На рисунке 9. Звездочка рядом с именем фрагмента, которая указывает несохраненный код.

Run Snippets

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

  1. Откройте панель Сниппеты .
  2. Нажмите на имя фрагмента, который вы хотите запустить. Фрагмент откроется в редакторе кода.
  3. Нажмите Run Snippet Run Snippet или нажмите Control+ Enterили Command+ Enter(Mac).

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

  1. Сфокусируйте курсор где-нибудь внутри DevTools.

  2. Нажмите Control+ Shift+ Pили Command+ Shift+ P(Mac), чтобы открыть меню команд.

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

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

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

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

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

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

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

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

Обратная связь

Была ли эта страница полезной?

Источник записи: https://developers.google.com

Связанные записи
LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

GoogleGoogle Chrome

Google Chrome - Что нового в DevTools (Chrome 84)

GoogleGoogle AdsensePageSpeed Insights

Как настроить отложенную загрузку для рекламных блоков Google AdSense?

GoogleGoogle AdsensePageSpeed Insights

6 способов повысить скорость загрузки страниц сайта AdSense »WebNots