Zauważyli Państwo, że raz za razem kopiują Państwo ten sam JavaScript do konsoli DevTools? Snippet debugujący, wyciąganie danych ze strony, szybka modyfikacja DOM i za każdym razem ręczne wpisywanie lub wklejanie z notatnika.

Chrome DevTools od kilku lat ma wbudowany edytor snippetów, dostępny bezpośrednio na karcie Sources. Piszą Państwo skrypt raz, nadają mu nazwę i uruchamiają na dowolnej stronie jednym kliknięciem lub skrótem klawiszowym. Działa szybciej niż bookmarklet i nie wymaga rozszerzeń.

Przeanalizujemy krok po kroku cały cykl: od otwarcia panelu Snippets po gotowe, działające przykłady, które można zabrać dla siebie.

💡 Szybki przegląd:

• Otwieramy panel Snippets przez kartę Sources lub menu poleceń
• Tworzymy nowy snippet i nadajemy mu sensowną nazwę
• Piszemy JavaScript w edytorze kodu i zapisujemy przez Ctrl+S
• Uruchamiamy snippet przyciskiem Run lub przez menu poleceń z !
• Omawiamy praktyczne przykłady: czyszczenie strony, zbieranie danych, modyfikacja stylów

Czym są snippety i do czego służą

Snippet to fragment JavaScriptu zapisany bezpośrednio w Chrome DevTools. W przeciwieństwie do kodu w konsoli nie znika on podczas przeładowania strony czy zamknięcia przeglądarki, znajduje się na karcie Sources i czeka na uruchomienie.

Główna przewaga nad konsolą: snippet wykonuje się w kontekście bieżącej strony i ma pełny dostęp do jej DOM, zmiennych i API. Mogą Państwo napisać skrypt do wyciągania danych z dowolnej witryny, modyfikacji układu lub automatyzacji rutyny i uruchamiać go w dowolnym momencie bez ponownego wpisywania.

Alternatywną ścieżką są bookmarklety (zakładki z javascript: w URL), ale są one ograniczone długością ciągu znaków i niewygodne dla kodu wielowierszowego. W Firefoksie odpowiednikiem był Scratchpad, jednak został on usunięty z przeglądarki począwszy od wersji 70 i zastąpiony konsolą z edytorem wielowierszowym.

Proszę obejrzeć ten krótki samouczek wideo o snippetach, jest po angielsku, ale wszystkie czynności są pokazane na ekranie i w pełni odpowiadają opisanym poniżej krokom.

Oto jak wygląda typowy przepływ pracy ze snippetem: na zrzucie ekranu po lewej strona źródłowa, po prawej kod w edytorze.

Kod źródłowy z tego przykładu robi trzy rzeczy: loguje komunikat w konsoli, czyści document.body i wstawia nowy akapit:

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);

Po uruchomieniu strona całkowicie się zmienia: w konsoli pojawia się Hello, Snippets!, a zawartość body zostaje zastąpiona pojedynczym akapitem.

Jak otworzyć panel snippetów

Panel Snippets znajduje się wewnątrz karty Sources. Są dwa sposoby, aby się do niego dostać: myszą oraz przez menu poleceń.

Sposób pierwszy: myszą

Otwórz DevTools (F12 lub Ctrl+Shift+I) i przejdź do zakładki Sources. Po lewej stronie zobaczysz panel Page z drzewem plików strony, jest on otwarty domyślnie.

Kliknij zakładkę Snippets w tej samej lewej kolumnie. Jeśli zakładka nie jest widoczna, kliknij strzałkę More tabs (>>), która otworzy rozwijaną listę z ukrytymi zakładkami, wśród których są też Snippets.

Sposób drugi: menu poleceń

Menu poleceń to najszybszy sposób nawigacji w DevTools, jeśli pamięta Pan/Pani skrót.

• Ustaw fokus w dowolnym miejscu wewnątrz DevTools.
• Naciśnij Ctrl+Shift+P (Windows/Linux) lub Cmd+Shift+P (Mac), otworzy się menu poleceń.
• Zacznij wpisywać snippets i wybierz Show Snippets, a następnie naciśnij Enter.

Tworzenie nowego snippetu

Panel Snippets jest otwarty, teraz dodamy pierwszy skrypt.

Przez panel Sources

W panelu Snippets kliknij przycisk New snippet. Wpisz nazwę snippetu i naciśnij Enter, pojawi się on na liście po lewej stronie.

Nazwa powinna być znacząca, po miesiącu nie przypomni Pan/Pani sobie, co robi snippet-3. Proszę pisać „clear-page-and-log", „extract-product-prices" lub „toggle-dark-mode".

Przez menu poleceń

Ten sam skrót Ctrl+Shift+P / Cmd+Shift+P, ale teraz proszę wpisać snippet i wybrać Create new snippet, a następnie Enter.

Nowy snippet tworzony jest z nazwą domyślną, proszę go przemianować, klikając prawym przyciskiem myszy i wybierając Rename.

Edycja kodu snippetu

Proszę kliknąć nazwę snippetu w panelu po lewej stronie, po prawej otworzy się edytor kodu. To pełnoprawny edytor z podświetlaniem składni, numeracją wierszy i autouzupełnianiem dla JavaScript.

Proszę pisać kod jak w każdym innym edytorze. Dostępne są wszystkie standardowe API przeglądarki: obiekty document i window, funkcje fetch i console, magazyn localStorage. Pełen zestaw tego, co widzi strona.

Gdy kod nie jest zapisany, obok nazwy snippetu pojawia się gwiazdka. Proszę zapisać: Ctrl+S (Windows/Linux) lub Cmd+S (Mac).

Proszę używać Ctrl+Z / Cmd+Z do cofania, historia zmian działa w ramach sesji edycji.

