← All examples

Telegram: outline elements for debugging

Draws dashed outlines around message bubbles and chat-list items to help inspect the page layout.

Code to copy

/* Outline message bubbles and key containers for layout debugging */
.bubbles .bubble {
  outline: 1px dashed rgba(255,90,90,0.7) !important;
}
.chatlist .chatlist-chat,
.ChatList .ListItem {
  outline: 1px dashed rgba(90,160,255,0.7) !important;
}

How to use this example

1. Copy the code with the button above.
2. Install JustZix (2 minutes) and open the extension on the target page.
3. Add a new rule matching that page.
4. Paste the code into the rule's CSS panel and save — the effect appears instantly.