tattletab für Entwickler

Schick einem Nutzer einen Link und bekomm einen genauen Bericht über seinen Browser zurück: rund 2.000 Funktionsprüfungen, Einstellungen, Bildschirm, Schriften, GPU, Baseline-Status und was seine Anfragen blockiert. Ohne Konto, ohne Installation.

Einen Nutzer um einen Bericht bitten

Schick diesen Link, mit deinem Namen oder Ticket nach for=:

https://tattletab.net/?for=Acme+support+%2312

Mit JavaScript baut dieses Feld den Link für dich und zeigt einen QR-Code zum Scannen mit dem Handy.

Was du zurückbekommst

Einen Link oder eine Datei. Der Nutzer lädt den Bericht hoch (90 Tage gespeichert, lesbar für jeden mit dem Link) oder lädt ihn herunter. Eine Datei öffnest du, indem du sie auf tattletab.net ziehst.
Auffälliges. Der Bericht beginnt mit dem, was am häufigsten erklärt, warum ein Fehler nur bei manchen auftritt: ein veralteter Browser, ein App-interner Browser, eine übersetzte Seite, Zoom, erzwungene Farben, blockierte Anfragen oder Cookies, ein privates Fenster, ein abgeschalteter JavaScript-JIT, Speicher, der nicht funktioniert, eine falsch gehende Uhr.
Eine Zusammenfassung für deinen Issue-Tracker. „Für Fehlerbericht kopieren“ legt Markdown in die Zwischenablage: Browser und wie weit er zurückliegt, Gerät, Einstellungen, Auffälliges, die Funktionen, die deine Seite braucht, Baseline-Status, fehlende Syntax, die Beschreibung des Nutzers und den Link.
Alles andere im Bericht: Request-Header, Client Hints, Bildschirm und Layout, Berechtigungen, Speicher und Worker, die wirklich funktionieren, Autoplay, Push, eingebaute KI-Modelle, Drittanbieter-Cookies, WebRTC, Codecs, Schriften, Emoji, Tastaturlayout, Datums- und Zahlenformate sowie die Unterstützung jeder Web-API, jeder CSS-Eigenschaft und jedes HTML-Elements in den Daten von MDN.

Der Nutzer sieht jeden Wert zuerst und kann jeden davon ausblenden; ausgeblendete Werte bleiben überall verborgen.

Die Funktionen prüfen, die deine Seite braucht

Häng needs= mit den Funktionen, auf die deine Seite angewiesen ist, an den Link. Der Bericht beginnt dann mit „11 von 12 unterstützt, fehlt: View Transitions“, und die Liste wird im Bericht gespeichert.

https://tattletab.net/?for=Acme&needs=view-transitions,container-queries,api.Navigator.share

Verwende web-features-IDs (view-transitions, has, dialog) oder Schlüssel aus browser-compat-data für einzelne APIs und Member (api.Navigator.share, css.properties.container, javascript.builtins.Array.findLast). Bis zu 100, durch Kommas getrennt.

Deine eigene Seite einbeziehen

Ein Bericht von tattletab.net kann deine Seite nicht sehen. Füge das Snippet und einen Link ein:

<script src="https://tattletab.net/snippet.js" async></script>
<a href="https://tattletab.net/" data-tattletab="Acme support"
   data-tattletab-needs="view-transitions,api.Navigator.share">Report a problem</a>

Ab dem Laden sammelt das Snippet die JavaScript-Fehler deiner Seite, unbehandelte Promise-Ablehnungen, Verstöße gegen die Content Security Policy und Dateien, die nicht geladen werden konnten (jeweils höchstens 20), und misst die Core Web Vitals (LCP, CLS, INP); lade es früh, um mehr zu erfassen. Klickt der Nutzer auf den Link, umfasst der Bericht auch deine Seite: diese Fehler, ob Cookies und Speicher dort funktionieren, Quirks-Modus, iframes, Zoom, Ladezeiten und Spuren von Erweiterungen, die sie verändern. Die Daten stehen nach dem # in der URL, den Browser nie an einen Server senden; Query-Strings werden weggelassen, weil sie Tokens enthalten können.

Füge eigene Felder hinzu (höchstens 20 kurze Werte, die der Nutzer vor dem Teilen sieht) oder öffne den Bericht aus deinem Code:

tattletab.set({ appVersion: "2.4.1", plan: "pro" });
tattletab.report({ for: "Acme support", needs: ["container-queries"] });

tattletab.context() gibt zurück, was gesendet würde. Das Snippet ist reines ES5, etwa 10 KB groß, ohne Abhängigkeiten, und sendet von sich aus nichts.

In deine Issue-Vorlage aufnehmen

Ein GitHub-Issue-Formular (.github/ISSUE_TEMPLATE/bug.yml), das nach dem Link fragt:

name: Bug report
description: Something doesn't work
body:
  - type: textarea
    attributes:
      label: What happened?
    validations:
      required: true
  - type: input
    attributes:
      label: Browser report
      description: >-
        Open https://tattletab.net/?for=Our+project, press "Upload and get link",
        and paste the link here. You can hide anything before sharing.
      placeholder: https://tattletab.net/r/...

Zwei Browser vergleichen

tattletab.net/?compare zeigt nur die Unterschiede zwischen zwei Berichten, zum Beispiel einem Browser, in dem der Fehler auftritt, und einem, in dem er nicht auftritt. Zwei hochgeladene Berichte lassen sich direkt verlinken:

https://tattletab.net/?compare=erste-bericht-id,zweite-bericht-id

Optionen

`?for=Name`	Zeigt dem Nutzer, wer fragt, und speichert es im Bericht (bis zu 200 Zeichen).
`?needs=a,b`	Funktionen, die deine Seite braucht; oben im Bericht geprüft und darin gespeichert.
`?lang=de`	Sprache der Oberfläche: `en`, `de`, `fr` oder `es`. Ohne Angabe gilt die Sprache des Browsers.
`?compare, ?compare=a,b`	Öffnet den Vergleich, optional mit zwei Berichts-IDs.
`#site=...`	Wird vom Snippet gesetzt: Kontext von deiner Seite. Nicht zum Selbstschreiben gedacht.

Berichte per Code lesen

GET https://tattletab.net/api/reports/{id} liefert den Bericht als JSON (Format tattletab/v1: createdAt, optional context mit requestedBy, note und needs, sowie entries mit id, label, value, status und sensitivity). Abrufe sind auf 60 pro Minute und Adresse begrenzt. Berichte laufen nach 90 Tagen ab; nur der Browser, der hochgeladen hat, kann einen vorher löschen.

Das Format ist als JSON Schema unter https://tattletab.net/schema.json beschrieben, zum Prüfen von Berichten oder Erzeugen von Typen.

Sprachen: English · Deutsch · Français · Español