Ausführen · Vorschau · Design

Funktionen, um dein Programm laufen zu lassen (Ausführen), hineinzuschauen (Debuggen), Webseiten anzusehen (Webvorschau) und Designs zu prüfen (Design-Werkbank). Ändern → ausführen → prüfen — alles passiert in Blyck.

Funktion	Free / Pro
▶ Ausführen, Ausgabefenster, Markierung der Fehlerstellen	Kostenlos
Debug-Fenster (Ctrl+Shift+D) ansehen	Kostenlos
Webvorschau, Lesezeichen	Kostenlos
Aufnahmen · Aufzeichnungen an den KI-Chat senden	Pro
Ausführen und Beobachten durch die KI (Run & Observe), KI-Debug-Werkzeuge · automatische Untersuchung, Bedienung der Vorschau durch die KI, visuelle Regression, Design-Werkbank	Pro

Code ausführen (▶ Ausführen)

1. ▶ Ausführen — startet eine lokal gespeicherte Datei per Klick (während des Laufs ■ Stopp) · über das ▾ daneben auch "Debuggen" (F5) für Python · JavaScript
2. Statustext — am Ende "Exit-Code 0" · [■ Stopp] [Leeren] [✕]
3. Ausgabebereich — oben der $-Befehl (bernsteinfarben), dann die Programmausgabe, am Ende [Exit-Code 0] (grün)

Im Editor führst du die aktuelle Datei (oder ihr Projekt) mit einem Knopf aus und siehst die Ergebnisse live im Ausgabefenster unter dem Editor.

So gehst du vor

1. Speichere die Datei zuerst (Ctrl+S). ▶ Ausführen führt den auf der Festplatte gespeicherten Inhalt aus.
2. Klicke in der Editor-Kopfzeile auf [▶ Ausführen] (Ctrl+F5). Das Ausgabefenster öffnet sich.
3. Während das Programm läuft, wird der Knopf zum roten [■ Stopp].
4. Am Ende siehst du Exit-Code {n} und, falls Fehler gefunden wurden, {n} Problem(e).

▶ Ausführen erscheint nur bei lokal gespeicherten Dateien (nicht bei Remote-Dateien oder Dateien ohne Namen).

Mit welchem Befehl ausgeführt wird

Blyck sieht sich Datei und Projekt an und wählt den Befehl automatisch.

Ziel	Befehl
Dateien .py · .rb · .php · .lua · .sh	Die Datei wird direkt ausgeführt (python Datei usw.) — vor dem Projekt
go.mod	go run .
Cargo.toml	cargo run
*.sln · *.csproj	dotnet run
pubspec.yaml	flutter run
pom.xml / build.gradle	mvn exec:java / gradle run
package.json	npm start
.js / .go ohne Kennungsdatei	node Datei / go run Datei

Ausgabefenster und Fehlerstellen

