Jeśli często powtarzasz ten sam kod w konsoli, rozważ zapisanie go jako fragmentu. Fragmenty mają dostęp do kontekstu JavaScriptu strony. Stanowią one alternatywę dla zakładek.
Fragmenty kodu możesz tworzyć w panelu Źródła i uruchamiać je na dowolnej stronie w trybie incognito.
Na przykład zrzut ekranu poniżej pokazuje stronę główną dokumentacji Narzędzi deweloperskich po lewej stronie oraz fragment kodu źródłowego w panelu Źródła > Fragmenty kodu po prawej stronie.
Oto fragment kodu źródłowego, który rejestruje komunikat i zastępuje treść HTML strony głównej elementem <p> zawierającym komunikat:
console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
Gdy klikniesz przycisk 
Uruchom, pojawi się panel Konsola, w którym wyświetli się komunikat Hello, Snippets! zapisany w pliku dziennika przez fragment kodu, a także zmieni się zawartość strony.
Otwieranie panelu Fragmenty
Okienko Fragmenty zawiera listę Twoich krótkich opisów. Aby edytować fragment kodu, otwórz go na jeden z 2 sposobów:
Kliknij Źródła >
> Fragmenty.
W menu poleceń:
- Naciśnij Control+Shift+P (Windows/Linux) lub Command+Shift+P (Mac), aby otworzyć menu poleceń.
- Zacznij pisać
Snippets, wybierz Pokaż fragmenty i naciśnij Enter.
W panelu Źródła>Fragmenty widoczna jest lista zapisanych fragmentów (pusta w tym przykładzie).
Utwórz rozszerzenia informacji
Fragmenty możesz tworzyć w panelu Fragmenty lub uruchamiając odpowiednie polecenie w Menu poleceń w dowolnym miejscu w DevTools.
Panel Fragmenty kodu sortuje fragmenty kodu w kolejności alfabetycznej.
Tworzenie fragmentu w panelu Źródła
- Otwórz panel Fragmenty.
- Kliknij
Nowy fragment. Wpisz nazwę fragmentu kodu i naciśnij Enter, aby zapisać.
Tworzenie fragmentu w menu poleceń
- Umieść kursor w dowolnym miejscu w Narzędziach deweloperskich.
- Naciśnij Control + Shift + P (Windows/Linux) lub Command + Shift + P (Mac), aby otworzyć menu polecenia.
Zacznij pisać
Snippet, wybierz Utwórz nowy fragment kodu, a następnie naciśnij Enter, aby uruchomić polecenie.
Jeśli chcesz nadać nowemu fragmentowi niestandardową nazwę, zapoznaj się z sekcją Zmienianie nazw fragmentów.
Edytowanie fragmentów
- Otwórz panel Fragmenty.
W panelu Fragmenty kodu kliknij nazwę fragmentu kodu, który chcesz edytować. W panelu Źródła otworzy się on w Edytorze kodu.
Użyj Edytora kodu, aby edytować kod w fragmentie kodu. Gwiazdka obok nazwy fragmentu kodu oznacza, że zmiany nie zostały jeszcze zapisane.
Aby zapisać, naciśnij Control + S (Windows/Linux) lub Command + S (Mac).
Uruchom fragmenty
Podobnie jak w przypadku tworzenia fragmentu kodu, możesz go uruchomić zarówno w panelu Fragmenty kodu, jak i z poziomu menu poleceń.
Uruchamianie fragmentu kodu w panelu Źródła
- Otwórz panel Fragmenty.
- Kliknij nazwę fragmentu, który chcesz uruchomić. W panelu Źródła otworzy się on w Edytorze kodu.
Kliknij
Uruchom na pasku czynności u dołu edytora lub naciśnij Control + Enter (Windows/Linux) albo Command + Enter (Mac).
Uruchamianie fragmentu kodu z menu poleceń
- Umieść kursor w dowolnym miejscu w Narzędziach deweloperskich.
- Naciśnij Control+O (Windows/Linux) lub Command+O (Mac), aby otworzyć menu poleceń.
Wpisz znak
!, a potem nazwę fragmentu kodu, który chcesz uruchomić.
Aby uruchomić fragment kodu, naciśnij Enter.
Zmienianie nazw fragmentów
- Otwórz panel Fragmenty.
- Kliknij prawym przyciskiem myszy nazwę fragmentu kodu i wybierz Zmień nazwę.
Usuwanie fragmentów
- Otwórz panel Fragmenty.
- Kliknij prawym przyciskiem myszy nazwę fragmentu i wybierz Usuń.