Voer fragmenten van JavaScript uit

Sofia Emelianova
Sofia Emelianova

Als u merkt dat u dezelfde code herhaaldelijk in de console uitvoert, kunt u overwegen de code als fragment op te slaan. Fragmenten hebben toegang tot de JavaScript-context van de pagina. Ze zijn een alternatief voor bookmarklets .

U kunt fragmenten schrijven in het deelvenster Bronnen en deze op elke pagina en in de incognitomodus uitvoeren.

De onderstaande schermafbeelding toont bijvoorbeeld de startpagina van de DevTools-documentatie aan de linkerkant en een fragment van de broncode in het deelvenster Bronnen > Fragmenten aan de rechterkant.

De startpagina van de DevTools-documentatie voordat u het fragment uitvoert. De knop Uitvoeren is gemarkeerd.

Hier is de broncode van het fragment die een bericht registreert en de HTML-tekst van de startpagina vervangt door een <p> -element dat het bericht bevat:

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

Wanneer u op de Loop. Als u op de knop Uitvoeren klikt , verschijnt de consolelade met de Hello, Snippets! bericht dat het fragment wordt geregistreerd en dat de inhoud van de pagina verandert.

De startpagina nadat het fragment is uitgevoerd.

Open het deelvenster Fragmenten

In het deelvenster Fragmenten worden uw fragmenten vermeld. Als u een fragment wilt bewerken, opent u het op twee manieren:

  1. Navigeer naar Bronnen > Meer tabbladen. > Fragmenten .

    Het menu Meer tabbladen in het deelvenster Bronnen.

  2. Vanuit het Commandomenu :

    1. Druk op Control + Shift + P (Windows/Linux) of Command + Shift + P (Mac) om het Commandomenu te openen.
    2. Begin met het typen van Snippets , selecteer Fragmenten weergeven en druk op Enter .

    Selecteer Show Fragmenten in het Commandomenu.

In het deelvenster Bronnen > Fragmenten ziet u een lijst met fragmenten die u hebt opgeslagen, in dit voorbeeld leeg.

Een leeg deelvenster Fragmenten.

Maak fragmenten

U kunt fragmenten maken in het deelvenster Fragmenten of door de overeenkomstige opdracht vanuit het Commandomenu ergens in DevTools uit te voeren.

In het deelvenster Fragmenten worden uw fragmenten in alfabetische volgorde gesorteerd.

Maak een fragment in het deelvenster Bronnen

  1. Open het deelvenster Fragmenten .
  2. Klik Nieuw fragment. Nieuw fragment .
  3. Voer een naam in voor uw fragment en druk op Enter om op te slaan.

    Een fragment een naam geven.

Maak een fragment vanuit het Commandomenu

  1. Richt uw cursor ergens binnen DevTools.
  2. Druk op Control + Shift + P (Windows/Linux) of Command + Shift + P (Mac) om het Commandomenu te openen.
  3. Begin met het typen van Snippet , selecteer Nieuw fragment maken en druk vervolgens op Enter om de opdracht uit te voeren.

    Selecteer Nieuw fragment maken in het Commandomenu.

Zie Fragmenten hernoemen als u uw nieuwe fragment een aangepaste naam wilt geven.

Fragmenten bewerken

  1. Open het deelvenster Fragmenten .
  2. Klik in het deelvenster Fragmenten op de naam van het fragment dat u wilt bewerken. Het Bronnenpaneel opent het in de Code-editor .

    Een fragment geopend in de Code-editor.

  3. Gebruik de Code-editor om code in uw fragment te bewerken. Een asterisk naast de fragmentnaam betekent dat u uw wijzigingen nog niet heeft opgeslagen.

    Een sterretje naast de fragmentnaam die niet-opgeslagen code aangeeft.

  4. Druk op Control + S (Windows/Linux) of Command + S (Mac) om op te slaan.

Voer fragmenten uit

Net als bij het maken van een fragment, kunt u dit zowel in het deelvenster Fragmenten als vanuit het Commandomenu uitvoeren.

Voer een fragment uit in het paneel Bronnen

  1. Open het deelvenster Fragmenten .
  2. Klik op de naam van het fragment dat u wilt uitvoeren. Het Bronnenpaneel opent het in de Code-editor .
  3. Klik Loop. Voer dit uit in de actiebalk onder aan de editor, of druk op Control + Enter (Windows/Linux) of Command + Enter (Mac).

    De knop Uitvoeren.

Voer een fragment uit vanuit het Commandomenu

  1. Richt uw cursor ergens binnen DevTools.
  2. Druk op Control + O (Windows/Linux) of Command + O (Mac) om het Commandomenu te openen.
  3. Typ de ! teken gevolgd door de naam van het fragment dat u wilt uitvoeren.

    Een fragment uitvoeren vanuit het Open Menu.

  4. Druk op Enter om het fragment uit te voeren.

Hernoem fragmenten

  1. Open het deelvenster Fragmenten .
  2. Klik met de rechtermuisknop op de naam van het fragment en selecteer Naam wijzigen .

Verwijder fragmenten

  1. Open het deelvenster Fragmenten .
  2. Klik met de rechtermuisknop op de naam van het fragment en selecteer Verwijderen .