Voer fragmenten van JavaScript uit

Kayce Basques

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.

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 Als u op de knop Uitvoeren klikt , verschijnt de consolelade met de tekst Hello, Snippets! bericht dat het fragment wordt geregistreerd en dat de inhoud van de pagina verandert.

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 > > Fragmenten .

   

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 .

   

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

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 .

3. Voer een naam in voor uw fragment en druk op Enter om op te slaan.

   

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.

   

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 .

   

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.

   

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 Voer dit uit in de actiebalk onder aan de editor, of druk op Control + Enter (Windows/Linux) of Command + Enter (Mac).

   

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 ! teken gevolgd door de naam van het fragment dat u wilt uitvoeren.

   

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 .