den här populära artikeln uppdaterades 2020. För mer om att förbättra ditt utvecklingsflöde med verktyg, läs Developer Essentials: Tools on SitePoint Premium.
en webbutvecklare typiska dag innebär att skapa HTML-webbsidor med tillhörande CSS och JavaScript i sin favoritredigerare. Arbetsflödet:
- öppna sidan lokalt värd i en webbläsare.
- svär.
- öppna DevTools för att undersöka layouten och funktionsproblemen.,
- justera HTML-elementen, CSS-egenskaperna och JavaScript-koden för att åtgärda problemen.
- kopiera dessa ändringar tillbaka till redigeraren och återgå till steg #1.
medan verktyg som live reloading har gjort denna process enklare, fortsätter många utvecklare att justera koden i både DevTools och deras redaktör.
det är dock möjligt att öppna och redigera källfiler direkt i Chrome. Eventuella ändringar du gör sparas i filsystemet och uppdateras i redigeraren (förutsatt att det uppdateras när filändringar inträffar).,
Steg 1: Starta Utvecklarverktyg
Öppna Chrome, ladda en sida från ditt lokala filsystem / server och öppna utvecklingsverktyg från menyn Fler verktyg eller tryck på F12 eller Ctrl/cmd + Shift + I beroende på ditt system. Navigera till fliken källor för att undersöka Filutforskaren:
Du kan öppna och redigera CSS-och JavaScript-filer i den här vyn, men eventuella ändringar kommer att gå förlorade så snart du uppdaterar sidan.
steg 2: associera en mapp med arbetsytan
klicka på fliken filsystem och klicka sedan på + Lägg till mapp i arbetsytan., Du blir ombedd att hitta din arbetsmapp och Chrome ber dig bekräfta att du tillåter åtkomst. Utforskaren visar filer på ditt system som kan öppnas med ett enda klick:
steg 3: Redigera och spara din kod
Du kan nu hoppa in och redigera din kod. Osparade redigeringar markeras med en asterisk på fliken Arkiv.
CSS-ändringar uppdateras omedelbart, men när det gäller HTML och JavaScript måste du normalt trycka på Ctrl / Cmd + S för att spara filen till filsystemet och uppdatera sedan Webbläsaren.,
Observera att du också kan högerklicka på fliken Fil och välja Spara som… för att spara en kopia av filen någon annanstans.
steg 4: Granska och ångra ändringar
för att granska ändringar, högerklicka på en filflik och välj lokala ändringar… från snabbmenyn:
en diff-liknande vy visas. Pilikonen längst ned till vänster i rutan kommer att ångra alla ändringar och återställa filen till sitt ursprungliga tillstånd.,
Chromes Utvecklarverktyg kommer aldrig att bli en fullständig ersättning för din favoritredigerare, men det kan vara användbart när du gör snabba ändringar eller arbetar från en annan dator där din redaktör kanske inte installeras.