denne populære artikel blev opdateret i 2020. For mere om at forbedre din udviklings workorkflo.med værktøjer, læs Developer Essentials: Tools på SitePoint Premium.
en typicalebudviklers typiske dag involverer oprettelse af HTML-webebsider med tilknyttet CSS og JavaScript i deres foretrukne editor. Workorkflo.:
- Åbn den lokalt hostede side i en bro .ser.
- sværger.
- Åbn DevTools at undersøge layout og funktionalitet problemer.,
- Juster HTML-elementerne, CSS-egenskaberne og JavaScript-koden for at løse problemerne.
- Kopier disse ændringer tilbage i editoren og vend tilbage til trin # 1.mens værktøjer som live reloading har gjort denne proces lettere, fortsætter mange udviklere med at finjustere kode i både DevTools og deres editor.
det er dog muligt at åbne og redigere kildefiler direkte i Chrome. Eventuelle ændringer, du foretager gemmes i filsystemet og opdateres i editoren (forudsat at det opdateres, når filændringer opstår).,
Trin 1: Start udviklerværktøjer
Åbn Chrome, indlæs en side fra dit lokale filsystem/server, og åbn udviklerværktøjer fra menuen Flere værktøjer, eller tryk på F12 eller Ctrl / Cmd + Shift + I afhængigt af dit system. Naviger til Kilder tab for at undersøge den file explorer:
Du kan åbne og redigere CSS og JavaScript filer i dette synspunkt, men alle ændringer, vil blive tabt, så snart du opdaterer siden.
Trin 2: Tilknyt en mappe til arbejdsområdet
Klik på fanen filsystem, og klik derefter på + Tilføj mappe til arbejdsområde., Du bliver bedt om at finde din arbejdsmappe, og Chrome vil bede dig om at bekræfte, at du tillader adgang. Explorer viser filer på dit system, som kan åbnes med et enkelt klik:
Trin 3: Rediger og Gem Din Kode
nu kan Du springe ind og redigere din kode. Ikke-gemte redigeringer er markeret med en stjerne på fanen Fil.CSS-ændringer opdateres øjeblikkeligt, men i tilfælde af HTML og JavaScript skal du normalt trykke på Ctrl/Cmd + s for at gemme filen i filsystemet og derefter opdatere bro .seren.,
Bemærk, at du også kan højreklikke på fanen Filer og vælge Gem som… for at gemme en kopi af filen andetsteds.
Trin 4: Gennemgang og Fortryd Ændringer
for At gennemse ændringer, højreklik på en fil fanen og vælge Lokale ændringer… fra genvejsmenuen:
En diff-lignende synspunkt er vist. Pilikonet nederst til venstre i ruden vil fortryde alle ændringer og vende filen tilbage til sin oprindelige tilstand.,
Chromes udviklingsværktøjer vil aldrig være en fuld erstatning for din yndlingseditor, men det kan være nyttigt, når du foretager hurtige ændringer eller arbejder fra en anden PC, hvor din editor muligvis ikke er installeret.