> ## Documentation Index > Fetch the complete documentation index at: https://support.labex.io/llms.txt > Use this file to discover all available pages before exploring further. # LabEx VM WebIDE Interface > Die LabEx WebIDE bietet eine moderne, VS Code-ähnliche Entwicklungsumgebung für Codierungsaufgaben. Sie basiert auf Ubuntu 22.04 und bietet eine vertraute Oberfläche zum Schreiben, Kompilieren und Ausführen von Code in mehreren Programmiersprachen. ## WebIDE-Vorschau WebIDE Preview Die WebIDE-Umgebung ist besonders nützlich für: 1. Schreiben und Debuggen von Code in verschiedenen Programmiersprachen (Java, JavaScript, Python usw.) 2. Webentwicklungsprojekte mit Live-Vorschaufunktionen, siehe [Erstellen Sie Ihre erste HTML-Seite in WebIDE ](https://labex.io/tutorials/html-create-your-first-html-page-in-webide-451041) 3. Verwalten von Projektdateien und -verzeichnissen über eine intuitive Benutzeroberfläche 4. Integrierte Terminaloperationen für Befehlszeilenaufgaben ## Umgebungslayout Die WebIDE-Oberfläche besteht aus mehreren Schlüsselkomponenten: 1. Linke Seitenleiste: * Dateiexplorer für die Projektnavigation * Suchfunktion * Quellcodeverwaltung für Git-Operationen * Erweiterungsfenster 2. Editorbereich: Hauptarbeitsbereich für die Codierung 3. Unteres Bedienfeld: Terminal, Probleme und Ausgabe 4. Statusleiste: Schneller Zugriff auf Einstellungen und Live-Vorschau 5. Obere Menüleiste: Datei, Bearbeiten, Ansicht und andere Optionen ## Terminalzugriff Sie können das Terminal auf zwei Arten öffnen: 1. Klicken Sie auf das -Symbol in der linken unteren Ecke und wechseln Sie zur Registerkarte "Terminal". Terminal Access 2. Verwenden Sie das obere Menü: Terminal > Neues Terminal Terminal Access ## HTML-Vorschau So zeigen Sie Ihre HTML-Datei in der Vorschau an: 1. Klicken Sie in der WebIDE auf die Schaltfläche "Go Live" in der unteren rechten Ecke. Go Live button in WebIDE 2. Eine neue Browser-Registerkarte wird mit Ihrer gerenderten HTML-Seite geöffnet. HTML page rendered in browser tab 3. Oder Sie können auf die Registerkarte "Web 8080" klicken, um die Vorschau zu öffnen. WebIDE Web 8080 tab preview 4. Wenn sich Ihr Projekt in einem Unterverzeichnis befindet, können Sie darauf zugreifen, indem Sie auf den Namen des Unterverzeichnisses im Explorer klicken. Dann wird automatisch die Datei `index.html` in diesem Verzeichnis in der Vorschau angezeigt. WebIDE subdirectory preview 5. Wenn Ihr Projekt mehrere HTML-Dateien hat, einschließlich `index.html`, können Sie den Dateinamen an die URL anhängen, um ihn direkt in der Vorschau anzuzeigen. Zum Beispiel `https://xxx.labex.io/another-file.html`. WebIDE multiple HTML files preview 6. Sie können die Vorschau in einer neuen Registerkarte öffnen, indem Sie auf die Schaltfläche "In neuem Tab öffnen" klicken. Dadurch wird die Vorschau in einer neuen Browser-Registerkarte geöffnet. WebIDE Open in New Tab "Go Live" wird automatisch: * Einen Webserver starten * Echtzeit-Updates bereitstellen, wenn Sie Ihren Code ändern > Tipps: LabEx VM hostet die Vorschau auf Port 8080. Sie können den Vorschaulink mit anderen teilen, um Ihre Arbeit zu präsentieren. Nachdem Ihre Lab-VM gestoppt wurde, funktioniert der Vorschaulink nicht mehr. ## Nutzungsszenarien Dies ist ein Java-Lab-Beispiel, das zeigt, wie man ein einfaches Java-Programm mit der LabEx WebIDE schreibt, kompiliert und ausführt. Arbeiten mit Java-Projekten in WebIDE: Java Development 1. Erstellen Sie eine neue Java-Datei über den Explorer 2. Schreiben Sie Ihren Java-Code mit Syntaxhervorhebung 3. Kompilieren und ausführen im Terminal: ```bash theme={null} javac MyClass.java java MyClass ``` 4. Anzeigen von Kompilierungsfehlern und -warnungen in Echtzeit Dies ist ein HTML-Lab-Beispiel, das zeigt, wie man eine einfache Webseite mit der LabEx WebIDE erstellt. Für Frontend-Entwicklungsaufgaben: Go Live Button 1. Erstellen Sie HTML-, CSS- und JavaScript-Dateien 2. Klicken Sie auf die Schaltfläche "Go Live" in der unteren rechten Ecke 3. Greifen Sie auf Ihre Webseite zu über: * Web 8080-Registerkarte oben in der LabEx VM * Erstellen Sie neue Port-Vorschau-Registerkarten mit der +-Schaltfläche Hinweis: Ihr Projekt wird automatisch auf eine öffentliche URL auf dem LabEx-Server bereitgestellt, wodurch es über die Web-Registerkarten zugänglich ist. Dies ist eine Python-Challenge-Beispiel, das zeigt, wie man Astronautennamen mit der LabEx WebIDE verarbeitet. Für die Python-Programmierung: Python Development 1. Erstellen Sie eine Python-Datei im Explorer 2. Schreiben Sie Ihren Python-Code mit: * Syntaxhervorhebung * Codevervollständigung * Fehlererkennung 3. Führen Sie Ihr Skript im Terminal aus: ```bash theme={null} python3 script.py ``` 4. Verwenden Sie den integrierten Debugger für die schrittweise Ausführung ## Häufig gestellte Fragen LabEx VM stellt Ihre Webprojekte automatisch bereit: Web Preview 1. Standardport 8080: * Klicken Sie auf die Registerkarte "Web 8080" oben in der LabEx VM * Ihre Anwendung ist über eine öffentliche URL zugänglich 2. Benutzerdefinierte Ports: * Klicken Sie auf die +-Schaltfläche, um neue Port-Vorschau-Registerkarten zu erstellen * Jeder Port erhält seine eigene öffentliche URL * Nützlich für die Ausführung mehrerer Dienste (z. B. Frontend und Backend) Hinweis: Im Gegensatz zur lokalen Entwicklung greifen Sie nicht direkt auf localhost zu, da LabEx in der Cloud ausgeführt wird. Häufige Verknüpfungen in der WebIDE: * **Dateioperationen** * Neue Datei: Strg+N * Speichern: Strg+S * Suchen: Strg+F * Ersetzen: Strg+H * **Bedienfeld-Steuerelemente** * Seitenleiste umschalten: Strg+B * Terminal umschalten: Strg+\` * Befehlspalette: Strg+Umschalt+P * **Editor-Funktionen** * Multi-Cursor: Alt+Klick * Alle Vorkommnisse auswählen: Strg+Umschalt+L * Dokument formatieren: Umschalt+Alt+F Ja, Sie können zusätzliche Tools mit dem Ubuntu-Paketmanager installieren: ```bash theme={null} sudo apt update sudo apt install package-name ``` Für sprachspezifische Paketmanager: * Node.js/npm: ```bash theme={null} npm install package-name ``` * Python/pip: ```bash theme={null} pip install package-name ``` Denken Sie daran, dass Installationen temporär sind und beim Beenden Ihrer Sitzung zurückgesetzt werden. Die WebIDE bietet verschiedene Möglichkeiten zur Dateiverwaltung: 1. **Dateien hochladen:** * Ziehen Sie Dateien per Drag & Drop in den Explorer * Verwenden Sie den Upload/Download nach Rechtsklick im Explorer Upload Files 2. **Dateien herunterladen:** * Klicken Sie mit der rechten Maustaste auf die Datei im Explorer * Wählen Sie "Herunterladen" 3. **Kopieren/Einfügen:** * Textinhalte können direkt zwischen Ihrem lokalen Rechner und der WebIDE kopiert werden * Binärdateien sollten die Upload/Download-Funktionen verwenden Denken Sie daran, dass alle Dateien temporär sind und beim Beenden Ihrer Sitzung verloren gehen.