Uruchamianie fragmentów kodu JavaScript

Kayce Basques

Sofia Emelianova

Jeśli zauważysz, że ten sam kod jest wielokrotnie uruchamiany w Konsoli, zastanów się nad zapisaniem go jako fragmentu kodu. Fragmenty mają dostęp do kontekstu JavaScriptu strony. Są one alternatywą dla zakładek.

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

Na przykład na poniższym zrzucie ekranu po lewej stronie widać stronę główną dokumentacji Narzędzi deweloperskich, a po prawej fragment kodu źródłowego w panelu Źródła > Fragmenty kodu.

Oto kod źródłowy fragmentu kodu, który rejestruje pewną wiadomość i zastępuje element HTML strony głównej <p> elementem zawierającym wiadomość:

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

Na panelu Fragmenty znajdziesz listę swoich fragmentów. Aby edytować fragment kodu, otwórz go na jeden z 2 sposobów:

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

   

2. W menu poleceń:

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

   

Na karcie Źródła> Fragmenty kodu znajdziesz listę zapisanych fragmentów kodu. W tym przykładzie lista jest pusta.

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

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

3. Wpisz nazwę fragmentu kodu i naciśnij Enter, aby zapisać.

   

Tworzenie fragmentu w menu poleceń

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

3. Zacznij wpisywać 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

1. Otwórz panel Fragmenty.

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

   

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

   

4. 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 menu poleceń.

Uruchamianie fragmentu kodu w panelu Źródła

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

3. 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ń

1. Umieść 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 potem nazwę fragmentu kodu, który chcesz uruchomić.

   

4. Aby uruchomić fragment kodu, naciśnij Enter.

Zmienianie nazw fragmentów

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

Usuwanie fragmentów

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