Werkruimtes instellen om wijzigingen in bronbestanden op te slaan

Kayce Basques

Sofia Emelianova

Sla wijzigingen die je aanbrengt in DevTools weer op in bronbestanden op je computer door een werkruimte in te stellen. Je kunt een werkruimtemap automatisch aan DevTools koppelen door een configuratiebestand te leveren of je kunt handmatig een werkruimtelocatie toevoegen in het deelvenster Bronnen.

Overzicht

Met een automatische (of handmatige) verbinding met een werkruimtemap kun je een wijziging die je in DevTools aanbrengt, opslaan in een lokale kopie van hetzelfde bestand op je computer. Stel dat:

• Je hebt de broncode voor je site op je desktop.
• Je voert een lokale webserver uit vanuit de directory met de broncode, zodat de site toegankelijk is op localhost:PORT en ook een eenvoudig json-bestand met metadata levert (later beschreven).
• Je hebt localhost:PORT geopend in Google Chrome en je gebruikt DevTools om de CSS van de site te wijzigen.

Als er een werkruimtemap is gekoppeld, worden de wijzigingen die je in het deelvenster Bronnen aanbrengt in CSS-, HTML- en JavaScript-bestanden, opgeslagen in de broncode op je computer. DevTools slaat wijzigingen in het DOM die je aanbrengt in het deelvenster Elementen niet op.

Bovendien kan DevTools de geoptimaliseerde code meestal terugtoewijzen aan je oorspronkelijke broncode met behulp van bronkaarten.

Metadata voor een verbinding genereren

Als je wilt dat DevTools je werkruimtemap automatisch ontdekt, genereer je een willekeurige versie 4 UUID en plaats je deze in het volgende json-bestand:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Plaats het json-bestand daarna in path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Voer tot slot je lokale HTTP-server uit en zorg dat je het json-bestand ook uitvoert.

Je kunt deze stap ook overslaan en handmatig een mapverbinding instellen.

Een werkruimtemap koppelen

Opmerking: In deze en de volgende stappen wordt de demo Automatische Workspace-mappen gebruikt om de functie te tonen.

Zo koppelt u een map:

1. Ga in Chrome naar je lokaal gehoste pagina (in dit voorbeeld op localhost:8000) en open DevTools.

2. Ga naar Bronnen > Workspace en klik op Koppelen naast de map.

   

3. Klik als hierom wordt gevraagd op Bestanden bewerken om DevTools toegang te geven tot je map.

   

4. Nadat je de map hebt gekoppeld, kun je deze openen op het tabblad Werkruimtes.

   

Op het tabblad Werkruimte staat een groene stip naast HTML-, CSS- en JavaScript-bestanden. Deze groene stippen betekenen dat DevTools een toewijzing heeft gemaakt tussen de netwerkbronnen van de pagina en de bestanden in de map.

Een wijziging opslaan in de bronmap

U kunt wijzigingen opslaan in css-, html- en JavaScript-bestanden in de gekoppelde werkruimtemap.

Wijzigingen in CSS opslaan

Tip: Met een gekoppelde werkruimtemap kan het deelvenster AI-assistentie CSS-wijzigingen automatisch opslaan in je bronnen.

Zo slaat u wijzigingen in CSS op:

1. Open een CSS-bestand vanuit de gekoppelde werkruimtemap in Bronnen > Werkruimten.

2. Breng een wijziging aan in uw CSS.

   Opmerking: Een wijziging is van toepassing op de live pagina, maar nog niet op de bron.

3. Sla de wijziging op, bijvoorbeeld door op Ctrl / Cmd + S te drukken. De toegepaste wijziging wordt nu weergegeven in je bronbestand. In het deelvenster Bronnen staat een groene stip naast de bestandsnaam.

   Opmerking: U hoeft de pagina niet opnieuw te laden om CSS-wijzigingen toe te passen en op te slaan.

Bekijk de video voor meer informatie over de workflow:

Wijzigingen in HTML opslaan

Zo sla je wijzigingen in de HTML op:

1. Open een HTML-bestand vanuit de gekoppelde werkruimtemap in Bronnen > Werkruimten.

2. Breng een wijziging aan in je HTML.

   Opmerking: Een wijziging is nog niet van toepassing op de live pagina of de bron.

3. Sla de wijziging op, bijvoorbeeld door op Ctrl / Cmd + S te drukken. De toegepaste wijziging wordt nu weergegeven in je bronbestand. In het deelvenster Bronnen staat een groene stip naast de bestandsnaam.

4. Laad de pagina opnieuw om de wijziging door te voeren.

Bekijk de video voor meer informatie over de workflow:

