RUNTIME TELEMETRY WIDGET

Ein Script-Tag.
Volle Sichtbarkeit.

DevChef sammelt automatisch Console-Logs, JS-Fehler, Network-Requests und Performance-Metriken — ohne Build-Step, ohne Dependencies. Und liefert alles direkt an Claude Code via MCP.

Zero Dependencies ~4KB gzip MCP Ready Claude Code Odoo Integration PHP Relay Kunden-Feedback
<!-- Einbinden — fertig -->
<script src="devchef.js"
        data-project="my-app"
        data-endpoint="http://localhost:8099/ingest"
        data-feedback="true"></script>
01 — Modi

Für wen ist was sichtbar?

DevChef passt sich der Rolle an. Kunden sehen nur den dezenten Feedback-Button — Entwickler haben das volle Panel mit Live-Stream, Fehler-Counter und Filtern.

KUNDEN-MODUS
✎
💬

Nur der Annotation-Button (✎) und die Feedback-Liste (💬) sind sichtbar. Kein Panel, keine Telemetrie-UI, keine Error-Badges. Der Kunde merkt kaum etwas — außer dass er Feedback geben kann.

<script
  src="devchef.js"
  data-project="my-app"
  data-endpoint="https://…/ingest"
  data-panel="false"
  data-feedback="true"
></script>
DEV-MODUS
◆ DEVCHEF3
TypeError: null
fetch /api/user 200
fetch /data 404

Das volle ◆-Panel zeigt Fehler-Counter, Live-Stream aller Entries, Level-Filter und Export. Für Entwickler, QA und alle, die die Oberfläche debuggen.

<script
  src="devchef.js"
  data-project="my-app"
  data-endpoint="https://…/ingest"
  data-panel="true"
  data-feedback="true"
></script>
EINBINDUNG
<!-- Minimal: nur Telemetrie, kein Panel, kein Feedback -->
<script src="https://cdn.example.com/devchef.js"
         data-project="my-app"
         data-endpoint="https://bridge.example.com/ingest"
         data-panel="false"></script>

Sammelt Console-Logs, Fehler und Network-Requests — unsichtbar im Hintergrund. Claude Code kann via MCP darauf zugreifen.

<!-- Vollständig: Panel + Feedback + Feedback-Addon -->
<script src="devchef.js"
         data-project="my-app"
         data-endpoint="https://bridge.example.com/ingest"
         data-panel="true"
         data-feedback="true"></script>
<script src="devchef-feedback.js"></script>

Zwei Script-Tags genügen. Das Feedback-Addon lädt sich nur, wenn DevChef bereits initialisiert ist.

<!-- PHP Relay: kein Node.js nötig, Daten landen in devchef-data/ -->
<script src="devchef.js"
         data-project="my-app"
         data-endpoint="/devchef-relay.php"
         data-panel="true"
         data-feedback="true"></script>

Relay-Datei (devchef-relay.php) auf den Server kopieren — fertig. Kein Docker, kein Python.

<!-- Nur für Devs laden: z.B. via URL-Parameter -->
<script>
  if (location.search.includes('devchef=1')) {
    var s = document.createElement('script');
    s.src = 'devchef.js';
    s.setAttribute('data-project', 'my-app');
    s.setAttribute('data-endpoint', 'https://bridge.example.com/ingest');
    s.setAttribute('data-panel', 'true');
    document.head.appendChild(s);
  }
</script>

Aufruf mit ?devchef=1 aktiviert das Panel — Kunden sehen nichts, Devs debuggen live.

02 — Szenarien

Realistische App-Ereignisse auslösen

Klicke auf ein Szenario — DevChef fängt das Ereignis sofort ab und zeigt es im Stream unten.

CONSOLE
👤
User Login
Authentifizierter User mit Session-Daten
console.log
📦
API Response
GET /api/products → 42 items, 234ms
console.log
⚠️
Deprecation
CartAPI.getItems() → removal in v4.0
console.warn
🔄
State Change
Redux: CART_UPDATE → 3 items, €247.90
console.info
ERRORS
✕
TypeError
Cannot read 'email' of null — UserCard.jsx:47
window.onerror
✕
API Timeout
POST /api/orders nach 5000ms
unhandledrejection
✕
Render Error
Maximum update depth exceeded — React
console.error
✕
Auth Error
JWT expired — redirect to /login
console.error
NETWORK
⇄
API Call 200
GET jsonplaceholder → success
fetch
⇄
Not Found 404
GET /api/product/9999 → 404
fetch
⇄
XHR Request
Legacy XHR → GET /api/legacy
XMLHttpRequest
⇄
Network Fail
ERR_NAME_NOT_RESOLVED
fetch error
PERFORMANCE & EVENTS
◎
Long Task
Synchroner Block > 50ms simuliert
perf
⚙
Custom Mark
Deployment-Start Marker setzen
DevChef.mark()
▶
Alle Szenarien
Alle Events nacheinander auslösen
×12
🗑
Reset
Buffer und Stream leeren
clear()
0 Entries total
0 Errors
0 Network Calls
0 Perf Events
03 — Live Stream

Entry-Stream in Echtzeit

Alle Ereignisse landen hier sofort — genau das sieht Claude Code via MCP.

