tattletab para desarrolladores

Envía un enlace a un usuario y recibe un informe exacto de su navegador: unas 2.000 comprobaciones de funciones, ajustes, pantalla, fuentes, GPU, estado Baseline y lo que bloquea sus solicitudes. Sin cuenta, sin instalar nada.

Pedir un informe a un usuario

Envía este enlace, con tu nombre o tu incidencia después de for=:

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

Con JavaScript, este recuadro crea el enlace por ti y muestra un código QR para escanear con el móvil.

Lo que recibes

Un enlace o un archivo. El usuario sube el informe (se guarda 90 días y lo puede leer cualquiera con el enlace) o lo descarga. Para abrir un archivo, arrástralo a tattletab.net.
A tener en cuenta. El informe empieza por lo que más a menudo explica un error que solo ven algunas personas: un navegador desactualizado, el navegador integrado de una app, una página traducida, zoom, colores forzados, solicitudes o cookies bloqueadas, una ventana privada, el JIT de JavaScript desactivado, almacenamiento que falla, un reloj desfasado.
Un resumen para tu gestor de incidencias. «Copiar para informe de error» copia Markdown al portapapeles: navegador y cuánto retraso lleva, dispositivo, ajustes, lo que hay que tener en cuenta, las funciones que necesita tu sitio, estado Baseline, sintaxis que falta, la descripción del usuario y el enlace.
Todo lo demás del informe: cabeceras de la solicitud, client hints, pantalla y diseño, permisos, almacenamiento y workers que funcionan de verdad, reproducción automática, push, modelos de IA integrados, cookies de terceros, WebRTC, códecs, fuentes, emoji, distribución del teclado, formatos de fecha y número, y la compatibilidad con cada API web, propiedad CSS y elemento HTML de los datos de MDN.

El usuario ve cada valor primero y puede ocultar cualquiera; los valores ocultos siguen ocultos en todas partes.

Comprobar las funciones que necesita tu sitio

Añade needs= al enlace con las funciones de las que depende tu sitio. El informe empieza entonces con «11 de 12 compatibles, faltan: View Transitions», y la lista se guarda en el informe.

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

Usa identificadores de web-features (view-transitions, has, dialog) o claves de browser-compat-data para API y miembros concretos (api.Navigator.share, css.properties.container, javascript.builtins.Array.findLast). Hasta 100, separados por comas.

Incluir tu propia página

Un informe de tattletab.net no puede ver tu sitio. Añade el fragmento y un enlace:

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

Desde que se carga, el fragmento guarda los errores de JavaScript de tu página, los rechazos de promesas no gestionados, las infracciones de la Content Security Policy y los archivos que no se pudieron cargar (20 como máximo de cada uno), y mide las Core Web Vitals (LCP, CLS, INP); cárgalo pronto para captar más. Cuando el usuario hace clic en el enlace, el informe también cubre tu página: esos errores, si funcionan las cookies y el almacenamiento, el modo quirks, los iframes, el zoom, los tiempos de carga y rastros de extensiones que la modifican. Los datos viajan después del # de la URL, que los navegadores nunca envían a un servidor; los parámetros de consulta se omiten porque pueden contener tokens.

Añade tus propios campos (20 valores cortos como máximo, que el usuario ve antes de compartir) o abre el informe desde tu código:

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

tattletab.context() devuelve lo que se enviaría. El fragmento es ES5 puro, de unos 10 KB, sin dependencias, y no envía nada por sí solo.

Añadirlo a tu plantilla de incidencias

Un formulario de incidencias de GitHub (.github/ISSUE_TEMPLATE/bug.yml) que pide el enlace:

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

Comparar dos navegadores

tattletab.net/?compare muestra solo las diferencias entre dos informes, por ejemplo un navegador donde ocurre el error y otro donde no. Enlaza directamente dos informes subidos:

https://tattletab.net/?compare=id-primer-informe,id-segundo-informe

Opciones

`?for=Nombre`	Muestra al usuario quién lo pide y lo guarda en el informe (hasta 200 caracteres).
`?needs=a,b`	Funciones que necesita tu sitio, comprobadas al principio del informe y guardadas en él.
`?lang=de`	Idioma de la interfaz: `en`, `de`, `fr` o `es`. Sin él, se usa el idioma del navegador.
`?compare, ?compare=a,b`	Abre la comparación, opcionalmente con dos identificadores de informe.
`#site=...`	Lo pone el fragmento: contexto de tu página. No está pensado para escribirlo a mano.

Leer informes desde código

GET https://tattletab.net/api/reports/{id} devuelve el informe en JSON (formato tattletab/v1: createdAt, context opcional con requestedBy, note y needs, y entries con id, label, value, status y sensitivity). Las consultas están limitadas a 60 por minuto y dirección. Los informes caducan a los 90 días; solo el navegador que lo subió puede borrar uno antes.

El formato está descrito como JSON Schema en https://tattletab.net/schema.json, para validar informes o generar tipos.

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