• Ganz oben steht $ Befehl, dann normale Ausgabe, Fehlerausgabe (rot) und am Ende der Exit-Code. Aufbewahrt werden die letzten 5.000 Zeilen.
• [Leeren] löscht die Ausgabe, [✕] blendet das Fenster aus (das Programm läuft weiter).
• Blyck erkennt Fehlerformate in der Ausgabe (Python, Go, Rust, gcc/clang, C#, TypeScript usw.) und setzt in geöffneten Dateien rote (Fehler) und gelbe (Warnung) Unterstreichungen. Ein Klick auf eine Fehlerzeile springt zu dieser Zeile in der Datei.

Gut zu wissen

• Den Ausführungsbefehl kannst du weder ändern noch speichern. Um mit einem anderen Befehl zu starten, führe ihn selbst im Terminal aus.
• Bei CMake- und Make-Projekten funktioniert ▶ Ausführen nicht. Nutze im Terminal make o. Ä.
• Tastatureingaben werden nicht entgegengenommen. Programme, die auf Eingaben warten, wirken eingefroren — führe sie im Terminal aus.

Mit Debugger ausführen — an roten Punkten anhalten und Werte ansehen

Halte eine auf diesem PC gespeicherte Python- oder JavaScript-Datei an der gewünschten Zeile an, sieh dir die Variablenwerte in dem Moment an und geh Zeile für Zeile weiter. Ohne print.

1. Klick links neben die Zeilennummer, an der angehalten werden soll, oder drück F9 — ein roter Punkt (Haltepunkt) erscheint.
2. In der Kopfzeile ▶ Ausführen ▾ → Debuggen (oder F5). Für Python wird beim ersten Mal einmalig der Debugger geladen (debugpy, etwa 33 MB). JavaScript nutzt den in Node.js eingebauten Debugger.
3. Beim Halt wird die Zeile gelb, aktuelle Werte erscheinen blass am Zeilenende, und unten öffnet sich der Bereich Variablen · Aufrufliste. Fährst du über eine Variable, siehst du ihren Wert.
4. Fortsetzen (F5) · Nächste Zeile (F10) · Hineinspringen (F11) · Herausspringen (Shift+F11) · Debuggen beenden (Shift+F5).

• Mit KI fragen an der Haltestelle gehen Zeile · Fehler · aktuelle Werte · Aufrufliste · Ausgabe mit (Pro).
• Der KI-Chat debuggt selbst (Pro): Sag „finde die Ursache”, und die KI setzt rote Punkte, startet den Debugger und liest die Werte (dbg_breakpoint · dbg_start · dbg_step · dbg_inspect). Dein eigener Editor bewegt sich mit, und die Statusleiste zeigt KI-Chat debuggt. Geht im Modus ⚡ Ausführen · 🚀 Auto.
• Remote-Dateien (SFTP) und andere Sprachen werden noch nicht unterstützt.

Die KI führt aus und repariert — Run & Observe (Pro)

Sagst du dem KI-Chat „Führ die Tests aus und repariere sie, wenn sie fehlschlagen”, wiederholt die KI selbst ausführen → Ausgabe und Fehler prüfen → Code ändern → erneut ausführen. Du musst keine Ausgabe kopieren und einfügen.

1. Stelle den KI-Chat-Modus auf ⚡ Ausführen oder 🚀 Auto (in den Modi 💬 Chat und 📋 Plan kann nicht ausgeführt werden).
2. Bitte z. B.: „Führ pytest aus und repariere die Fehlschläge”.
3. Bei Befehlen, die Dateien verschieben oder überschreiben, erscheint eine Freigabekarte. Sehr gefährliche Befehle werden auch im Modus 🚀 Auto erfragt.

• Die Standard-Wartezeit beträgt 30 Sekunden. Bei dauerhaft laufenden Programmen wie Servern wird die Ausgabe bis dahin zurückgegeben.
• Ist der Projektordner des KI-Chats remote (SSH), wird auf dem Server ausgeführt.

Debug-Fenster und AI Debug Bridge

1. Filter — Felder label · loc, Auswahl level · source / 🔕 automatische KI-Untersuchung · ⏸ Pause · 🗑 Leeren · ✕ Schließen
2. Ein Eintrag — [Schritt] Name Wert · Quelle (terminal / preview)

Eine Einrichtung, mit der die KI interne Werte (z. B. Variablenwerte) eines laufenden Programms direkt lesen kann. Fügst du eine Protokollzeile der Form @BLYCK@ … in den Code ein, sammelt Blyck sie, sobald sie im Blyck-Terminal oder in der Webvorschau ausgegeben wird, und die KI liest sie, um die Ursache zu finden. Normalerweise fügt die KI die Zeilen selbst ein und entfernt sie auch selbst wieder.

• Mit Ctrl+Shift+D öffnest du das Fenster 🐞 Debug Bridge, das die gesammelten Einträge live zeigt (kostenlos). Du kannst nach Name, Ort und Stufe filtern.
• Schaltest du 🔔 Automatische KI-Untersuchung ein (Pro, standardmäßig aus), beginnt die KI automatisch zu untersuchen, sobald error- oder assert-Einträge entstehen. Da die KI genutzt wird, entstehen Kosten.
• Einträge, die im Ausgabefenster von ▶ Ausführen oder außerhalb von Blyck ausgegeben werden, werden nicht gesammelt.

Mehr dazu unter KI-Debug-Bridge.

Webvorschau (Live Preview)

1. Editor — der Code, der die Seite baut (app.py)
2. Leiste der Web-Vorschau — ← → ↻ ☆ · Adressfeld · − 100% + · 📷 Aufnehmen · Aufzeichnen
3. Die Seite in Entwicklung, angezeigt in einem kleinen Browser in Blyck

Ein kleiner Browser, der die Website, an der du arbeitest, in einem Blyck-Bereich anzeigt. Du kannst selbst darauf klicken, und auch die KI kann den Bildschirm sehen und bedienen. Die Vorschau selbst ist kostenlos.

So gehst du vor

1. Starte zuerst den Entwicklungsserver (z. B. im Terminal npm run dev).
2. Drücke Ctrl+Alt+B (oder Menü „Neuer Tab” → Kachel Webvorschau).
3. Gib die Adresse ein (Standard http://localhost:3000). [Öffnen].

• Ohne http:// wird es automatisch ergänzt. HTML-Dateien auf deinem PC öffnest du z. B. mit file:///C:/…/index.html.

Obere Leiste

Knopf	Funktion
← / → / ↻	Zurück / Vor / Neu laden
☆	Lesezeichen (aus dem Browser importieren)
Adressfeld	Adresse eingeben und Enter
− / 100% / +	Verkleinern / Zoomstufe (Klick setzt auf 100 %) / Vergrößern. 25 % bis 500 %
📷 Aufnehmen	Nimmt den Bildschirm auf, öffnet den Aufnahme-Editor und hängt das Bild an den KI-Chat an
Roter Punkt Aufzeichnen	Nimmt alle 0,5 Sekunden ein Bild auf (höchstens 60 Bilder, ca. 30 Sekunden) → zu sendende Bilder auswählen und an den KI-Chat anhängen

• Aufnahmen und Aufzeichnungen an die KI zu senden ist Pro. Öffne vor dem Senden einen KI-Chat-Bereich (sonst gehen deine Markierungen verloren).
• ☆ Lesezeichen: Beim ersten Klick erscheint der Knopf [Aus {Browser} importieren]. Importiert werden die Lesezeichen des Standardprofils von Chrome, Edge, Brave und Vivaldi (auf dem Mac auch Safari). Firefox geht nicht.
• Anmeldungen in neuen Fenstern wie bei Google oder GitHub öffnen sich in einem echten Fenster, sodass die Anmeldung funktioniert.
• Konsolen- und Netzwerkeinträge werden jeweils bis zu den letzten 200 gesammelt (die KI liest sie).
• Nach einem Neustart der App wird nur die Adresse wiederhergestellt.

Die KI sieht und bedient die Vorschau (Pro)

Der KI-Chat sieht die Webvorschau direkt, klickt, tippt, liest Konsolenfehler und repariert.

Gib die Testzugangsdaten ins Anmeldeformular ein und schick es ab. Wenn es Konsolenfehler gibt, finde die Ursache und behebe sie.

Die KI geht so vor: eingeben → warten → Bildschirm aufnehmen → Konsole lesen.

Was sie tun kann	Freigabe
Bildschirm aufnehmen, Konsolen- und Netzwerkeinträge lesen, Adresse aufrufen, warten	Nicht nötig
Elemente anklicken, Text eingeben, JS in der Seite ausführen	Im Modus ⚡ Ausführen nötig

• Klicken, Eingeben und JS-Ausführung sind in den Modi 💬 Chat und 📋 Plan gesperrt.
• Damit die KI den Bildschirm aufnehmen kann, muss der Vorschau-Bereich auf dem Bildschirm sichtbar sein.

Visuelle Regression — Bildschirm vor und nach der Änderung vergleichen (Pro)

Du speicherst den Bildschirm vor einer Codeänderung als Referenz und vergleichst ihn mit dem Bildschirm danach, um zu finden, ob „etwas ungewollt kaputtgegangen ist”. Funktioniert in Webvorschau, Desktop-Spiegelung und Design-Werkbank.

Diese Funktion steuerst du, indem du es der KI sagst. Es gibt keinen Knopf für dich.

1. Bitte z. B.: „Nimm den aktuellen Bildschirm als Referenz, ändere die Knopffarbe und vergleiche dann.”
2. Die KI speichert den Referenzbildschirm, ändert den Code und vergleicht.

Urteil	Bedeutung
Bestanden	Unterschied höchstens 2 %
Prüfen	Über 2 %
Regression	Die Bildschirmgröße selbst hat sich geändert (Verdacht auf kaputtes Layout)

Das Vergleichsbild zeigt links BEFORE, rechts AFTER und Änderungen in roten Kästen. Der Referenzbildschirm liegt nur im Arbeitsspeicher und verschwindet, wenn du den Bereich schließt oder die App neu startest.

Design-Werkbank (Pro)

Ein Bereich, der die von der KI erstellten Design-Bausteine (Tokens wie Farben und Abstände, Komponenten wie Knöpfe, Bildschirme, Bildschirmabläufe) als Kartenliste sammelt und sie zur Prüfung in Web-, Tablet- und Handygröße zeigt (Namensschild Design, 🎨).

1. Lege im Ordner design-system des Projektordners die Design-Listendatei _ds_manifest.json ab. Meist erstellt die KI (Claude · Codex) sie für dich.
2. Sag dem KI-Chat (Modus ⚡ Ausführen oder 🚀 Auto) „Öffne das Design-Panel”. Über das Menü „Neuer Tab” oder Tastenkürzel lässt es sich nicht öffnen.
3. Ein Klick auf eine Karte zeigt sie groß (bei Web drei Felder: Mobil · Tablet · Desktop). Mit ← Liste geht es zurück.

Knopf	Funktion
[Tokens exportieren ↓]	Design-Tokens als Dateien für Flutter (app_tokens.dart) und CSS (tokens.css) exportieren
[Golden-Harness ↓]	Testdateien (.dart) für den Bildschirmvergleich unter iOS und Android erzeugen
Plattform wählen	Alle / web / desktop / iOS / Android

• Ist der Design-Bereich offen, erhält die KI zusätzlich den Hinweis, die Tokens und Komponenten aus der Liste wiederzuverwenden.
• Zeigt der visuelle Vergleich ein Problem, erscheinen unter der Antwort die Knöpfe [Design regenerieren] / [Verwerfen].
• Den Ordner design-system in Remote-Projektordnern (SFTP) liest Blyck nicht.

Häufige Fragen

F. Der Knopf ▶ Ausführen ist nicht zu sehen. Es ist eine Remote-Datei oder eine nie gespeicherte Datei ohne Namen. Er erscheint nur bei lokal gespeicherten Dateien.

F. Es erscheint „Kein Ausführungsbefehl gefunden”. Die Dateiart wird nicht unterstützt, oder es ist ein CMake- bzw. Make-Projekt. Führe es selbst im Terminal aus.

F. Meine Änderungen kommen beim Ausführen nicht an. Du hast nicht gespeichert. Nach Ctrl+S erneut ausführen.

F. Die Webvorschau ist weiß oder zeigt „Seite konnte nicht geladen werden”. Prüfe, ob der Entwicklungsserver läuft und Adresse und Port stimmen, und klicke dann auf ↻. Bei Remote-Projekten läuft der Server remote — öffne also die Adresse des Servers.

F. Die KI kann den Bildschirm nicht aufnehmen. Der Vorschau-Bereich ist verdeckt. Hol den Tab nach vorne, damit er sichtbar ist.

F. Im Debug-Fenster erscheint nichts. Du hast im Ausgabefenster von ▶ Ausführen oder außerhalb von Blyck ausgeführt. Führe im Blyck-Terminal oder in der Webvorschau aus.

F. Der visuelle Vergleich meldet „Keine Baseline”. Durch den Neustart der App oder das Schließen des Bereichs ist die Referenz verschwunden. Lass die KI die Referenz neu setzen.

F. Das Design-Panel öffnet sich nicht. Du bist im Modus 💬 Chat oder 📋 Plan. Wechsle in den Modus ⚡ Ausführen und bitte erneut.

F. (Mac) Bei den Lesezeichen fehlt Safari. Erlaube Blyck unter Systemeinstellungen → Datenschutz & Sicherheit → Festplattenvollzugriff.