Uruchamianie snippetu

Przyciskiem Run w panelu Sources

Proszę otworzyć żądany snippet w edytorze. Nacisnąć przycisk Run (ikona Play) w dolnej części panelu:

Lub nacisnąć Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Snippet wykona się w kontekście bieżącej otwartej strony.

Przez menu poleceń z wykrzyknikiem

Proszę otworzyć menu poleceń (Ctrl+Shift+P / Cmd+Shift+P), usunąć znak >, wpisać ! i zacząć wpisywać nazwę snippetu. DevTools pokaże pasujące opcje:

Proszę wybrać żądany i nacisnąć Enter. Ten sposób jest wygodny, gdy nie chce Pan/Pani przełączać się na zakładkę Sources.

Zmiana nazwy i usuwanie

Obie operacje wykonuje się z panelu Snippets prawym kliknięciem na nazwę snippetu:

• Rename, proszę nadać nową nazwę,
• Remove, proszę usunąć snippet bezpowrotnie.

Usuwanie nie wymaga potwierdzenia, proszę być ostrożnym. Przed usunięciem złożonego skryptu proszę skopiować kod do pliku tekstowego.

Praktyczne przykłady snippetów

Teoria jest, teraz kilka gotowych skryptów, które można skopiować, zapisać jako snippet i od razu użyć.

Czyszczenie strony do zrzutu ekranu

Usuwa całą zawartość i wstawia czyste białe tło, przydatne, gdy robi Pan/Pani zrzut ekranu do portfolio lub dokumentacji:

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

Zbieranie wszystkich linków ze strony

Wyodrębnia wszystkie adresy URL i wyświetla je w konsoli jako listę. Przyda się do audytu strony lub zbierania danych:

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}`);

Tryb ciemny na dowolnej stronie

Stosuje inwersję kolorów do całej strony, działa nawet tam, gdzie nie ma wbudowanego ciemnego motywu:

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)');

Podświetlenie wszystkich przycisków na stronie

Obrysowuje czerwoną ramką każdy element <button> oraz input[type="submit"], wygodne do sprawdzania układu:

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

Wszystkie te snippety można łączyć i rozbudowywać pod własne zadania. Zapisuje się je raz, a korzysta latami.

⁉️🤔 Często zadawane pytania

Gdzie fizycznie przechowywane są snippety Chrome DevTools?

Snippety są przechowywane w profilu Chrome w pliku Preferences (JSON) w ścieżce %LocalAppData%\Google\Chrome\User Data\Default\Preferences w systemie Windows lub ~/Library/Application Support/Google/Chrome/Default/Preferences na Macu. NIE są synchronizowane przez konto Google, więc przy zmianie komputera lub ponownej instalacji przeglądarki snippety zostaną utracone. Aby przenieść je ręcznie, należy skopiować sekcję devtools.preferences.snippets z jednego pliku Preferences do drugiego, gdy przeglądarka jest zamknięta.

Czym snippet różni się od bookmarkletu?

Bookmarklet to zakładka z adresem URL zaczynającym się od javascript:, ograniczona rozmiarem URL (około 2000 znaków) i niewygodna w edycji. Snippet to pełnoprawny edytor wewnątrz DevTools bez ograniczeń długości, z podświetlaniem składni i zapisywaniem między sesjami. Snippet można również uruchomić skrótem Ctrl+Enter, nie odrywając rąk od klawiatury.

Czy można uruchomić snippet automatycznie podczas ładowania strony?

Bezpośrednio nie. Snippet zawsze wymaga ręcznego uruchomienia. Jeśli potrzebna jest automatyzacja podczas ładowania, należy użyć rozszerzenia Chrome (content script) lub Tampermonkey/Violentmonkey ze skryptami użytkownika: uruchamiają się one przy zdarzeniu załadowania strony i nie wymagają ręcznej interwencji.

Jak zrobić kopię zapasową snippetów przed ponowną instalacją Chrome?

Otwórz DevTools, przejdź do Sources → Snippets, kliknij prawym przyciskiem myszy każdy snippet i wybierz Save as, co zapisze plik .js na dysku. Możesz też otworzyć chrome://version/, znaleźć ścieżkę do profilu, zamknąć Chrome i skopiować z pliku Preferences sekcję JSON devtools.preferences.snippets.

Dlaczego mój snippet nie widzi zmiennych z konsoli?

Snippet wykonuje się we własnym zakresie i nie ma dostępu do zmiennych zadeklarowanych w konsoli przez var/let/const w obszarze globalnym. Aby przekazać dane, przypisz wartość bezpośrednio do window: window.myData = {...} w konsoli, a w snippecie odczytaj window.myData. Lub odwrotnie: snippet może wystawić dane w window, a konsola je odczyta.

Czy warto opanować snippety w 2026 roku?

Snippety to jedno z tych narzędzi, które nie zmieniają się latami, ale radykalnie przyspieszają rutynę, jeśli się o nich nie zapomina. Pięć minut na stworzenie skryptu do zbierania linków lub czyszczenia strony oszczędza dziesiątki ręcznych operacji każdego miesiąca.

Zacznij od trzech prostych snippetów: zbieranie danych z tabel na stronie, szybkie czyszczenie DOM do zrzutów ekranu i podświetlanie elementu po selektorze. Zapisz je, a następnym razem, gdy trzeba będzie wyciągnąć dane z cudzej strony lub sprawdzić układ, poradzisz sobie w kilka sekund, a nie w pół godziny kopiowania i wklejania.

Pamiętaj tylko o kopii zapasowej: snippety nie synchronizują się między urządzeniami i bez kopii pliku Preferences po ponownej instalacji systemu znikną.