Uruchamianie fragmentów kodu JavaScript

Sofia Emelianova
Sofia Emelianova

Jeśli często powtarzasz ten sam kod w konsoli, rozważ zapisanie go jako fragmentu. Fragmenty mają dostęp do kontekstu JavaScript strony. Są 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 ten zrzut ekranu przedstawia po lewej stronie stronę główną dokumentacji Narzędzi deweloperskich i fragment kodu źródłowego w panelu Źródła > Fragmenty po prawej.

Strona główna dokumentacji Narzędzi deweloperskich przed uruchomieniem fragmentu. Wyróżniony jest przycisk Uruchom.

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

Po kliknięciu przycisku Uruchom. Uruchom pojawi się szuflada Konsola z komunikatem Hello, Snippets! zarejestrowanym przez fragment kodu i o zmianie treści strony.

Strona główna po uruchomieniu fragmentu.

Otwórz panel Fragmenty tekstu

Okienko Fragmenty zawiera listę Twoich krótkich opisów. Aby edytować fragment kodu, otwórz go na jeden z dwóch sposobów:

  1. Kliknij Źródła > Więcej kart. > Fragmenty.

    Menu Więcej kart w panelu Źródła.

  2. W menu poleceń:

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

    wybierając opcję Pokaż fragmenty w menu poleceń.

W panelu Źródła>Fragmenty widoczna jest lista zapisanych fragmentów (pusta w tym przykładzie).

Pusty panel krótkich opisów.

Utwórz rozszerzenia informacji

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

Okienko Fragmenty sortuje krótkie opisy w kolejności alfabetycznej.

Tworzenie fragmentu kodu w panelu Źródła

  1. Otwórz panel Fragmenty.
  2. Kliknij Nowy fragment kodu. Nowy fragment.
  3. Wpisz nazwę fragmentu i naciśnij Enter, by go zapisać.

    Nadanie nazwy fragmentowi kodu.

Tworzenie fragmentu kodu 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 poleceń.
  3. Zacznij pisać Snippet, wybierz Utwórz nowy fragment kodu, a następnie naciśnij Enter, aby uruchomić polecenie.

    Wybierz Utwórz nowy fragment w menu poleceń.

Jeśli chcesz nadać nowemu fragmentowi niestandardową nazwę, zapoznaj się z sekcją Zmienianie nazw krótkich opisów.

Edytowanie fragmentów

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

    Otwarto fragment kodu w edytorze kodu.

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

    Gwiazdka obok nazwy fragmentu oznaczająca niezapisany kod.

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

Fragmenty uruchamiania

Podobnie jak w przypadku tworzenia fragmentu kodu, możesz go 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ę panel Źródła w edytorze kodu.
  3. Na pasku działań u dołu edytora kliknij Uruchom. Uruchom albo naciśnij Control+Enter (Windows/Linux) lub Command+Enter (Mac).

    Przycisk Uruchom.

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 Command.
  3. Wpisz znak !, a po nim nazwę fragmentu, który chcesz uruchomić.

    Uruchamiam fragment kodu z menu Otwórz.

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

Zmień nazwy fragmentów

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

Usuwanie fragmentów

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