Bewerk en bewaar bestanden in een werkruimte

Kayce Basques

Sofia Emelianova

Deze tutorial biedt een kans om te oefenen door een werkruimte in te richten, zodat u deze in uw eigen projecten kunt gebruiken. Met Workspace kunt u wijzigingen die u binnen DevTools aanbrengt, opslaan in de broncode die op uw computer is opgeslagen.

Let op: Voordat u met deze zelfstudie begint, moet u weten hoe u:

• Gebruik HTML, CSS en JavaScript om een ​​webpagina te bouwen .
• Gebruik DevTools om basiswijzigingen in CSS aan te brengen .
• Voer een lokale HTTP-webserver uit .

Overzicht

Met Workspace kunt u een wijziging die u in DevTools aanbrengt, opslaan in een lokale kopie van hetzelfde bestand op uw computer. Stel bijvoorbeeld:

• U hebt de broncode voor uw site op uw bureaublad staan.
• U gebruikt een lokale webserver vanuit de broncodedirectory, zodat de site toegankelijk is op localhost:8080 .
• Je hebt localhost:8080 geopend in Google Chrome en je gebruikt DevTools om de CSS van de site te wijzigen.

Als de werkruimte is ingeschakeld, worden de CSS-wijzigingen die u binnen DevTools aanbrengt, opgeslagen in de broncode op uw bureaublad.

Beperkingen

Als u een modern raamwerk gebruikt, wordt uw broncode waarschijnlijk getransformeerd van een indeling die u gemakkelijk kunt onderhouden naar een indeling die is geoptimaliseerd om zo snel mogelijk te worden uitgevoerd. Workspace is meestal in staat om de geoptimaliseerde code terug te koppelen naar uw originele broncode met behulp van bronkaarten .

De DevTools-gemeenschap werkt aan de ondersteuning van de mogelijkheden van bronkaarten in een verscheidenheid aan frameworks en tools . Als je problemen tegenkomt bij het gebruik van een werkruimte met het raamwerk van je keuze, of als je het werkend krijgt na een aangepaste configuratie, start dan een thread in de mailinglijst of stel een vraag op Stack Overflow om je kennis te delen met de rest van de DevTools-gemeenschap .

Gerelateerde functie: Lokale overschrijvingen

Lokale overschrijvingen is een andere DevTools-functie die vergelijkbaar is met de werkruimte. Gebruik lokale overschrijvingen om webinhoud te imiteren of kopteksten aan te vragen zonder te wachten op wijzigingen in de backend of wanneer u wilt experimenteren met wijzigingen op een pagina en u deze wijzigingen wilt zien tijdens het laden van pagina's, maar het u niet uitmaakt om uw wijzigingen aan de pagina toe te wijzen broncode van de pagina.

Stap 1: Installatie

Voltooi deze tutorial om praktijkervaring op te doen met een werkruimte.

Zet de demo op

1. Kloon deze demo-repository naar een map op uw computer. Bijvoorbeeld naar ~/Desktop .

2. Start een lokale webserver in ~/Desktop/devtools-workspace-demo . Hieronder vindt u enkele voorbeeldcode voor het opstarten van SimpleHTTPServer , maar u kunt elke gewenste server gebruiken.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   In de rest van deze zelfstudie wordt naar deze map verwezen als /devtools-workspace-demo .

3. Open een tabblad in Google Chrome en ga naar de lokaal gehoste versie van de site. Je zou er toegang toe moeten hebben via een URL zoals localhost:8000 . Het exacte poortnummer kan afwijken.

   

DevTools instellen

1. Open DevTools op de lokaal gehoste demopagina.

2. Navigeer naar Bronnen > Werkruimte en stel een werkruimte in in de map devtools-workspace-demo die u hebt gekloond. Dat kun je op verschillende manieren doen:

   • Sleep de map naar de Editor in Bronnen .
   • Klik op de link Map selecteren en selecteer de map.
   • Klik Voeg map toe en selecteer de map.

3. Klik in de prompt bovenaan op Toestaan ​​om DevTools toestemming te geven om de map te lezen en ernaar te schrijven.

   

Op het tabblad Werkruimte staat nu een groene stip naast index.html , script.js en styles.css . Deze groene stippen betekenen dat DevTools een mapping heeft gemaakt tussen de netwerkbronnen van de pagina en de bestanden in devtools-workspace-demo .

Stap 2: Sla een CSS-wijziging op schijf op

1. Open /devtools-workspace-demo/styles.css in een teksteditor. Merk op hoe de color van h1 elementen is ingesteld op fuchsia .

   

2. Sluit de teksteditor.

3. Terug in DevTools klikt u op het tabblad Elementen .

4. Wijzig de waarde van de color van het <h1> -element in uw favoriete kleur. Om dit te doen:

   1. Klik op het <h1> -element in de DOM-structuur .
   2. Zoek in het deelvenster Stijlen de CSS-regel h1 { color: fuchsia } en wijzig de kleur in uw favoriet. In dit voorbeeld is de kleur ingesteld op groen.

   

   De groene stip naast styles.css:1 in het deelvenster Stijlen betekent dat elke wijziging die u aanbrengt, wordt toegewezen aan /devtools-workspace-demo/styles.css .

5. Open /devtools-workspace-demo/styles.css opnieuw in een teksteditor. De color is nu ingesteld op uw favoriete kleur.

