Live Server, en Visual Studio (VS) kodtillägg, gör det möjligt för utvecklare att förhandsgranska sitt arbete i realtid. Tillägget eliminerar det tråkiga med att manuellt uppdatera webbläsaren varje gång du gör några ändringar, vilket kan läggas till i större projekt. Det är särskilt praktiskt för webbutvecklare som arbetar med HTML, CSS och JavaScript.
Den här handledningen kommer att förklara hur du konfigurerar, anpassar och använder verktyget med olika filtyper och felsöker några vanliga problem som en utvecklare kan stöta på när du använder det.
Öppna ett projekt med Live Server i VS Code
Utan Live Server måste du uppdatera webbläsaren manuellt när du ändrar din kod eller lägger till innehåll för att uppdateringarna ska visas. För att sätta detta i perspektiv – om du gör 100 ändringar om dagen kan du behöva uppdatera webbläsaren upp till 100 gånger för att se varje ändring. Så här kan du öppna ett projekt med Live Server i Visual Studio Code:
- Installera Live Server-tillägget från Marketplace. Du hittar den i VS Code Activity Bar.
- Öppna ditt projekt genom att antingen klicka på “Arkiv” och “Öppna fil” eller genom att använda kortkommandon, som du föredrar.
- Högerklicka på en HTML-fil i projektet och välj “Öppna med Live Server” från snabbmenyn.
Ett nytt webbläsarfönster kommer att visa livesidan. Alla ändringar du gör i projektfilerna uppdateras automatiskt i webbläsaren.
Anpassa Live Server-inställningar i VS Code
För att få ut det mesta av Live Server-tillägget, prova olika anpassningsalternativ som finns tillgängliga i dess inställningar. Du kan ändra portnummer, HTTPS och proxykonfigurationer, bland andra funktioner. Låt oss gå steg-för-steg genom att implementera dessa anpassningsalternativ.
Ändra standardportnumret
Du kanske vill använda ett annat portnummer än standard 5500. Detta är lätt att uppnå:
- Leta upp raden “liveServer.settings.port” (standardportvärdet är 5500).
- Ställ in 0 för ett slumpmässigt portnummer, eller välj ett nummer du vill använda.
Aktivera HTTPS-anslutningar
Aktivera HTTPS-anslutningar för mer säkerhet, så här:
- Hitta HTTPS-protokollraden “liveServer.settings.https”.
- Ändra värdet “enable” till “true”.
- Skriv in cert-, nyckel- och lösenfrasfilsökvägar efter behov.
Konfigurera proxyinställningar
Det kan vara nödvändigt att konfigurera proxyinställningar för specifika scenarier. Så här ställer du in proxyn:
- Aktivera proxy med “liveServer.settings.proxy.”
- Ändra “enable” till “true” om det inte redan är så.
- Ställ in “baseUri” för önskad proxyplats.
- Ange “proxyUri” för den faktiska webbadressen.
Integrera Edge DevTools med Live Server i VS Code
Edge DevTools och Live Server-integrering i Visual Studio Code kan förbättra webbutvecklingen genom att göra den betydligt effektivare. Denna verktygskombination visar samtidigt förändringar i realtid och ger direkt åtkomst till utvecklarverktyg.
- Installera Live Server-tillägget för Visual Studio Code från VS Code Marketplace.
- Installera Edge DevTools-tillägget för VS Code från samma källa genom att söka efter “Microsoft Edge Tools for VS Code.”
- Använd de integrerade webbläsarutvecklingsverktygen för att automatiskt synkronisera ändringar med källan.
Med båda tilläggen installerade kan du se en liveförhandsvisning av dina ändringar i ett inbäddat webbläsarfönster i VS Code.
Använda Live Server med olika filtyper
Live Server-tillägget är tillräckligt mångsidigt för många filtyper. Det fungerar med HTML-filer som standard och stöder CSS- och JavaScript-filer. När du ändrar en stilmall eller ett skript med dessa filtyper kommer tillägget omedelbart att uppdatera webbläsaren för att återspegla ändringarna. Utvecklare, särskilt front-end webbdesigners, kan dra nytta av Live Servers funktion för omedelbar uppdatering. Om du justerar CSS kommer du att se effekterna av ändringar i realtid – du behöver inte vänta med att kontrollera om färgen, teckensnittet eller layouten är korrekt. Och för HTML- och JavaScript-kodare är det lätt att upptäcka buggar och misstag mellan olika filer.
Live-servern är fortfarande praktisk för dem som främst arbetar med PHP-filer. För att använda dess funktionalitet med PHP måste du dock konfigurera en lokal server som stöder PHP.
Live-servern är kompatibel med statiska webbplatsgeneratorer som Jekyll och Hugo. De låter dig se och snabbt ändra utdata från din statiska webbplats. Att integrera Live Server med en statisk webbplatsgenerator möjliggör effektiv utveckling utan att manuellt bygga och distribuera webbplatsen varje gång du gör ändringar.
Felsökning av vanliga Live Server-problem
Även om Live Server-tillägget i allmänhet är tillförlitligt, kan vissa problem fortfarande uppstå. Till exempel kan Live Server misslyckas med att starta, live-omladdning kan sluta fungera eller du kan stöta på CORS-problem.
Live-servern startar inte
Detta kan hända om tillägget är felaktigt installerat. I så fall kan du:
- Kontrollera att tillägget är korrekt installerat och aktiverat. Om du har glömt att aktivera eller av misstag inaktiverat det, aktivera det för att lösa problemet.
- Om du misstänker ett installationsproblem, försök att installera om tillägget.
- Kontrollera dina inställningar och se till att din arbetsytamapp är tillgänglig, konfigurerad och inte öppen i en annan instans.
Live-omladdning fungerar inte
Om live-omladdning inte fungerar som det ska, här är något du kan prova:
- Dubbelkolla dina filtyper och filtypsstöd.
- Bekräfta att tillägget spårar ändringar korrekt och inte ignorerar filerna som ska få ändringar. Kontrollera inställningar som “liveServer.settings.ignoreFiles.”
Övergripande resursdelningsproblem
CORS-problem kan uppstå när man hanterar resurser från olika ursprung. Så här löser du dessa problem:
- Tillåt förfrågningar om korsning på din server.
- Använd en lokal utvecklingsserver.
Live Server kan inte öppna webbläsarflikar
Om Live Server misslyckas med att öppna webbläsarflikar i din standardwebbläsare, försök att justera inställningarna:
- Kontrollera din standardwebbläsare.
- Justera serverns webbläsarinställningar i VS Code. När du aktiverar livedelning måste du starta en samarbetssession via kommandopaletten.
Avancerade Live Server-funktioner
Live Server erbjuder flera mindre kända men ganska bekväma tilläggsfunktioner. En “dold” funktion värd att nämna är kompatibilitet med förprocessorer, såsom Sass, Less eller TypeScript, för att automatiskt kompilera din kod och uppdatera förhandsvisningen. Live Server kan också integreras med tredjepartsverktyg och bibliotek, såsom ramverk och byggsystem.
Utforska Live Server-inställningarna och dokumentationen för att identifiera relevanta integrationer som kan hjälpa din stack.
Optimering av liveserverprestanda
Det finns några justeringar för att försöka få Live Server att prestera bättre.
Undvik överflödiga omladdningar
Ett sätt att få servern att prestera som bäst är genom att konfigurera inställningarna för att undvika överflödiga omladdningar. Du kan till exempel justera alternativet “liveServer.settings.ignoreFiles” för att definiera vilka filer eller mappar som inte ska utlösa en live-omladdning. Att begränsa mängden data som är berättigad till en omladdning minskar frekvensen av uppdateringar och sparar systemresurser.
Öka uppdateringsfördröjningen
Finjustera webbläsarens uppdateringsfördröjning för att pressa ut mer prestanda från din server. För att uppnå detta, justera serverinställningen “liveServer.settings.wait”. Snabba omladdningar som ibland inträffar när du sparar flera på varandra följande filer kan anstränga ditt systems resurser. Att öka fördröjningen genom “liveServer.settings.wait” hjälper till att hålla det här potentiella problemet borta.
Stäng oanvända instanser
Slutligen, överväg att stänga oanvända Live Server-instanser för ett enklare prestandatrick när du arbetar med flera projekt. Att hålla flera instanser öppna samtidigt kan förbruka betydande systemresurser, beroende på din hårdvara.
Live servertips
För att få ut det mesta av Live Server, prova några praktiska tips:
Håll utvecklings- och produktionsmiljöer åtskilda
Ett tips som andra utvecklare kan dela med sig av är att hålla din utvecklingsmiljö åtskild från din produktionsmiljö. Denna separation hjälper dig att undvika att oavsiktligt distribuera oavslutad eller opestad kod, vilket håller din kod renare och sparar dyrbar tid.
Använd separata arbetsytor för flera projekt
Om du arbetar med flera projekt samtidigt, använd separata arbetsytor i VS Code för att hålla dina projekt organiserade. Detta tillvägagångssätt gör att du enkelt kan växla mellan projekt och hantera deras respektive Live Server-instanser.
Bättre samarbete med Live Share och Live Server
Tilläggen Live Share och Live Server förbättrar också ditt samarbete med andra utvecklare. Den här inställningen låter dig dela din arbetsyta och liveförhandsvisning med andra. Det är ett optimalt tillvägagångssätt för team som arbetar tillsammans i projekt och felsöker problem i realtid.
Ytterligare vanliga frågor
Vad är Live Server i Visual Studio Code?
Live Server är ett populärt VS-kodtillägg som förhandsgranskar HTML-, CSS- och JavaScript-filer i realtid.
Hur stoppar jag Live Server?
För att stoppa en server, öppna kommandopaletten och skriv “Live Server: Stop Live Server.”
Varför körs inte Live Server?
Några möjliga orsaker till det här problemet är en felaktig installation av tillägg, felaktig projektkonfiguration eller en brandvägg eller proxy som blockerar servern.
Kan jag använda Live Server med Microsoft Edge DevTools i VS Code?
Du kan använda Live Server tillsammans med Microsoft Edge. För att göra detta, installera Live Server och Edge DevTools-tilläggen för Visual Studio Code.
Gå med i livekonversationen (server).
Live Server-tillägget i Visual Studio Code är ett måste-verktyg för moderna utvecklare, som hjälper dem att optimera arbetsflödet och släppa förstklassiga projekt. Det eliminerar onödiga webbläsaruppdateringar och möjliggör samarbete i realtid genom att dela arbetsytor och förhandsvisningar.
Vad är dina tankar om denna förlängning? Vilka tips och tricks har du funnit särskilt användbara? Låt oss veta i kommentarerna – det kan till stor hjälp hjälpa andra kodare.