Uruchamianie fragmentów kodu JavaScript

Jeśli często używasz tego samego kodu w Konsoli, rozważ zapisanie go jako fragmentu. Fragmenty mają dostęp do kontekstu JavaScriptu strony. Stanowią alternatywę dla bookmarkletów.

Możesz tworzyć fragmenty kodu w panelu Źródła i uruchamiać je na dowolnej stronie oraz w trybie incognito.

Na przykład zrzut ekranu poniżej przedstawia po lewej stronie stronę główną dokumentacji Narzędzi dla programistów oraz fragment kodu źródłowego w panelu Źródła > Fragmenty po prawej.

Oto fragment kodu źródłowego, który rejestruje komunikat i zastępuje treść HTML strony głównej elementem <p> zawierającym wiadomość:

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

Po kliknięciu przycisku Uruchom wyświetli się szuflada konsoli. Pojawi się komunikat Hello, Snippets!, że fragment zostaje zarejestrowany i zmienia się treść strony.

Otwórz panel Fragmenty

Fragmenty pojawią się w panelu Fragmenty. Aby edytować fragment kodu, otwórz go na jeden z dwóch sposobów:

1. Kliknij Źródła > > Fragmenty.

   

2. W menu poleceń:

   1. Naciśnij Control+Shift+P (Windows/Linux) lub Command+Shift+P (Mac), by otworzyć menu poleceń.
   2. Zacznij pisać Snippets, wybierz Pokaż fragmenty i naciśnij Enter.

   

W panelu Źródła>Fragmenty znajduje się lista zapisanych fragmentów, pusta w tym przykładzie.

Utwórz rozszerzenia informacji

Fragmenty kodu możesz tworzyć w panelu Fragmenty lub przez uruchomienie odpowiedniego polecenia z menu poleceń w dowolnym miejscu w Narzędziach deweloperskich.

Okienko Fragmenty umożliwia sortowanie fragmentów w kolejności alfabetycznej.

Tworzenie fragmentu kodu w panelu Źródła

1. Otwórz panel Fragmenty.
2. Kliknij Nowy fragment.

3. Wpisz nazwę fragmentu i naciśnij Enter, by go zapisać.

   

Tworzenie fragmentu kodu w menu poleceń

1. Ustaw kursor w dowolnym miejscu w Narzędziach deweloperskich.
2. Naciśnij Control+Shift+P (Windows/Linux) lub Command+Shift+P (Mac), by otworzyć menu poleceń.

3. Zacznij wpisywać Snippet, wybierz Utwórz nowy fragment i naciśnij Enter, aby uruchomić polecenie.

   

Jeśli chcesz nadać nowemu fragmentowi nazwę niestandardową, przeczytaj artykuł Zmienianie nazw fragmentów.

Edytowanie fragmentów

1. Otwórz panel Fragmenty.

2. W panelu Fragmenty kliknij nazwę fragmentu, który chcesz edytować. Otworzy się on w edytorze kodu panel Źródła.

   

3. Użyj edytora kodu, aby edytować kod we fragmencie. Gwiazdka obok nazwy fragmentu oznacza, że zmiany nie zostały jeszcze zapisane.

   

4. Aby zapisać zmiany, naciśnij Control + S (Windows/Linux) lub Command + S (Mac).

Uruchom fragmenty kodu

Podobnie jak fragment kodu, fragment możesz uruchomić zarówno w panelu Fragmenty, jak i w menu poleceń.

Uruchamianie fragmentu kodu w panelu Źródła

1. Otwórz panel Fragmenty.
2. Kliknij nazwę fragmentu, który chcesz uruchomić. Otworzy się on w edytorze kodu panel Źródła.

3. Kliknij Uruchom na pasku działań u dołu edytora lub naciśnij Control+Enter (Windows/Linux) lub Command+Enter (Mac).

   

Uruchom fragment kodu z menu poleceń

1. Ustaw kursor w dowolnym miejscu w Narzędziach deweloperskich.
2. Naciśnij Control+O (Windows/Linux) lub Command+O (Mac), aby otworzyć menu poleceń.

3. Wpisz znak !, a po nim nazwę fragmentu, który chcesz uruchomić.

   

4. Naciśnij Enter, by uruchomić fragment kodu.

Zmień nazwy fragmentów

1. Otwórz panel Fragmenty.
2. Kliknij prawym przyciskiem myszy nazwę fragmentu i wybierz Zmień nazwę.

Usuń fragmenty kodu

1. Otwórz panel Fragmenty.
2. Kliknij prawym przyciskiem myszy nazwę fragmentu i wybierz Usuń.