Заметили, что раз за разом копируете один и тот же JavaScript в консоль DevTools? Отладочный сниппет, извлечение данных со страницы, быстрая модификация DOM, и каждый раз ручной ввод или вставка из блокнота.

Chrome DevTools уже несколько лет держит встроенный редактор сниппетов прямо на вкладке Sources. Вы пишете скрипт один раз, даёте ему имя, и запускаете на любой странице одним кликом или шорткатом. Работает быстрее букмарклета и не требует расширений.

Разберём по шагам весь цикл: от открытия панели Snippets до готовых работающих примеров, которые можно забрать себе.

💡 Быстрый обзор:

• Открываем панель Snippets через вкладку Sources или командное меню
• Создаём новый сниппет и даём ему осмысленное имя
• Пишем JavaScript в редакторе кода и сохраняем через Ctrl+S
• Запускаем сниппет кнопкой Run или через командное меню с !
• Разбираем практические примеры: очистка страницы, сбор данных, модификация стилей

Что такое сниппеты и зачем они нужны

Сниппет, это фрагмент JavaScript, сохранённый непосредственно в Chrome DevTools. В отличие от кода в консоли, он никуда не исчезает при перезагрузке страницы или закрытии браузера, лежит во вкладке Sources и ждёт запуска.

Главное преимущество перед консолью: сниппет выполняется в контексте текущей страницы и имеет полный доступ к её DOM, переменным и API. Вы можете написать скрипт для извлечения данных с любого сайта, модификации вёрстки или автоматизации рутины и запускать его когда угодно без повторного ввода.

Альтернативный путь, букмарклеты (закладки с javascript: в URL), но они ограничены длиной строки и неудобны для многострочного кода. В Firefox аналогом был Scratchpad, но он выведен из браузера начиная с версии 70 и заменён консолью с многолинейным редактором.

Посмотрите этот короткий видеоурок по сниппетам, он на английском, но все действия показаны на экране и полностью соответствуют описанным ниже шагам.

Вот как выглядит типичный рабочий процесс со сниппетом: на скриншоте слева, исходная страница, справа, код в редакторе.

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

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

После запуска страница полностью меняется: в консоли появляется Hello, Snippets!, а содержимое body заменено единственным абзацем.

Как открыть панель сниппетов

Панель Snippets находится внутри вкладки Sources. Есть два способа до неё добраться, мышью и через командное меню.

Способ первый: мышью

Откройте DevTools (F12 или Ctrl+Shift+I) и перейдите на вкладку Sources. Слева вы увидите панель Page с деревом файлов страницы, она открыта по умолчанию.

Нажмите на вкладку Snippets в том же левом столбце. Если вкладки не видно, нажмите стрелку More tabs (>>), она откроет выпадающий список со скрытыми вкладками, среди которых есть и Snippets.

Способ второй: командное меню

Командное меню, самый быстрый способ навигации по DevTools, если помнить шорткат.

• Поставьте фокус в любое место внутри DevTools.
• Нажмите Ctrl+Shift+P (Windows/Linux) или Cmd+Shift+P (Mac), откроется командное меню.
• Начните вводить snippets и выберите Show Snippets, затем нажмите Enter.

Создание нового сниппета

Панель Snippets открыта, теперь добавим первый скрипт.

Через панель Sources

В панели Snippets нажмите кнопку New snippet. Введите имя сниппета и нажмите Enter, он появится в списке слева.

Имя должно быть осмысленным, через месяц вы не вспомните, что делает snippet-3. Пишите «clear-page-and-log», «extract-product-prices» или «toggle-dark-mode».

Через командное меню

Тот же шорткат Ctrl+Shift+P / Cmd+Shift+P, но теперь вводите snippet и выбираете Create new snippet, затем Enter.

Новый сниппет создаётся с именем по умолчанию, переименуйте его, кликнув правой кнопкой и выбрав Rename.

Редактирование кода сниппета

Кликните по имени сниппета в панели слева, справа откроется редактор кода. Это полноценный редактор с подсветкой синтаксиса, нумерацией строк и автодополнением для JavaScript.

Пишите код как в любом редакторе. Доступны все штатные API браузера: объекты document и window, функции fetch и console, хранилище localStorage. Полный набор того, что видит страница.

Когда код не сохранён, рядом с именем сниппета появляется звёздочка. Сохраняйтесь: Ctrl+S (Windows/Linux) или Cmd+S (Mac).

Используйте Ctrl+Z / Cmd+Z для отмены, история изменений действует в пределах сессии редактирования.

Запуск сниппета

