tattletab pour les développeurs

Envoyez un lien à un utilisateur et recevez un rapport exact de son navigateur : environ 2 000 vérifications de fonctions, réglages, écran, polices, GPU, statut Baseline et ce qui bloque ses requêtes. Sans compte, sans installation.

Demander un rapport à un utilisateur

Envoyez ce lien, avec votre nom ou votre ticket après for= :

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

Avec JavaScript, ce cadre construit le lien pour vous et affiche un QR code à scanner avec un téléphone.

Ce que vous recevez

Un lien ou un fichier. L'utilisateur envoie le rapport (conservé 90 jours, lisible par toute personne ayant le lien) ou le télécharge. Vous ouvrez un fichier en le déposant sur tattletab.net.
À noter. Le rapport commence par ce qui explique le plus souvent un bug que seules certaines personnes voient : un navigateur pas à jour, le navigateur intégré d'une app, une page traduite, le zoom, des couleurs forcées, des requêtes ou cookies bloqués, une fenêtre privée, le JIT JavaScript désactivé, un stockage qui échoue, une horloge décalée.
Un résumé pour votre outil de tickets. « Copier pour un rapport de bug » place du Markdown dans le presse-papiers : navigateur et son retard, appareil, réglages, points à noter, fonctions requises par votre site, statut Baseline, syntaxe manquante, la description de l'utilisateur et le lien.
Tout le reste du rapport : en-têtes de requête, client hints, écran et mise en page, autorisations, stockage et workers qui fonctionnent vraiment, lecture automatique, push, modèles d'IA intégrés, cookies tiers, WebRTC, codecs, polices, emoji, disposition du clavier, formats de date et de nombre, et la prise en charge de chaque API web, propriété CSS et élément HTML des données de MDN.

L'utilisateur voit chaque valeur d'abord et peut masquer n'importe laquelle ; les valeurs masquées le restent partout.

Vérifier les fonctions dont votre site a besoin

Ajoutez needs= au lien avec les fonctions dont votre site dépend. Le rapport commence alors par « 11 sur 12 prises en charge, manquantes : View Transitions », et la liste est enregistrée dans le rapport.

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

Utilisez des identifiants web-features (view-transitions, has, dialog) ou des clés de browser-compat-data pour des API et membres précis (api.Navigator.share, css.properties.container, javascript.builtins.Array.findLast). Jusqu'à 100, séparés par des virgules.

Inclure votre propre page

Un rapport de tattletab.net ne voit pas votre site. Ajoutez l'extrait et un lien :

<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>

Dès son chargement, l'extrait conserve les erreurs JavaScript de votre page, les rejets de promesses non gérés, les violations de la Content Security Policy et les fichiers qui n'ont pas pu être chargés (20 au plus pour chacun), et mesure les Core Web Vitals (LCP, CLS, INP) ; chargez-le tôt pour en capter davantage. Quand l'utilisateur clique sur le lien, le rapport couvre aussi votre page : ces erreurs, le fonctionnement des cookies et du stockage, le mode quirks, les iframes, le zoom, les temps de chargement et les traces d'extensions qui la modifient. Les données passent après le # de l'URL, que les navigateurs n'envoient jamais à un serveur ; les paramètres de requête sont omis car ils peuvent contenir des jetons.

Ajoutez vos propres champs (20 valeurs courtes au plus, montrées à l'utilisateur avant le partage) ou ouvrez le rapport depuis votre code :

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

tattletab.context() renvoie ce qui serait envoyé. L'extrait est en ES5 pur, environ 10 Ko, sans dépendances, et n'envoie rien de lui-même.

L'ajouter à votre modèle de ticket

Un formulaire de ticket GitHub (.github/ISSUE_TEMPLATE/bug.yml) qui demande le lien :

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/...

Comparer deux navigateurs

tattletab.net/?compare ne liste que les différences entre deux rapports, par exemple un navigateur où le bug se produit et un autre où il ne se produit pas. Liez directement deux rapports envoyés :

https://tattletab.net/?compare=id-premier-rapport,id-second-rapport

Options

`?for=Nom`	Indique à l'utilisateur qui demande et l'enregistre dans le rapport (200 caractères au plus).
`?needs=a,b`	Fonctions dont votre site a besoin, vérifiées en haut du rapport et enregistrées dedans.
`?lang=de`	Langue de l'interface : `en`, `de`, `fr` ou `es`. Sinon, la langue du navigateur est utilisée.
`?compare, ?compare=a,b`	Ouvre la comparaison, éventuellement avec deux identifiants de rapport.
`#site=...`	Défini par l'extrait : le contexte de votre page. Pas destiné à être écrit à la main.

Lire les rapports depuis votre code

GET https://tattletab.net/api/reports/{id} renvoie le rapport en JSON (format tattletab/v1 : createdAt, context facultatif avec requestedBy, note et needs, et entries avec id, label, value, status et sensitivity). Les consultations sont limitées à 60 par minute et par adresse. Les rapports expirent après 90 jours ; seul le navigateur qui l'a envoyé peut en supprimer un plus tôt.

Le format est décrit en JSON Schema sur https://tattletab.net/schema.json, pour valider des rapports ou générer des types.

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