6. Laad de pagina opnieuw. De kleur van het <h1> -element is nog steeds ingesteld op uw favoriete kleur. Dit werkt omdat wanneer u de wijziging hebt aangebracht en DevTools de wijziging op schijf heeft opgeslagen. En toen u de pagina opnieuw laadde, serveerde uw lokale server de gewijzigde kopie van het bestand vanaf schijf.

Stap 3: Sla een HTML-wijziging op schijf op

Probeer de HTML te wijzigen vanuit het Elementenpaneel

Waarschuwing: de workflow die u gaat proberen, werkt niet. Je probeert het nu, zodat je later geen tijd verspilt met uitzoeken waarom het niet werkt.

1. Open het tabblad Elementen .

2. Dubbelklik op de tekstinhoud van het h1 element, met de tekst Workspaces Demo , en vervang deze door I ❤️ Cake .

   

3. Open /devtools-workspace-demo/index.html in een teksteditor. De wijziging die u zojuist heeft aangebracht, is er niet.

4. Laad de pagina opnieuw. De pagina keert terug naar de oorspronkelijke titel.

Optioneel: Waarom het niet werkt

Opmerking: in dit gedeelte wordt beschreven waarom de workflow van HTML wijzigen in het paneel Elementen niet werkt. Je kunt dit gedeelte overslaan als het je niet uitmaakt waarom.

• De boom met knooppunten die u in het paneel Elementen ziet, vertegenwoordigt de DOM van de pagina.
• Om een ​​pagina weer te geven, haalt een browser HTML op via het netwerk, parseert de HTML en converteert deze vervolgens naar een boom met DOM-knooppunten.
• Als de pagina JavaScript bevat, kan dat JavaScript DOM-knooppunten toevoegen, verwijderen of wijzigen. CSS kan de DOM ook wijzigen via de content eigenschap.
• De browser gebruikt uiteindelijk de DOM om te bepalen welke inhoud hij aan browsergebruikers moet presenteren.
• Daarom kan de uiteindelijke status van de pagina die gebruikers zien, heel anders zijn dan de HTML die de browser heeft opgehaald.
• Dit maakt het moeilijk voor DevTools om te bepalen waar een wijziging in het Elementen -paneel moet worden opgeslagen, omdat de DOM wordt beïnvloed door HTML, JavaScript en CSS.

Kortom, de DOM-boom !== HTML.

Wijzig HTML vanuit het paneel Bronnen

Als u een wijziging in de HTML van de pagina wilt opslaan, doet u dit in het paneel Bronnen .

1. Navigeer naar Bronnen > Pagina .
2. Klik op (indexeren) . De HTML voor de pagina wordt geopend.
3. Vervang <h1>Workspaces Demo</h1> door <h1>I ❤️ Cake</h1> .
4. Druk op Command + S (Mac) of Control + S (Windows, Linux, ChromeOS) om de wijziging op te slaan.

5. Laad de pagina opnieuw. Het <h1> -element geeft nog steeds de nieuwe tekst weer.

   

6. Open /devtools-workspace-demo/index.html . Het <h1> -element bevat de nieuwe tekst.

Stap 4: Sla een JavaScript-wijziging op schijf op

Het Bronnenpaneel is ook de plaats waar u wijzigingen in JavaScript kunt aanbrengen. Maar soms moet u andere panelen openen, zoals het Elementenpaneel of het Consolepaneel , terwijl u wijzigingen aanbrengt op uw site. Er is een manier om het paneel Bronnen naast andere panelen te openen.

1. Open het tabblad Elementen .
2. Druk op Command + Shift + P (Mac) of Control + Shift + P (Windows, Linux, ChromeOS). Het Commandomenu wordt geopend.

3. Typ QS en selecteer vervolgens Snelle bron weergeven . Onderaan uw DevTools-venster bevindt zich nu een tabblad Snelle bron .

   

   Op het tabblad wordt de inhoud van index.html weergegeven, het laatste bestand dat u in het paneel Bronnen hebt bewerkt. Op het tabblad Snelle bron vindt u de editor van het paneel Bronnen , zodat u bestanden kunt bewerken terwijl andere panelen geopend zijn.

4. Druk op Command + P (Mac) of Control + P (Windows, Linux, ChromeOS) om het dialoogvenster Bestand openen te openen.

5. Typ script en selecteer vervolgens devtools-workspace-demo/script.js .

   

6. Let op de link Edit and save files in a workspace in de demo. Het wordt regelmatig gestyled.

7. Voeg de volgende code toe aan de onderkant van script.js op het tabblad Snelle bron .

   document.querySelector('a').style = 'font-style:italic';
   

8. Druk op Command + S (Mac) of Control + S (Windows, Linux, ChromeOS) om de wijziging op te slaan.

9. Laad de pagina opnieuw. De link op de pagina is nu cursief.

Volgende stappen

Succes: gefeliciteerd! U weet nu hoe u de wijzigingen die u in DevTools aanbrengt op uw lokaal gehoste website, in bronnen kunt opslaan.

U kunt meerdere mappen in een werkruimte instellen. Al dergelijke mappen worden vermeld in Instellingen > Werkruimte .

Leer vervolgens hoe u DevTools kunt gebruiken om CSS te wijzigen en JavaScript te debuggen .