A Live Server, a Visual Studio (VS) kódbővítménye lehetővé teszi a fejlesztők számára, hogy valós időben tekintsék meg munkájuk előnézetét. A bővítmény kiküszöböli a böngésző manuális frissítésének fáradságosságát minden alkalommal, amikor bármilyen változtatást végrehajt, ami a nagyobb projekteknél előfordulhat. Különösen hasznos a HTML-lel, CSS-sel és JavaScripttel dolgozó webfejlesztők számára.
Ez az oktatóanyag elmagyarázza, hogyan állíthatja be, testreszabhatja és használhatja az eszközt különböző fájltípusokkal, valamint elhárít néhány gyakori problémát, amellyel a fejlesztő találkozhat használat közben.
Projekt megnyitása Live Serverrel a VS Code-ban
A Live Server nélkül, amikor módosítja a kódot vagy tartalmat ad hozzá, manuálisan kell frissítenie a böngészőt, hogy megjelenjenek a frissítések. A perspektíva szempontjából – ha naponta 100 módosítást hajt végre, előfordulhat, hogy akár 100-szor is frissítenie kell a böngészőt az egyes módosítások megtekintéséhez. Így nyithat meg egy projektet a Live Server használatával a Visual Studio Code programban:
- Telepítse a Live Server bővítményt a Marketplace webhelyről. Megtalálható a VS Code tevékenységsorában.
- Nyissa meg projektjét a „Fájl” és a „Fájl megnyitása” lehetőségre kattintva, vagy használja a billentyűparancsokat, ahogy tetszik.
- Kattintson a jobb gombbal egy HTML-fájlra a projektben, és válassza a „Megnyitás élő kiszolgálóval” lehetőséget a helyi menüből.
Egy új böngészőablakban jelenik meg az élő webhely. A projektfájlokon végrehajtott változtatások automatikusan frissülnek a böngészőben.
A Live Server beállításainak testreszabása a VS Code-ban
Ha a legtöbbet szeretné kihozni a Live Server bővítményből, próbáljon ki különböző testreszabási lehetőségeket a beállításaiban. Módosíthatja többek között a portszámot, a HTTPS-t és a proxykonfigurációkat. Lépésről lépésre hajtsa végre ezeket a testreszabási lehetőségeket.
Módosítsa az alapértelmezett portszámot
Előfordulhat, hogy az alapértelmezett 5500-as portszámtól eltérő portszámot szeretne használni. Ez könnyen elérhető:
- Keresse meg a „liveServer.settings.port” sort (a port alapértelmezett értéke 5500).
- Állítsa 0-ra egy véletlenszerű portszámhoz, vagy válassza ki a használni kívánt számot.
HTTPS kapcsolatok engedélyezése
A nagyobb biztonság érdekében engedélyezze a HTTPS-kapcsolatokat, például:
- Keresse meg a „liveServer.settings.https” HTTPS protokoll sort.
- Módosítsa az „enable” értéket „true”-ra.
- Szükség szerint írja be a tanúsítvány, a kulcs és a jelszófájl elérési útját.
Proxybeállítások konfigurálása
A proxybeállítások konfigurálása bizonyos forgatókönyvek esetén szükséges lehet. Így állíthatja be a proxyt:
- Engedélyezze a proxyt a „liveServer.settings.proxy” segítségével.
- Módosítsa az „engedélyezést” „true”-ra, ha még nem így van.
- Állítsa be a „baseUri”-t a kívánt proxyhelyhez.
- Adja meg a „proxyUri”-t a tényleges URL-hez.
Az Edge DevTools integrálása Live Serverrel a VS Code-ban
Az Edge DevTools és a Live Server integráció a Visual Studio Code-ban javíthatja a webfejlesztést azáltal, hogy lényegesen hatékonyabbá teszi azt. Ez az eszközkombináció egyszerre jeleníti meg a valós idejű változásokat, és lehetővé teszi a fejlesztői eszközök közvetlen elérését.
- Telepítse a Visual Studio Code Live Server bővítményét a VS Code Marketplace webhelyről.
- Telepítse a VS Code Edge DevTools bővítményét ugyanabból a forrásból a „Microsoft Edge Tools for VS Code” kifejezésre keresve.
- Használja az integrált böngészőfejlesztő eszközöket a módosítások automatikus szinkronizálásához a forrással.
Ha mindkét bővítmény telepítve van, a VS Code-on belüli beágyazott böngészőablakban megtekintheti a változtatások élő előnézetét.
Élő szerver használata különböző fájltípusokkal
A Live Server kiterjesztése sok fájltípushoz elég sokoldalú. Alapértelmezés szerint HTML fájlokkal működik, és támogatja a CSS és JavaScript fájlokat. Ha módosít egy stíluslapot vagy szkriptet ezekkel a fájltípusokkal, a kiterjesztés azonnal frissíti a böngészőt, hogy tükrözze a változásokat. A fejlesztők, különösen a front-end webdesignerek profitálhatnak a Live Server azonnali frissítési funkciójából. Ha módosítja a CSS-t, a változások hatásait valós időben fogja látni – nem kell várnia, hogy ellenőrizze, hogy a szín, a betűtípus vagy az elrendezés megfelelő-e. A HTML- és JavaScript-kódolók számára pedig könnyű észrevenni a hibákat és a hibákat a különböző fájlok között.
A Live Server továbbra is hasznos azok számára, akik elsősorban PHP fájlokkal dolgoznak. A PHP funkcióinak használatához azonban be kell állítani egy helyi szervert, amely támogatja a PHP-t.
A Live Server kompatibilis az olyan statikus helygenerátorokkal, mint a Jekyll és a Hugo. Lehetővé teszik a statikus webhely kimenetének megtekintését és gyors módosítását. A Live Server és a statikus helygenerátor integrálása hatékony fejlesztést tesz lehetővé anélkül, hogy minden változtatáskor manuálisan építené fel és telepítené a webhelyet.
Gyakori Live Server problémák hibaelhárítása
Bár a Live Server bővítmény általában megbízható, néhány probléma továbbra is felmerülhet. Előfordulhat például, hogy a Live Server nem indul el, az élő újratöltés leállhat, vagy CORS-problémák léphetnek fel.
Az élő szerver nem indul el
Ez akkor fordulhat elő, ha a bővítmény nincs megfelelően telepítve. Ha igen, akkor:
- Ellenőrizze, hogy a bővítmény megfelelően telepítve van-e és engedélyezve van-e. Ha elfelejtette engedélyezni vagy véletlenül letiltotta, engedélyezze a probléma megoldásához.
- Ha telepítési problémára gyanakszik, próbálja meg újratelepíteni a bővítményt.
- Ellenőrizze a beállításokat, és győződjön meg arról, hogy a munkaterület-mappa elérhető, konfigurálható, és nem nyílik meg egy másik példányban.
Az élő újratöltés nem működik
Ha az élő újratöltés nem úgy működik, ahogy kellene, próbáljon ki valamit:
- Ellenőrizze újra a fájltípusokat és a fájltípusok támogatását.
- Győződjön meg arról, hogy a kiterjesztés megfelelően követi a változásokat, és nem hagyja figyelmen kívül azokat a fájlokat, amelyeken módosítani kell. Ellenőrizze a beállításokat, például: „liveServer.settings.ignoreFiles”.
Több eredetû forrásmegosztási problémák
CORS-problémák merülhetnek fel, ha különböző eredetű erőforrásokkal foglalkozunk. A problémák megoldása:
- Több eredetű kérések engedélyezése a szerveren.
- Használjon helyi fejlesztési szervert.
Az élő szerver nem tudja megnyitni a böngészőlapokat
Ha a Live Server nem tudja megnyitni a böngészőlapokat az alapértelmezett böngészőben, próbálja meg módosítani a beállításokat:
- Ellenőrizze az alapértelmezett webböngészőt.
- Módosítsa a szerver böngésző beállításait a VS Code-ban. Amikor engedélyezi az élő megosztást, el kell indítania egy együttműködési munkamenetet a parancspalettán keresztül.
Speciális élő szerver szolgáltatások
A Live Server számos kevésbé ismert, de meglehetősen kényelmes kiegészítő funkciót kínál. Az egyik „rejtett” funkció, amelyet érdemes megemlíteni, az olyan előfeldolgozókkal való kompatibilitás, mint a Sass, Less vagy TypeScript, amelyek automatikusan lefordítják a kódot és frissítik az előnézetet. A Live Server integrálható harmadik féltől származó eszközökkel és könyvtárakkal is, például keretrendszerekkel és rendszerekkel.
Fedezze fel a Live Server beállításait és dokumentációját, hogy azonosítsa azokat a releváns integrációkat, amelyek segíthetik a veremét.
Élő szerverteljesítmény-optimalizálás
Van néhány finomítás a Live Server teljesítményének javítására.
Kerülje a túlzott újratöltést
A szerver legjobb teljesítményének egyik módja a beállítások konfigurálása a túlzott újratöltések elkerülése érdekében. Például beállíthatja a „liveServer.settings.ignoreFiles” beállítást annak meghatározásához, hogy mely fájlok vagy mappák ne indítsanak el élő újratöltést. Az újratöltésre alkalmas adatok mennyiségének korlátozása csökkenti a frissítések gyakoriságát és kíméli a rendszer erőforrásait.
Növelje a frissítési késleltetést
Finomhangolja a böngésző frissítési késleltetését, hogy nagyobb teljesítményt faragjon ki a szerveréből. Ennek eléréséhez módosítsa a „liveServer.settings.wait” kiszolgáló beállítását. A több egymást követő fájl mentésekor néha előforduló gyors újratöltések megterhelhetik a rendszer erőforrásait. A késleltetés növelése a „liveServer.settings.wait” segítségével segít távol tartani ezt a lehetséges problémát.
Zárja be a nem használt példányokat
Végül fontolja meg a nem használt Live Server-példányok bezárását az egyszerűbb teljesítmény trükk érdekében, amikor több projekten dolgozik. Ha egyszerre több példányt is nyitva tart, az a hardvertől függően jelentős rendszererőforrásokat fogyaszthat.
Élő szerver tippek
Ha a legtöbbet szeretné kihozni a Live Server szolgáltatásból, próbáljon ki néhány gyakorlati tippet:
Tartsa külön a fejlesztési és gyártási környezetet
Az egyik tipp, amit más fejlesztők is megoszthatnak, hogy tartsa külön a fejlesztői környezetet az éles környezettől. Ez a szétválasztás segít elkerülni a befejezetlen vagy még nem tesztelt kód véletlen telepítését, így a kód tisztább marad, és értékes időt takarít meg.
Használjon külön munkaterületeket több projekthez
Ha egyszerre több projekten dolgozik, használjon külön munkaterületeket a VS Code-ban a projektek rendszerezéséhez. Ezzel a megközelítéssel könnyedén válthat a projektek között, és kezelheti a megfelelő Live Server-példányokat.
Jobb együttműködés élő megosztással és élő szerverrel
A Live Share és a Live Server bővítmények a többi fejlesztővel való együttműködést is fokozzák. Ez a beállítás lehetővé teszi a munkaterület és az élő előnézet megosztását másokkal. Ez egy optimális megközelítés a projekteken és a problémák valós idejű hibaelhárításán dolgozó csapatok számára.
További GYIK
Mi az a Live Server a Visual Studio Code-ban?
A Live Server egy népszerű VS Code kiterjesztés, amely valós időben tekinti meg a HTML-, CSS- és JavaScript-fájlok előnézetét.
Hogyan állíthatom le az élő szervert?
A szerver leállításához nyissa meg a Parancspalettát, és írja be a „Live Server: Stop Live Server” parancsot.
Miért nem fut a Live Server?
A probléma néhány lehetséges oka a bővítmény nem megfelelő telepítése, helytelen projektbeállítás, vagy a kiszolgálót blokkoló tűzfal vagy proxy.
Használhatom a Live Server-t a Microsoft Edge DevTools-szal a VS Code-ban?
A Live Servert a Microsoft Edge-gel együtt használhatja. Ehhez telepítse a Visual Studio Code Live Server és Edge DevTools bővítményeit.
Csatlakozzon az élő (szerver) beszélgetéshez
A Visual Studio Code Live Server bővítménye elengedhetetlen eszköz a modern fejlesztők számára, amely segít a munkafolyamat optimalizálásában és a csúcsminőségű projektek kiadásában. Kiküszöböli a szükségtelen böngészőfrissítéseket, és lehetővé teszi a valós idejű együttműködést a munkaterületek és az előnézetek megosztásával.
Mi a véleménye erről a bővítményről? Milyen tippeket és trükköket találtál különösen hasznosnak? Ossza meg velünk a megjegyzésekben – ez nagyban segíthet a kódolótársaknak.
