Live Server, ett tillägg till Visual Studio (VS) Code, låter utvecklare förhandsgranska sitt arbete i realtid. Tillägget eliminerar det tråkiga med att manuellt uppdatera webbläsaren varje gång du gör ändringar, vilket kan läggas till vid större projekt. Det är särskilt användbart 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 åtgärdar 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 mer än 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 aktivitetsfältet VS Code.
- Öppna ditt projekt genom att klicka på “Arkiv” och “Öppna fil” eller använd kortkommandon, vilket 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 de olika anpassningsalternativ som finns i dina inställningar. Du kan ändra portnummer, HTTPS och proxyinställningar, 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 reda på raden “liveServer.settings.port” (standardportvärdet är 5500).
- Ställ in den på 0 för ett slumpmässigt portnummer, eller välj ett nummer du vill använda.
Aktivera HTTPS-anslutningar
Aktivera HTTPS-anslutningar för ökad säkerhet, så här:
- Leta efter HTTPS-protokollraden “liveServer.settings.https”.
- Ändra “enable”-värdet till “true”.
- Ange sökvägarna för certifikat, nyckel och lösenfras efter behov.
Konfigurera proxyinställningar
Konfigurering av proxyinställningar kan krävas för specifika scenarier. Så här konfigurerar du proxyn:
- Aktivera proxyn med “liveServer.settings.proxy”.
- Ändra “enable” till “true” om det inte redan är aktiverat.
- Ställ in “baseUri” till önskad proxyplats.
- Ange “proxyUri” för den faktiska webbadressen.
Integrera Edge DevTools med Live Server i VS Code
Att integrera Edge DevTools och Live Server i Visual Studio Code kan förbättra webbutvecklingen genom att göra den betydligt effektivare. Denna kombination av verktyg visar samtidigt förändringar i realtid och ger direkt tillgång till utvecklingsverktyg.
- 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 inbyggda webbläsarutvecklingsverktygen för att automatiskt synkronisera ändringar till 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 dina ändringar i realtid; Du behöver inte vänta med att kontrollera om färgen, teckensnittet eller designen är korrekt. Och för HTML- och JavaScript-kodare är det lätt att upptäcka buggar och fel mellan olika filer.
Live Server är fortfarande användbar för dem som främst arbetar med PHP-filer. Men för att använda dess funktionalitet med PHP måste du konfigurera en lokal server som stöder PHP.
Live Server stöder statiska webbplatsgeneratorer som Jekyll och Hugo. De låter dig snabbt se och ä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 liveserverproblem
Även om Live Server-tillägget i allmänhet är tillförlitligt, kan vissa problem fortfarande uppstå. Till exempel kan det hända att Live Server inte startar, live-reload kan sluta fungera eller så kan du ha CORS-problem.
Liveservern startar inte
Detta kan hända om tillägget inte är korrekt installerat. Om så är fallet kan du:
- Kontrollera att tillägget är korrekt installerat och aktiverat. Om du har glömt att aktivera det 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-omladdningen inte fungerar som den ska, här är något du kan prova:
- Dubbelkolla dina filtyper och filtypskompatibilitet.
- Bekräfta att tillägget spårar ändringar korrekt och inte ignorerar filer som bör få ändringar. Kontrollera inställningar som “liveServer.settings.ignoreFiles”.
Övergripande resursdelningsproblem
CORS-problem kan uppstå när man hanterar resurser från olika källor. 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 inte kan ö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 stöd för förprocessorer, såsom Sass, Less eller TypeScript, för att automatiskt kompilera din kod och uppdatera förhandsgranskningen. Live Server kan också integreras med tredjepartsverktyg och bibliotek, såsom ramverk och byggsystem.
Utforska Live Server-konfigurationen 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 fungera bättre.
Undvik överdrivna laddningar
Ett sätt att hålla servern igång som bäst är att konfigurera inställningar för att förhindra överdrivna 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
Justera webbläsarens uppdateringsfördröjning för att få ut mer prestanda från din server. För att uppnå detta, justera serverinställningarna “liveServer.settings.wait”. De snabba omladdningarna som ibland inträffar när du sparar flera på varandra följande filer kan tömma dina systemresurser. Att öka fördröjningen via “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 av 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 Server Tips
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 ofullbordad eller opestad kod, vilket håller din kod ren 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 löser 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 erbjuder realtidsförhandsvisningar av HTML-, CSS- och JavaScript-filer.
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 felaktig installation av tillägget, 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 konversationen live (server)
Live Server-tillägget i Visual Studio Code är ett måste-verktyg för moderna utvecklare, som hjälper dem att effektivisera arbetsflödet och starta förstklassiga projekt. 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 vara till stor hjälp för andra programmerare.
