Skip to main content

Der webbasierte github.dev-Editor

Verwende den web-based editor von github.dev aus deinem Repository oder Pull Request, um Änderungen vorzunehmen und zu committen.

Hinweis: Der web-based editor von github.dev befindet sich derzeit in der Betavorschau. Du kannst in unseren Diskussionen Feedback bereitstellen.

Informationen zu web-based editor

Der web-based editor stellt eine schlanke Bearbeitungsumgebung zur Verfügung, die vollständig in deinem Browser ausgeführt wird. Mit dem web-based editor kannst du in Dateien und Quellcoderepositorys von GitHub navigieren und Codeänderungen vornehmen und committen. Du kannst ein beliebiges Repository, eine Fork oder einen Pull Request im Editor öffnen.

Der web-based editor ist auf GitHub.com kostenlos verfügbar.

Der web-based editor bietet viele Vorteile von Visual Studio Code, z. B. Suchen, Syntaxhervorhebung und eine Quellcodeverwaltungsansicht. Du kannst auch Einstellungssynchronisierung verwenden, um deine eigenen VS Code-Einstellungen im Editor zu übernehmen. Weitere Informationen findest du unter Einstellungssynchronisierung in der Dokumentation zu VS Code.

Der web-based editor wird vollständig in der Sandbox deines Browsers ausgeführt. Der Editor klont das Repository nicht, sondern verwendet stattdessen die Erweiterung „GitHub-Repositorys“, um die meisten Funktionen auszuführen, die du verwendest. Deine Arbeit wird im lokalen Speicher des Browsers gespeichert, bis du sie committest. Du solltest deine Änderungen regelmäßig committen, um sicherzustellen, dass sie immer zugänglich sind.

Du musst angemeldet sein, um den webbasierten Editor nutzen zu können.

Öffnen des web-based editor

Du kannst ein beliebiges GitHub-Repository im web-based editor auf eine der folgenden Arten öffnen:

  • Um das Repository auf derselben Browserregisterkarte zu öffnen, drückst du auf ., während du ein Repository oder einen Pull Request auf GitHub durchsuchst.

    Um das Repository auf einer neuen Browserregisterkarte zu öffnen, drückst du auf >.

  • Ändere die URL von „github.com“ in „github.dev“.

  • Verwende beim Anzeigen einer Datei das Dropdownmenü neben , und klicke auf In github.dev öffnen.

    Schaltfläche „Datei bearbeiten“ im Dropdownmenü

Codespaces und der web-based editor

Sowohl der web-based editor als auch GitHub Codespaces ermöglichen es dir, deinen Code direkt über dein Repository zu bearbeiten. Beide Optionen haben jedoch leicht unterschiedliche Vorteile, je nach Anwendungsfall.

web-based editorGitHub Codespaces
KostenFrei.Kostenloses monatliches Nutzungskontingent für persönliche Konten. Informationen zur Preisgestaltung findest du unter Informationen zur Abrechnung für GitHub Codespaces.
VerfügbarkeitVerfügbar für alle Benutzer auf GitHub.com.Verfügbar für alle Benutzer auf GitHub.com.
StartDer web-based editor wird sofort mit einem Tastendruck geöffnet, und du kannst sofort mit der Verwendung beginnen, ohne auf zusätzliche Konfiguration oder die Installation warten zu müssen.Wenn du einen Codespace erstellst oder fortsetzt, wird dem Codespace eine VM zugewiesen, und der Container wird basierend auf dem Inhalt einer Datei devcontainer.json konfiguriert. Diese Einrichtung kann einige Minuten dauern, bis die Umgebung erstellt wurde. Weitere Informationen findest du unter Erstellen eines Codespaces für ein Repository.
ComputeEs gibt keine zugeordnete Computemöglichkeit, sodass du deinen Code nicht erstellen und ausführen oder das integrierte Terminal verwenden kannst.Mit GitHub Codespaces erhältst du die Leistungsfähigkeit einer dedizierten VM, auf der du deine Anwendung ausführen und debuggen kannst.
TerminalzugriffKeine.GitHub Codespaces stellt standardmäßig ein Set mit gängigen Tools bereit, sodass du das Terminal genau wie in deiner lokalen Umgebung nutzen kannst.
ErweiterungenNur eine Teilmenge von Erweiterungen, die im Web ausgeführt werden können, werden in der Erweiterungsansicht angezeigt und können installiert werden. Weitere Informationen findest du unter Verwenden von Erweiterungen.Mit GitHub Codespaces kannst du die meisten Erweiterungen aus dem Visual Studio Code Marketplace nutzen.

Fortsetzen der Arbeit in Codespaces

Du kannst deinen Workflow im web-based editor starten und in einem Codespace fortsetzen. Wenn du versuchst, auf die Ausführungs- und Debugansicht oder das Terminal zuzugreifen, wirst du benachrichtigt, dass sie im web-based editor nicht verfügbar sind.

Wenn du deine Arbeit in einem Codespace fortsetzen möchtest, klicke auf Arbeit fortsetzen in... , und wähle dann Neuen Codespace erstellen aus, um einen Codespace in deinem aktuellen Branch zu erstellen. Bevor du diese Option auswählst, musst du alle Änderungen committen.

Screenshot der Schaltfläche „Arbeit fortsetzen in“ auf der Benutzeroberfläche

Verwenden von Quellcodeverwaltung