Opmerking: Je kunt een HTML-wijziging toepassen en opslaan via het deelvenster Bronnen, maar niet via het deelvenster Elementen.

Waarom kun je de HTML niet wijzigen via het deelvenster Elementen?

• De boomstructuur van nodes die je in het deelvenster Elementen ziet, vertegenwoordigt het DOM van de pagina.
• Een browser haalt HTML op via het netwerk, parseert de HTML en zet deze om in een boomstructuur van DOM-nodes om een pagina weer te geven.
• Als de pagina JavaScript bevat, kan die JavaScript DOM-nodes toevoegen, verwijderen of wijzigen. CSS kan het DOM ook wijzigen met de eigenschap content.
• De browser gebruikt het DOM uiteindelijk om te bepalen welke content aan browsergebruikers moet worden getoond.
• Daarom kan de uiteindelijke status van de pagina die gebruikers zien, sterk verschillen van de HTML die de browser heeft opgehaald.
• Hierdoor is het voor DevTools moeilijk om te bepalen waar een wijziging in het deelvenster Elementen moet worden opgeslagen, omdat de DOM wordt beïnvloed door HTML, JavaScript en CSS.

Kort gezegd is de DOM-boomstructuur !== HTML.

Wijzigingen in JavaScript opslaan

Zo sla je wijzigingen in JavaScript op:

1. Open een JavaScript-bestand vanuit de map van je gekoppelde werkruimte in Bronnen > Werkruimten.

2. Breng een wijziging aan in je JavaScript.

   Opmerking: Een wijziging is nog niet van toepassing op de live pagina of de bron.

3. Sla de wijziging op, bijvoorbeeld door op Ctrl / Cmd + S te drukken. De toegepaste wijziging wordt nu weergegeven in je bronbestand. In het deelvenster Bronnen staat een groene stip naast de bestandsnaam.

4. Als je lokale HTTP-server luistert naar wijzigingen in live bronbestanden en de pagina automatisch opnieuw laadt, zie je de wijzigingen toegepast zodra je ze opslaat in DevTools. Anders implementeer je je lokale server opnieuw.

Bekijk de video voor meer informatie over de workflow:

Tip: Als je JavaScript wijzigt, moet je soms andere deelvensters openen, zoals het deelvenster Elementen of Console. Hiervoor kun je de lade gebruiken en deelvensters opnieuw ordenen.

Een koppeling met een werkruimtemap verwijderen

Als je een verbinding met een werkruimtemap wilt verwijderen, klik je in Bronnen > Werkruimte met de rechtermuisknop op de map, selecteer je Verwijderen uit werkruimte in het dropdownmenu en klik je op Verwijderen.

Opmerking: Als je de UUID van de map wijzigt of verwijdert in het JSON-bestand met metadata, wordt de map ook ontkoppeld.

Handmatig een werkruimtemap koppelen

1. Open DevTools op uw lokaal gehoste pagina.

2. Klik in Bronnen > Werkruimte op Map handmatig toevoegen. Selecteer daarna een map met je bronbestanden.

   

   Opmerking: Je kunt de map ook naar het deelvenster Bronnen slepen.

3. Volg daarna stap 3 en 4 in Een Workspace-map koppelen.

Beperkingen

Als je een modern framework gebruikt, wordt je broncode waarschijnlijk omgezet van een indeling die je makkelijk kunt onderhouden naar een indeling die is geoptimaliseerd om zo snel mogelijk te worden uitgevoerd. Een verbinding met een werkruimtemap kan de geoptimaliseerde code meestal terugtoewijzen aan de oorspronkelijke broncode met behulp van bronkaarten.

De DevTools-community werkt aan ondersteuning van de mogelijkheden van bronkaarten in verschillende frameworks en tools. Als je problemen ondervindt bij het gebruik van een werkruimte met het framework van je keuze of als je het na een aangepaste configuratie aan de praat krijgt, start je een gesprek in de mailinglijst of stel je een vraag op Stack Overflow om je kennis te delen met de rest van de DevTools-community.

Volgende stappen

Je kunt alle al ingestelde mappen beheren via Instellingen > Werkruimte.

Leer daarna hoe je DevTools gebruikt om css te wijzigen en JavaScript te debuggen.

Zie ook

Lokale overschrijvingen is een andere DevTools-functie die vergelijkbaar is en waarmee je webcontent of verzoekheaders kunt nabootsen. Zo kun je vrij experimenteren met wijzigingen op een pagina zonder te wachten tot de backend is bijgewerkt. Met lokale overschrijvingen blijven de wijzigingen behouden wanneer de pagina wordt geladen, maar worden ze niet toegewezen aan de broncode van uw pagina.