Dit populaire artikel is bijgewerkt in 2020. Lees Developer Essentials: Tools op SitePoint Premium voor meer informatie over het verbeteren van uw ontwikkelingsworkflow met tools.
de typische dag van een webontwikkelaar bestaat uit het maken van HTML-webpagina ‘ s met bijbehorende CSS en JavaScript in hun favoriete editor. De workflow:
- Open de lokaal gehoste pagina in een browser.
- zweer.
- Open DevTools om de lay-out en functionaliteitsproblemen te onderzoeken.,
- Tweak de HTML-elementen, CSS-eigenschappen en JavaScript-code om de problemen op te lossen.
- kopieer deze wijzigingen terug naar de editor En Keer terug naar stap #1.
hoewel tools zoals live herladen dit proces gemakkelijker hebben gemaakt, blijven veel ontwikkelaars code aanpassen in zowel DevTools als hun editor.
Het is echter mogelijk om bronbestanden direct in Chrome te openen en te bewerken. Alle wijzigingen die u maakt worden opgeslagen in het bestandssysteem en bijgewerkt in de editor (ervan uitgaande dat het ververst wanneer bestandswijzigingen optreden).,
Stap 1: Start ontwikkelaarstools
open Chrome, laad een pagina van uw lokale bestandssysteem/server en open ontwikkelaarstools vanuit het menu Meer hulpmiddelen of druk op F12 of Ctrl/Cmd + Shift + I afhankelijk van uw systeem. Navigeer naar het tabblad Bronnen om de bestandsverkenner te bekijken:
U kunt CSS-en JavaScript-bestanden openen en bewerken in deze weergave, maar eventuele wijzigingen zullen verloren gaan zodra u de pagina ververst.
Stap 2: Koppel een map aan het werkblad
klik op het tabblad bestandssysteem en klik vervolgens op + Map toevoegen aan het werkblad., U wordt gevraagd om uw werkmap te zoeken en Chrome zal u vragen om te bevestigen dat u toegang toestaat. De verkenner toont bestanden op uw systeem die geopend kunnen worden met een enkele klik:
Stap 3: bewerk en bewaar uw Code
u kunt nu springen en uw code bewerken. Niet-opgeslagen bewerkingen worden gemarkeerd met een sterretje op het tabblad Bestand.
CSS wijzigingen worden direct bijgewerkt, maar in het geval van HTML en JavaScript, zult u normaal gesproken op Ctrl/Cmd + S moeten drukken om het bestand op te slaan in het bestandssysteem en vervolgens de browser te vernieuwen.,
merk op dat u ook met de rechtermuisknop op het tabblad bestand kunt klikken en opslaan als… kunt selecteren om een kopie van het bestand elders op te slaan.
Stap 4: wijzigingen bekijken en ongedaan maken
om wijzigingen te bekijken, klikt u met de rechtermuisknop op een tabblad Bestand en kiest u lokale wijzigingen… uit het contextmenu:
een diff-achtige weergave wordt getoond. Het pijlpictogram linksonder in het paneel maakt alle wijzigingen ongedaan en zet het bestand terug naar zijn oorspronkelijke staat.,
Chrome ‘ s Developer Tools zullen nooit een volledige vervanging zijn voor uw favoriete editor, maar het kan handig zijn als u snel wijzigingen aanbrengt of werkt vanaf een andere PC waar uw editor mogelijk niet is geïnstalleerd.