OBS / StreamElements Overlay Debug Template

Kategori

debug

Status

Guld

Bruges til

Denne prompt bruges når TuxCore skal fejlfinde OBS Browser Source overlays, StreamElements widgets, HTML/CSS/JS overlays, countdowns, DJ-navne, billedevisning eller chat-command overlays.

Den er god til:

• Overlay vises ikke i OBS
• Overlay virker i browser men ikke i OBS
• CSS/animation opfører sig forkert
• Tekst står forkert
• Billeder loader ikke
• Countdown viser forkert tid
• StreamElements FIELDS/DATA virker ikke
• Fetch/API data kommer ikke ind
• Browser Source cache driller
• Transparent baggrund virker ikke
• Overlay skalerer forkert

Prompt

$obs $debug

Jeg har et OBS/StreamElements overlay problem.

## Problem

[Beskriv hvad der ikke virker]

## Hvor kører overlayet?

- OBS Browser Source: [ja/nej]
- StreamElements Custom Widget: [ja/nej]
- Lokal HTML-fil: [ja/nej]
- Webhostet URL: [indsæt URL hvis relevant]

## Fejl / symptomer

[Beskriv hvad du ser, fx blankt overlay, forkert placering, JS fejl, fetch fejl]

## HTML

[indsæt relevant HTML]

## CSS

[indsæt relevant CSS]

## JavaScript

[indsæt relevant JavaScript]

## OBS Browser Source settings

Width: [fx 1920] Height: [fx 1080] FPS: [fx 30] URL/File: [indsæt] Shutdown source when not visible: [ja/nej] Refresh browser when scene becomes active: [ja/nej]

## Det jeg vil have

Svar med:

1. Hvad fejlen sandsynligvis skyldes.
2. Hvilken del af HTML/CSS/JS der er problemet.
3. Præcis rettelse.
4. Copy/paste-klar kode eller patch.
5. OBS testtrin.
6. Cache/reload råd.
7. Hvis det er StreamElements: forklar FIELDS/DATA hvis relevant.

Regler:

- Brug dansk forklaring.
- Gør svaret copy/paste-klar.
- Brug transparent baggrund som standard.
- Undgå unødvendige dependencies.
- Bevar eksisterende design så meget som muligt.

Eksempel på brug

$obs $debug

Mit DJ-navn overlay virker i Chrome, men i OBS står pilene forkert og animationerne rammer ikke samme hastighed.
Her er HTML/CSS/JS.

Forventet output

Et godt svar bør indeholde:

• Kort diagnose
• Præcis CSS/JS patch
• Forklaring af hvorfor problemet sker
• OBS Browser Source testtrin
• Reload/cache forslag
• Eventuelle performance råd

Standard OBS testtrin

bn overlayet direkte i Chrome/Edge.

2. Højreklik og vælg Inspect hvis muligt.
3. Tjek Console for JavaScript-fejl.
4. Tjek Network hvis overlayet henter data.
5. Reload OBS Browser Source.
6. Sæt korrekt Width/Height.
7. Test med tydelig midlertidig tekst.
8. Fjern midlertidig debug når det virker.

OBS Browser Source standard

Width: 1920
Height: 1080
FPS: 30
Custom CSS: tom

Ved vertikal/social:

Width: 1080
Height: 1920

Ved Instagram/Facebook poster-format:

Width: 1080
Height: 1350

Typiske fejl

Overlay er blankt

Mulige årsager:

• JavaScript fejl stopper rendering.
• Elementet har display: none.
• Tekstfarve matcher baggrund.
• Browser Source peger på forkert fil/URL.
• OBS cache viser gammel version.
• HTML mangler størrelse.

Fix:

• Test i almindelig browser.
• Tilføj midlertidig testtekst.
• Tjek console.
• Reload Browser Source.
• Tjek width, height, position og z-index.

Transparent baggrund virker ikke

Mulige årsager:

• body har baggrundsfarve.
• En wrapper har baggrund.
• OBS Browser Source custom CSS overskriver.
• CSS gradient ligger på html/body.

Fix:

html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

Overlay virker i browser men ikke OBS

Mulige årsager:

• OBS browser cache.
• HTTPS/mixed content problem.
• CORS problem.
• Lokal filsti virker ikke som forventet.
• OBS Chromium understøtter ikke noget nyere JS.

Fix:

• Brug en webhostet URL.
• Undgå blandet HTTP/HTTPS.
• Brug simpel JS.
• Reload Browser Source.
• Test endpoint direkte.

Fetch/API virker ikke

Mulige årsager:

• Endpoint returnerer ikke JSON.
• CORS.
• Mixed content.
• Cache.
• Forkert URL.
• Server returnerer HTML-fejlside.

Fix:

fetch(CONFIG.endpoint, { cache: "no-store" })

Tjek også:

Network tab
HTTP status
Response body
Content-Type

Animation hakker

Mulige årsager:

• For tunge CSS filters.
• For mange box-shadows/glows.
• Store billeder.
• For hyppig polling.
• JS ændrer layout for ofte.

Fix:

• Brug transform og opacity.
• Reducer blur/glow.
• Komprimer billeder.
• Sænk refresh-rate.
• Brug CSS animations fremfor JS loops.

StreamElements fields virker ikke

Mulige årsager:

• Forkert field-navn.
• DATA/FIELDS er ikke brugt korrekt.
• Fallback mangler.
• Widget er ikke gemt/opdateret.
• JS kører før data er klar.

Fix:

• Brug fallback-værdier.
• Log data midlertidigt.
• Gem og reload overlay.
• Tjek at field keys matcher.

Standard debug CSS

.debug-box {
  outline: 2px solid red;
  background: rgba(255, 0, 0, 0.15);
}

Standard debug JS

const DEBUG = true;

function debugLog(...args) {
  if (DEBUG) {
    console.log("[Overlay Debug]", ...args);
  }
}

Sikkerhedsregler

• Brug ikke secrets/tokens i overlay frontend.
• Public overlay endpoints må kun returnere nødvendige data.
• Admin endpoints må ikke kaldes direkte fra OBS overlay.
• Uploads skal modereres før visning.
• Vis ikke IP, mail eller private data i overlay.

Tags

obs, streamelements, overlay, debug, html, css, javascript, browser-source, tuxcore