Vorschau
Einen laufenden Dev-Server in der App sehen, in Tablet- und Handygröße prüfen, auf ein Element zeigen und die KI das Ergebnis selbst ansehen lassen
Der Tab Live-Vorschau zeigt ein laufendes Web-Projekt in der App, damit Sie nicht in einen Browser wechseln müssen, um zu sehen, ob die Änderung gewirkt hat.
Starten
Drei Wege hinein:
| Weg | Wann |
|---|---|
| Server starten | Das Projekt ist da und die App ermittelt selbst, wie es zu starten ist |
| Web-App erstellen | Im freigegebenen Ordner liegt noch kein Projekt |
| Adresse eingeben | Der Server läuft schon, oder er läuft woanders |
Das Adressfeld nimmt localhost:3000 oder eine vollständige URL. Die Adresse wird je Projekt gemerkt.
Die KI kann die Vorschau ebenfalls öffnen, auf einer Dev-Server-Adresse oder auf einer statischen Datei wie einer HTML-Seite, einer SVG, einem Bild oder einem PDF aus einem freigegebenen Ordner.
Wenn nichts erscheint
Der Tab prüft, ob die Adresse antwortet, bevor er ein Frame zeigt. Eine leere weiße Fläche bleibt also nie unerklärt:
| Meldung | Ursache |
|---|---|
| Kein Server antwortet | Auf dieser Adresse hört nichts. Die KI oder das Terminal können einen starten |
| Kann nicht eingebettet werden | Die Seite verweigert die Darstellung in einem Frame. Nur die Seite selbst kann das erlauben, also im Browser öffnen |
| Der Server hat keine Adresse gemeldet | Er ist gestartet, hat aber nichts Erkennbares ausgegeben, etwa bei eigenem Logger. Tragen Sie die Adresse selbst ein |
Im Browser öffnen ist immer verfügbar, für die Fälle, in denen Sie echte Browser-Entwicklerwerkzeuge wollen.
Bildschirmgrößen
Wechseln Sie zwischen Desktop, Tablet und Handy und drehen Sie die Ausrichtung. Tablet und Handy werden in einem festen Rahmen mit üblichen Gerätemaßen dargestellt, ein responsives Layout lässt sich also prüfen, ohne das Fenster zu verkleinern.
Ein Element auswählen
Element auswählen macht aus der Vorschau eine Auswahl. Klicken Sie ein Element in der Seite an, und es hängt an Ihrer nächsten Nachricht. Sie können also „mach das schmaler" schreiben, statt zu beschreiben, wo „das" ist. Erneutes Klicken hebt die Auswahl auf. Bis zu acht Elemente gleichzeitig.
Das ist der schnellste Weg, auf etwas in einer Seite zu zeigen, die Sie nicht geschrieben haben oder deren Klassennamen Sie nicht kennen.
Was die KI sehen kann
Zwei Werkzeuge machen den Unterschied zwischen einer KI, die rät, und einer, die nachsieht:
- Ein Bildschirmfoto der Vorschau. Die KI nimmt ein Bild der aktuell geladenen Seite auf und sieht es sich an. Das Bild erscheint zusätzlich in der Unterhaltung, das ist Ihr Beleg, dass sie wirklich hingesehen hat und es nicht nur behauptet.
- Die Browser-Konsole dieser Seite. Fehler und Warnungen der laufenden Seite, nach Stufe filterbar. So wird ein Laufzeitfehler gefunden, der im Terminal nie auftaucht.
Der Konsolen-Mitschnitt wird beim Navigieren und Neuladen geleert, er meldet also nie die Fehler der vorherigen Seite.
„Bring das Layout auf der Über-uns-Seite in Ordnung" wird damit zu einer Schleife, die die KI selbst schließen kann: Datei ändern, neu laden, Bildschirmfoto, ansehen, nachjustieren. Bitten Sie sie, das Ergebnis zu prüfen, dann tut sie es.
Cowork hat keinen Vorschau-Tab
In Cowork werden Dokumente im Editor-Tab dargestellt und nicht in einem eigenen Vorschau-Tab, denn bei einem Dokument sind Vorschau und das, was Sie bearbeiten würden, dieselbe Datei. Es gibt dort kein Adressfeld, keinen Dev-Server und keine Elementauswahl. Das ist alles Code-Sache.