← Alle Beispiele

WhatsApp Web: Entwickler-Outline (data-testid)

Markiert alle Elemente mit data-testid und blendet den Namen ein, hilfreich für eigene Selektoren.

Code zum Kopieren

/* Developer mode: outline elements that expose data-testid attributes */
[data-testid] {
  outline: 1px dashed rgba(255,82,82,0.45) !important;
  outline-offset: -1px !important;
}
[data-testid]::after {
  content: attr(data-testid);
  position: absolute;
  background: rgba(255,82,82,0.85);
  color: #fff;
  font: 10px/1.2 ui-monospace, monospace;
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 99999;
}

So verwendest du dieses Beispiel

1. Kopiere den Code mit der Schaltfläche oben.
2. Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
3. Füge eine neue Regel hinzu, die zu dieser Seite passt.
4. Füge den Code in das CSS-Panel der Regel ein und speichere — der Effekt erscheint sofort.