Zum Hauptinhalt springen
Der Code-Tab ermöglicht es dir, den Quellcode deiner App direkt anzusehen und zu bearbeiten. So hast du die Kontrolle über Funktionalität, Design und Verhalten deiner App und siehst Änderungen sofort.
Der Code-Tab richtet sich an Entwickler, die mehr Kontrolle wollen. Für einfachere Änderungen verwende den visuellen Editor und die KI-Tools von Base44.
Die Oberfläche des Code-Tabs zeigt den Quellcode deiner App

​
Auf den Code-Tab zugreifen

So öffnest du den Code-Tab:
  1. Gehe zum Dashboard deiner App.
  2. Klicke auf den Tab Code.
Der Code-Tab zeigt deine Projektdateien in einem Datei-Explorer auf der linken Seite an, während der Code-Editor den Hauptbereich einnimmt.
Auf den Code-Tab aus deinem App-Dashboard zugreifen

​
Durch deine Codebasis navigieren

Verwende die Funktion Files used in this page, um zu sehen, welche Dateien die gerade angezeigte Seite antreiben. So siehst du genau, welche Code-Dateien ausgeführt werden, und weißt, wo du hingehen musst, wenn du die Seite bearbeiten oder ein Problem untersuchen möchtest. Jeder Eintrag in der Liste zeigt den Dateinamen und den Ordnerpfad, gruppiert nach Speicherort in deinem Projekt wie pages oder components. So siehst du die auf einer Seite verwendeten Dateien:
  1. Gehe zu deinem App-Editor.
  2. Klicke auf das Symbol More Actions oben rechts.
  3. Klicke auf Files used in this page.
Auf einer Seite deiner App verwendete Dateien anzeigen
Wenn du von dieser fokussierten Ansicht zur vollständigen Dateistruktur wechseln möchtest, klicke auf See all files. Dadurch gelangst du zur kompletten Code-Datei-Ansicht und kannst von dort aus weiter erkunden.

​
Mit Live-Vorschau bearbeiten

Der Code-Tab bietet eine geteilte Bildschirmansicht, die deinen Code auf der einen Seite und eine Live-Vorschau deiner App auf der anderen zeigt. So siehst du Änderungen sofort, ohne den Kontext wechseln zu müssen.
Geteilte Bildschirmansicht mit Code und Live-Vorschau
So bearbeitest du mit Live-Vorschau:
  1. Öffne eine Datei im Code-Tab.
  2. Klicke auf den Split-Screen-Schalter oben rechts.
  3. Bearbeite deinen Code links und sieh deine Änderungen rechts.
Jedes Mal, wenn du Änderungen am Code vornimmst:
  • Klicke auf Save unten auf dem Bildschirm, um deine Änderungen anzuwenden und die Vorschau mit dem neuesten Code zu aktualisieren.
  • Klicke auf Discard unten auf dem Bildschirm, wenn du alle ungespeicherten Änderungen verwerfen und zur zuletzt gespeicherten Version der Datei zurückkehren möchtest.
Wichtig: Wenn du Änderungen am Code deiner App vornimmst, stelle sicher, dass du auf Publish klickst, damit sie in deiner App live gehen.
Wenn du den geteilten Bildschirm verlassen möchtest, klicke auf Exit split. Für lokale Entwicklung mit deiner eigenen IDE siehe GitHub-Integration.

​
KI-Code-Änderungen prüfen

Wenn die KI deine App bearbeitet, kannst du das Modal Code changes öffnen, um vor dem Veröffentlichen genau zu sehen, was sie geändert hat. Das Modal zeigt jede Datei, die die KI angefasst hat, gruppiert nach Ordner, mit einer Diff-Ansicht für jede einzelne. So öffnest du das Code-changes-Modal:
  1. Gehe zum KI-Chat in deinem App-Editor.
  2. Bewege den Mauszeiger über eine Nachricht, in der die KI eine Datei bearbeitet oder erstellt hat.
  3. Klicke auf das Drei-Punkte-Symbol neben dieser Änderung und wähle View Changes.
Ein Modal öffnet sich mit einem Dateibaum auf der linken Seite und dem Diff der ausgewählten Datei auf der rechten. Eine Statusleiste oben schlüsselt auf, wie viele Dateien hinzugefügt, geändert und gelöscht wurden. Dateien im Baum sind farbcodiert nach Status:
  • Grün für neu hinzugefügte Dateien.
  • Bernsteinfarben für geänderte Dateien, die in einer Side-by-Side-Diff-Ansicht geöffnet werden.
  • Rot für gelöschte Dateien.
Klicke auf eine beliebige Datei im Baum, um direkt zu ihrem Diff zu springen.

​
FAQs

Ja. Du kannst jede Code-Datei öffnen und bearbeiten, die im Code-Files-Panel erscheint, einschließlich pages, components, layouts und Entity-Helfern. Wenn ein Teil der App für dich generiert wurde, erscheint er trotzdem als normaler Code, den du ändern kannst.
Nein. Du kannst im Code-Editor in voller Breite arbeiten, wenn du mehr Platz bevorzugst. Der geteilte Bildschirm ist hilfreich, wenn du die Vorschau neben deinem Code sehen möchtest, aber du kannst ihn jederzeit ausschalten und später wieder öffnen.
Discard entfernt alle ungespeicherten Änderungen in der aktiven Datei und stellt die zuletzt gespeicherte Version wieder her. Das ist nützlich, wenn du etwas ausprobierst, das nicht funktioniert, und schnell zurückgehen möchtest. Sobald du auf Discard klickst, kannst du den ungespeicherten Code aus dieser Sitzung nicht wiederherstellen.
Du musst kein Experte sein, aber grundlegende Vertrautheit mit React und JSX hilft. Du kannst mit kleinen Änderungen beginnen, wie z. B. Text aktualisieren, components austauschen oder einfache Styles ändern, und dich dann zu fortgeschrittenerer Logik vorarbeiten, sobald du sicherer wirst.
Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die englische Version.