WhatsApp Web: developer outline (data-testid)
Outlines every element with a data-testid attribute and shows its name, handy for writing selectors.
Code to copy
/* 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;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.