DEVCHEF STREAM
0
Noch keine Entries — klicke ein Szenario oben ↑
04 — Kunden-Feedback

Annotation-Werkzeuge live testen

Klicke ✎ (unten rechts) um den Annotation-Modus zu starten. Zeichne Rahmen, Pfeile oder Pins auf die simulierte Webapp — dann Kommentar eingeben und absenden.

myapp.example.com / dashboard
MYAPP
Dashboard Produkte Bestellungen Einstellungen

Willkommen zurück, David.

Dein Dashboard zeigt alle wichtigen Metriken auf einen Blick. Heute: 12 neue Bestellungen, €4.280 Umsatz.

📦 Lagerbestand

142 Artikel verfügbar. 3 Artikel unter Mindestbestand — Nachbestellung empfohlen.

💳 Zahlungen

Letzte 30 Tage: €38.420 verarbeitet. 2 ausstehende Rückerstattungen.

👥 Kunden

287 aktive Kunden. 14 Neuregistrierungen diese Woche. NPS: 72.

⚡ Performance

API Latenz: ø 187ms. Uptime: 99.94%. 0 aktive Incidents.

✎ Lila Button (unten rechts) → Annotation starten  |  💬 Blauer Button → Feedback-Liste
05 — Public API

window.DevChef direkt ansprechen

Die vollständige API steht im Browser-Kontext zur Verfügung — auch in der DevTools-Konsole.

DevChef.stats()
Zählt Entries nach Source und Level
— noch nicht ausgeführt
DevChef.session
Session-Objekt dieser Seite
— noch nicht ausgeführt
DevChef.exportJSON()
Vollständiger Export — Download + Clipboard
— noch nicht ausgeführt
DevChef.entries()
Letzten 5 Entries im Buffer
— noch nicht ausgeführt
06 — Bridge & MCP

Verbindung zur Bridge testen

Die Bridge läuft auf Port 8099 und exponiert alle Daten via MCP SSE an Claude Code. Hier kannst du die Verbindung live prüfen.

Bridge-Endpunkt
http://localhost:8099
BRIDGE LOG
07 — Use Cases

Wer nutzt DevChef — und wofür?

DevChef verbindet die, die Fehler erleben, mit denen, die sie beheben. Vier typische Szenarien.

👩‍💻
DEVELOPER
Lisa debuggt live
"Unser Kunde meldet: 'Die Seite lädt manchmal nicht.' Im Ticketsystem steht kein Stack Trace."
DevChef hat den JS-Fehler bereits gefangen und an die Bridge gesendet — mit vollem Stack Trace, Network-Requests davor und dem Viewport-Zustand. Claude Code liest alles direkt via MCP.
✓ Bug in 8 Minuten reproduziert und gefixed
🧑‍💼
ENDKUNDE
Thomas gibt Feedback
"Ich wollte nur schnell sagen, dass dieser Button komisch aussieht — aber ich weiß nicht wie."
Thomas klickt ✎, zeichnet einen Rahmen um den Button, tippt "Schrift zu klein", und schickt ab. DevChef sendet Screenshot-Koordinaten, Viewport-Größe und URL — alles ohne Plugin oder Account.
✓ UI-Problem mit exakter Koordinate im Backend sichtbar
🔍
QA / TESTER
Marie testet das Staging
"Ich klicke durch den Checkout-Flow und notiere Auffälligkeiten — aber Screenshots sind mühsam."
Marie aktiviert DevChef mit ?devchef=1. Jede ihrer Aktionen, jeder Network-Call, jede Console-Ausgabe landet im Backend-Dashboard — sortiert nach Zeitstempel. Kein manuelles Notizenmachen mehr.
✓ Vollständiges Session-Protokoll automatisch erfasst
📋
PROJECT MANAGER
Felix triagiert Errors
"Wir haben drei wiederkehrende Fehler im Log — ich muss die als Tasks ins Projekt-Tool."
Im Backend-Dashboard sieht Felix die Fehler gruppiert nach Fingerprint. Ein Klick auf → Odoo Task — der Fehler landet mit Stack Trace als Task im richtigen Odoo-Projekt. Doppelte Tasks werden automatisch erkannt.
✓ 3 Odoo-Tasks mit vollständigen Infos in 2 Minuten
🤖
AI DEVELOPER
Claude Code analysiert
"Kannst du dir anschauen, welche Fehler gerade auf der Staging-Seite passieren?"
Claude ruft devchef_query via MCP auf, sieht die letzten 50 Fehler, korreliert sie mit Network-Requests, und schlägt konkrete Fixes vor. Alles ohne manuelles Copy-Paste aus dem Log.
✓ Root Cause analysiert, Fix-Vorschlag in unter 30 Sekunden
🐘
PHP AGENCY
Julia deployt ohne Node
"Wir betreiben klassisches LAMP-Hosting — kein Docker, kein Node.js, kein Deployment-Pipeline."
devchef-relay.php kommt per FTP auf den Server. Kein Build-Step, keine Deps. DevChef sendet direkt ans PHP-Skript, das Logs in Dateien schreibt. Funktioniert auf Shared Hosting.
✓ Telemetrie läuft auf jedem PHP-Webserver