JavaScript-fragmenten uitvoeren

Kayce Basques

Sofia Emelianova

Als je dezelfde code herhaaldelijk uitvoert in de Console, kun je de code beter opslaan als fragment. Fragmenten hebben toegang tot de JavaScript-context van de pagina. Ze zijn een alternatief voor bookmarklets.

Je kunt fragmenten maken in het deelvenster Bronnen en ze uitvoeren op elke pagina en in de incognitomodus.

In het screenshot hieronder zie je bijvoorbeeld links de homepage van de DevTools-documentatie en rechts een broncode van een fragment in het deelvenster Bronnen > Fragmenten.

Hier is de broncode van het fragment die een bericht registreert en de HTML-hoofdtekst van de homepage 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);

Als je op de knop Uitvoeren klikt, verschijnt de lade Console met het bericht Hello, Snippets! dat het fragment registreert en de content van de pagina verandert.

Het deelvenster Fragmenten openen

In het deelvenster Fragmenten staan je fragmenten. Als je een fragment wilt bewerken, open je het op een van de volgende 2 manieren:

1. Ga naar Bronnen > > Fragmenten.

   

2. Via het opdrachtmenu:

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

   

In het deelvenster Bronnen>Fragmenten staat een lijst met fragmenten die u heeft opgeslagen. In dit voorbeeld is deze lijst leeg.

Fragmenten maken

Je kunt fragmenten maken in het deelvenster Fragmenten of door de bijbehorende opdracht uit te voeren vanuit het Opdrachtmenu, overal in DevTools.

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

Een fragment maken in het deelvenster Bronnen

1. Open het deelvenster Fragmenten.
2. Klik op Nieuw fragment.

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

   

Een fragment maken via het opdrachtmenu

1. Plaats de cursor ergens in DevTools.
2. Druk op Ctrl+Shift+P (Windows/Linux) of Command+Shift+P (Mac) om het opdrachtmenu te openen.

3. Begin met typen Snippet, selecteer Nieuw fragment maken en druk op Enter om de opdracht uit te voeren.

   

Ga naar De naam van fragmenten wijzigen als je je 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 deelvenster Bronnen opent het in de Code-editor.

   

3. Gebruik de code-editor om de code in uw fragment te bewerken. Een asterisk naast de naam van het fragment betekent dat je je wijzigingen nog niet hebt opgeslagen.

   

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

Fragmenten uitvoeren

Net als bij het maken van een fragment kun je het uitvoeren in het deelvenster Fragmenten en via het opdrachtmenu.

Een fragment uitvoeren in het deelvenster Bronnen

1. Open het deelvenster Fragmenten.
2. Klik op de naam van het fragment dat je wilt uitvoeren. Het deelvenster Bronnen opent het in de Code-editor.

3. Klik op Uitvoeren in de actiebalk onderaan de editor of druk op Ctrl+Enter (Windows/Linux) of Command+Enter (Mac).

   

Een fragment uitvoeren vanuit het opdrachtmenu

1. Plaats de cursor ergens in DevTools.
2. Druk op Control+O (Windows/Linux) of Command+O (Mac) om het opdrachtmenu te openen.

3. Typ het teken !, gevolgd door de naam van het fragment dat je wilt uitvoeren.

   

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

Naam van fragmenten wijzigen

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

Fragmenten verwijderen

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