Denne populære artikkelen ble oppdatert i 2020. For mer om å forbedre din utvikling arbeidsflyt med verktøy, lese Utvikler Essentials: Verktøy på SitePoint Premium.
En web-utvikler som er typisk dag handler om å lage HTML-sider med tilhørende CSS og JavaScript i deres favoritt editor. Arbeidsflyt:
- Åpne lokalt arrangert siden i en nettleser.
- Sverger.
- Åpne DevTools å undersøke layout og funksjonalitet problemer.,
- Tweak HTML-elementer, CSS-egenskaper, og JavaScript-kode for å løse problemene.
- Kopiere disse endringene tilbake til redaktør og gå tilbake til trinn #1.
Mens verktøy som lever omlasting har gjort denne prosessen enklere, mange utviklere fortsette å finpusse kode i både DevTools og sin redaktør.
det er Imidlertid mulig å åpne og redigere kilde filer rett i Chrome. Eventuelle endringer du gjør blir lagret i filsystemet og er oppdatert i løpet av redaktøren (forutsatt det oppdateres når filen oppstår endringer).,
Trinn 1: Start Utvikler Verktøy
Åpne Chrome, kan du laste inn en side fra ditt lokale filsystem/server og åpne Verktøy for utviklere fra Flere verktøy-menyen, eller trykke F12 eller Ctrl/Cmd + Shift + i avhengig av systemet. Naviger til Kilder tab for å undersøke file explorer:
Du kan åpne og redigere CSS-og JavaScript-filer i dette synet, men noen endringer vil bli borte så snart du oppdatere siden.
Trinn 2: Tilordne en Mappe med Arbeidsområde
Klikk Filsystem-fanen, og klikk deretter på + Legg til mappe for å arbeidsområdet., Du vil bli bedt om å finne arbeid mappen og Chrome vil be deg bekrefte at du vil Tillate tilgang. Den explorer viser filer på systemet som kan åpnes med et enkelt klikk:
Trinn 3: Redigere og Lagre Din Kode
Du kan nå hoppe inn og redigere koden din. Ulagrede endringer er markert med en stjerne i kategorien fil.
CSS endringer oppdateres umiddelbart, men i tilfelle av HTML og JavaScript, vil du normalt trenger til å trykke Ctrl/Cmd + S for å lagre filen til filsystemet og deretter oppdatere nettleseren din.,
Merk at du også kan høyre-klikk kategorien fil, og velg Lagre som… for å lagre en kopi av filen et annet sted.
Trinn 4: Gjennomgang og Angre Endringer
for Å gjennomgå endringer, kan du høyreklikke på en fil-fanen, og velg Lokale modifikasjoner… fra hurtigmenyen:
En diff-som du vil vise vises. Pil-ikonet nederst til venstre i ruten vil angre alle endringer og gå tilbake filen til sin opprinnelige tilstand.,
Chrome ‘ s Developer Tools vil aldri være en full erstatning for dine favoritt-editor, men det kan være nyttig når du gjør raske endringer eller jobber fra en annen PC hvor din editor kan ikke installeres.