Помітили, що раз за разом копіюєте один і той самий 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 з юзерскриптами: вони спрацьовують за тригером завантаження сторінки й не потребують ручного втручання.

Як зробити бекап своїх сніпетів перед перевстановленням 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 після перевстановлення системи вони зникнуть.