Кнопкой Run на панели Sources

Откройте нужный сниппет в редакторе. Нажмите кнопку Run (иконка Play) в нижней части панели:

Или нажмите Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Сниппет выполнится в контексте текущей открытой страницы.

Через командное меню с восклицательным знаком

Откройте командное меню (Ctrl+Shift+P / Cmd+Shift+P), удалите символ >, введите ! и начните набирать имя сниппета. DevTools покажет подходящие варианты:

Выберите нужный и нажмите Enter. Этот способ удобен, когда вы не хотите переключаться на вкладку Sources.

Переименование и удаление

Обе операции делаются из панели Snippets правым кликом по имени сниппета:

• Rename, задайте новое имя,
• Remove, удалите сниппет безвозвратно.

Удаление не запрашивает подтверждения, будьте внимательны. Перед удалением сложного скрипта скопируйте код в текстовый файл.

Практические примеры сниппетов

Теория есть, теперь несколько готовых скриптов, которые можно скопировать, сохранить как сниппет и сразу использовать.

Очистка страницы для скриншота

Убирает весь контент и вставляет чистый белый фон, полезно, когда делаете скриншот для портфолио или документации:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Сбор всех ссылок со страницы

Извлекает все URL и выводит в консоль списком. Пригодится для аудита страницы или сбора данных:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Тёмный режим на любом сайте

Применяет инверсию ко всей странице, работает даже там, где нет встроенной тёмной темы:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Подсветка всех кнопок на странице

Обводит красной рамкой каждый <button> и input[type="submit"], удобно для проверки вёрстки:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Все эти сниппеты можно комбинировать и дописывать под свои задачи. Сохранили один раз, пользуетесь годами.

⁉️🤔 Частые вопросы

Где физически хранятся сниппеты Chrome DevTools?

Сниппеты хранятся в профиле Chrome в файле Preferences (JSON) по пути %LocalAppData%\Google\Chrome\User Data\Default\Preferences на Windows или ~/Library/Application Support/Google/Chrome/Default/Preferences на Mac. Они НЕ синхронизируются через Google-аккаунт, при смене компьютера или переустановке браузера сниппеты теряются. Для переноса вручную скопируйте секцию devtools.preferences.snippets из одного Preferences-файла в другой при закрытом браузере.

Чем сниппет отличается от букмарклета?

Букмарклет, это закладка с URL, начинающимся с javascript:, ограниченная размером URL (около 2000 символов) и неудобная для редактирования. Сниппет, полноценный редактор внутри DevTools без ограничений по длине, с подсветкой синтаксиса и сохранением между сессиями. Сниппет также можно запускать шорткатом Ctrl+Enter, не отрывая рук от клавиатуры.

Можно ли запустить сниппет автоматически при загрузке страницы?

Напрямую, нет. Сниппет всегда требует ручного запуска. Если нужна автоматизация при загрузке, используйте расширение Chrome (content script) или Tampermonkey/Violentmonkey с userscript-ами, они срабатывают по триггеру загрузки страницы и не требуют ручного вмешательства.

Как бэкапить свои сниппеты перед переустановкой Chrome?

Откройте DevTools, перейдите в Sources → Snippets, кликните правой кнопкой по каждому сниппету и выберите Save as, сохранит файл .js на диск. Либо откройте chrome://version/, найдите путь к профилю, закройте Chrome и скопируйте из Preferences-файла JSON-секцию devtools.preferences.snippets.

Почему мой сниппет не видит переменные из консоли?

Сниппет выполняется в собственном скоупе, он не имеет доступа к переменным, объявленным в консоли через var/let/const в глобальной области. Чтобы передать данные, присвойте значение прямо в window: window.myData = {...} в консоли, а в сниппете читайте window.myData. Или наоборот, сниппет может выставить данные в window, а консоль их прочитает.

Стоит ли осваивать сниппеты в 2026 году?

Сниппеты, один из тех инструментов, которые не меняются годами, но радикально ускоряют рутину, если про них не забывать. Пять минут на создание скрипта для сбора ссылок или очистки страницы экономят десятки ручных операций каждый месяц.

Стартуйте с трёх простых сниппетов: сбор данных с таблиц на странице, быстрая очистка DOM для скриншотов и подсветка элемента по селектору. Сохраните, и в следующий раз, когда понадобится вытащить данные с чужого сайта или проверить вёрстку, вы справитесь за секунды, а не за полчаса копипаста.

Помните только про бэкап: сниппеты не синхронизируются между устройствами, и без копии Preferences-файла при переустановке системы они пропадут.