Wenn du den web-based editor verwendest, werden alle Aktionen über die Quellcodeverwaltungsansicht verwaltet, die sich auf der linken Seite in der Aktivitätsleiste befindet. Weitere Informationen zur Quellcodeverwaltungsansicht findest du in der VS Code-Dokumentation unter Versionskontrolle.

Da der webbasierte Editor die Erweiterung „GitHub-Repositorys“ für seine Funktionalität verwendet, kannst du Branches wechseln, ohne einen Stash für Änderungen auszuführen. Weitere Informationen findest du unter GitHub-Repositorys in der Dokumentation zu VS Code.

Neuen Branch erstellen

  1. Wenn der aktuelle Branch nicht in der Statusleiste angezeigt wird, klicke unten im Codespace mit der rechten Maustaste auf die Statusleiste, und wähle dann Quellcodeverwaltung aus.
  2. Klicke auf den Branchnamen in der Statusleiste. Der Branch in der Statusleiste
  3. Klicke in der Dropdownliste entweder auf den Branch, zu dem du wechseln möchtest, oder gib den Namen für einen neuen Branch ein, und klicke auf Neuen Branch erstellen. Auswählen aus dem Branchmenü Alle nicht committeten Änderungen, die du in deinem alten Branch vorgenommen hast, sind in deinem neuen Branch verfügbar.

Committen der Änderungen

  1. Klicke in der Aktivitätsleiste auf die Ansicht Quellcodeverwaltung. Ansicht „Quellcodeverwaltung“
  2. Klicke zum Stagen deiner Änderungen auf + neben der Datei, die du geändert hast, oder neben Änderungen, wenn du mehrere Dateien geändert hast und diese alle stagen möchtest. Seitenleiste der Quellcodeverwaltung mit hervorgehobener Stagingschaltfläche
  3. Gib eine Commitnachricht ein, die die von dir vorgenommene Änderung beschreibt. Seitenleiste der Quellcodeverwaltung mit einer Commitnachricht
  4. Klicke oben auf der Seitenleiste der Quellcodeverwaltung auf das Häkchen, um deine gestageten Änderungen zu übernehmen. Klicken auf das Häkchensymbol
  5. Nachdem du deine Änderungen committet hast, werden sie automatisch in deinen Branch auf GitHub gepusht.

Erstellen eines Pull Requests

  1. Nachdem du Änderungen an deiner lokalen Kopie des Repositorys vorgenommen hast, klicke auf das Symbol Pull Request erstellen. Seitenleiste der Quellcodeverwaltung mit hervorgehobener Stagingschaltfläche
  2. Überprüfe, ob der lokale Branch und das Repository, von wo aus du mergst, und der Remote-Branch und das Repository, wohin du mergst, richtig sind. Gib dem Pull Request dann einen Titel und eine Beschreibung. Seitenleiste der Quellcodeverwaltung mit hervorgehobener Stagingschaltfläche
  3. Klicke auf Erstellen.

Arbeiten mit einem vorhandenen Pull Request

Du kannst den web-based editor verwenden, um mit einem vorhandenen Pull Request zu arbeiten.

  1. Navigiere zum Pull Request, den du im web-based editor öffnen möchtest.
  2. Drücke ., um den Pull Request im web-based editor zu öffnen.
  3. Nachdem du Änderungen vorgenommen hast, committe sie mit den Schritten unter Committen deiner Änderungen. Deine Änderungen werden direkt in den Branch committet, es ist nicht erforderlich, die Änderungen zu pushen.

Verwenden von Erweiterungen

Der web-based editor unterstützt VS Code-Erweiterungen, die speziell erstellt oder aktualisiert wurden, um im Web ausgeführt werden zu können. Diese Erweiterungen werden als „Weberweiterungen“ bezeichnet. Informationen dazu, wie du eine Weberweiterung erstellen oder deine vorhandene Erweiterung für das Web aktualisieren kannst, findest du unter Weberweiterungen in der Dokumentation zu VS Code.

Erweiterungen, die im web-based editor ausgeführt werden können, werden in der Erweiterungsansicht angezeigt und können installiert werden. Wenn du Einstellungssynchronisierung verwendest, werden auch kompatible Erweiterungen automatisch installiert. Weitere Informationen findest du unter Einstellungssynchronisierung in der Dokumentation zu VS Code.

Problembehandlung

Wenn du Probleme beim Öffnen des web-based editor hast, versuche Folgendes:

  • Stelle sicher, dass du bei GitHub angemeldet bist.
  • Deaktiviere alle Werbeblocker.
  • Verwende ein Nicht-Inkognito-Fenster in deinem Browser, um den web-based editor zu öffnen.

Bekannte Einschränkungen

  • Der web-based editor wird derzeit in Chrome (und verschiedenen anderen Chromium-basierten Browsern), Edge, Firefox und Safari unterstützt. Es wird empfohlen, die neueste Version dieser Browser zu verwenden.
  • Einige Tastenzuordnungen funktionieren möglicherweise nicht, je nachdem, welchen Browser du verwendest. Diese Tastenzuordnungseinschränkungen werden im Abschnitt Bekannte Einschränkungen und Anpassungen der Dokumentation zu VS Code dokumentiert.
  • . funktioniert möglicherweise nicht, um den web-based editor gemäß deinem lokalen Tastaturlayout zu öffnen. In diesem Fall kannst du ein beliebiges GitHub-Repository im web-based editor öffnen, indem du die URL von github.com in github.dev änderst.