App Viewer

De website wordt geladen en de App Viewer werkt normaal, geef het even de tijd. Als het langer dan 2 minuten duurt, klik dan op het pictogram Vernieuwen of controleer het Console-paneel op fouten.

Agents kunnen tijdens de build tegen problemen aanlopen, wat soms webpaginafouten veroorzaakt. Klik op Resolve en de agents repareren het voor je; zodra het is opgelost, keert de preview terug naar normaal. Rode meldingen zijn een signaal, geen crisis.

Voor het verwijderen van badges is Pro of hoger vereist. Klik op je avatar in de rechterbovenhoek, selecteer Settings en ga vervolgens naar Plans & Billing en kies het Pro- of Max-abonnement. Zodra je hebt geüpgraded, wordt de Atoms-badge automatisch verwijderd van je gepubliceerde pagina's.

1. Open Design Mode en selecteer exact het element dat verkeerd is uitgelijnd of onjuist is gestyled.
2. Vermeld de pagina en breakpoint, het huidige probleem, het gewenste resultaat en wat niet mag veranderen.
3. Gebruik meetbare instructies zoals padding, uitlijning, breedte, kleur of wrapping-gedrag. Voeg een referentieafbeelding toe wanneer visuele overeenkomst belangrijk is.
4. Pas één wijziging toe en controleer daarna de desktop- en mobiele lay-outs plus belangrijke statussen zoals laden, leeg, hover en fout.
5. Als het resultaat een ander gebied kapot maakt, keer dan terug naar de laatste werkende versie en probeer het opnieuw met een nauwer doel.

1. Bevestig of het probleem alleen App Viewer treft, ook de Preview URL, of ook de gepubliceerde site.
2. Vernieuw één keer, open de Preview in een nieuw tabblad en test een Incognito-venster.
3. Controleer of de huidige taak of build nog steeds wordt uitgevoerd. Wacht tot deze is voltooid voordat je het opnieuw probeert.
4. Als een expliciet bericht zegt dat het Cloud & AI-saldo onvoldoende is of dat de app is opgeschort, open dan Settings → Cloud & AI en controleer dat saldo. Waardeer niet op alleen op basis van een leeg scherm.
5. Leg eventuele Console- of Network-fouten vast zonder cookies, tokens of geheime waarden te delen.

Als het scherm leeg blijft, neem dan contact op met Support met de Chat Link, volledige Viewer URL, tijd en tijdzone, getroffen omgevingen, screenshot en opgeschoonde foutdetails.

1. Controleer of alleen App Viewer, de Preview URL of de gepubliceerde site is getroffen.
2. Vernieuw één keer, open de Preview in een nieuw tabblad en test een Incognito-venster.
3. Controleer of de huidige taak of build nog steeds wordt uitgevoerd en wacht tot deze is voltooid.
4. Test de laatst bekende werkende versie. Als die werkt, vergelijk dan de recente wijziging die het lege scherm heeft veroorzaakt.
5. Open Settings → Cloud & AI alleen wanneer het product expliciet meldt dat het saldo onvoldoende is of de app is opgeschort.

Als het probleem aanhoudt, neem dan contact op met Support met de Chat Link, volledige Viewer URL, versie, tijd en tijdzone, getroffen omgevingen, screenshot en opgeschoonde Console- of Network-fout.

Preview en de gepubliceerde site zijn onafhankelijke kanalen. Opslaan of previewen pusht wijzigingen niet naar productie.

1. Klik op Update in het Publish-paneel — Open het Publish-paneel en klik op Update. Wacht tot de status Up to date toont.
2. Forceer een vernieuwing van de live site — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows), of open de URL in een Incognito-venster om browsercache uit te sluiten.
3. Controleer het versienummer van de gepubliceerde versie — Bevestig in het Publish-paneel dat de versie overeenkomt met wat je in Preview ziet. Als ze verschillen, publiceer dan opnieuw.
4. Test het Prod-subdomein van het platform — Als je een aangepast domein gebruikt, open dan ook apart de standaard Prod-URL. Als het Prod-subdomein is bijgewerkt maar het aangepaste domein niet, dan is het probleem DNS- of CDN-caching.

Als het probleem aanhoudt, geef dan de Preview URL, Prod URL, screenshots van een vergelijking naast elkaar en het tijdstip waarop je op Publish of Update hebt geklikt.

Wanneer de agent de lay-out of styling wijzigt, kan die onbedoeld het responsieve gedrag op kleinere schermen verstoren.

1. Bekijk eerst op mobiele breedte — Gebruik de apparaatwisselaar in de App Viewer-werkbalk om naar mobiele weergave te schakelen en controleer het resultaat vóór publicatie.
2. Gebruik Design Mode in mobiele weergave — Schakel naar Design Mode terwijl de apparaatwisselaar op mobiel staat. Klik op het kapotte element zodat de agent alleen dat component op die schermgrootte target.
3. Geef expliciete responsieve beperkingen — Vertel de agent exact hoe de mobiele lay-out eruit moet zien. Voorbeeld: "Op schermen smaller dan 768px, stapel de kaarten in één kolom en stel padding in op 16px."
4. Vraag de agent om bestaande media queries te behouden — Voeg bij desktopwijzigingen toe: "Wijzig geen bestaande responsieve of mobiele stijlen."

Als het probleem aanhoudt, geef dan de Chat Link, een screenshot van de kapotte mobiele lay-out en een referentieafbeelding van de verwachte lay-out.

Als afbeeldingen kapot lijken, tijdelijke pictogrammen tonen of niet laden:

1. Controleer bestandspaden van afbeeldingen — Open de sectie Files en controleer of de afbeeldingsbestanden bestaan op de paden waarnaar in je code wordt verwezen. De agent kan bestanden tijdens bewerkingen hebben verplaatst of hernoemd.
2. Controleer bestandsgrootte en indeling — Zeer grote afbeeldingen of niet-ondersteunde indelingen laden mogelijk niet. Comprimeer afbeeldingen of converteer ze naar PNG, JPG of WebP.
3. Controleer Cloud-opslag — Ga naar Settings > Cloud & AI om te bevestigen dat je beschikbare opslagruimte hebt.
4. Forceer een vernieuwing — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows) om gecachte afbeeldingsverwijzingen te wissen.

Als het probleem aanhoudt, geef dan de Chat Link, de URL van de ontbrekende afbeelding en een screenshot van de kapotte status.

Wanneer de agent niet-gerelateerde elementen wijzigt of regressies in andere delen van de pagina introduceert:

1. Draai terug — Ga naar History en Remix vanaf de laatste stabiele versie. Dit reset de chatcontext terwijl je code behouden blijft.
2. Gebruik Design Mode om te isoleren — Schakel naar Design Mode en klik direct op het specifieke element. Dit verankert het bewerkingsbereik van de agent aan dat component.
3. Voeg expliciete beperkingen toe — Geef duidelijk aan wat NIET mag veranderen. Voorbeeld: "Wijzig alleen de achtergrondkleur van de header naar #1A365D. Wijzig de navigatiebalk, footer of enig ander component niet."
4. Eén wijziging per prompt — Voer één wijziging uit, controleer het resultaat en ga dan verder met de volgende.

Als de agent herhaaldelijk regressies in andere elementen veroorzaakt, gebruik dan Remix vanaf een stabiele versie en probeer het opnieuw met een strak afgebakende instructie.

Als het Preview-paneel een buildfout, een rode foutbanner of een bericht over ontbrekende pakketten toont:

1. Gebruik de knop Resolve — Als er een melding Probleemrapport in de App Viewer verschijnt, klik dan op Resolve en de AI analyseert en verhelpt automatisch alle geïdentificeerde fouten. Als er geen knop Resolve verschijnt, kopieer dan de exacte foutmelding uit het Console-paneel en plak die naar de agent met: "Los deze buildfout op: [foutmelding]."
2. Controleer recente wijzigingen — Als de fout na een specifieke bewerking verscheen, ga dan naar History en vergelijk met de laatste werkende versie om te bepalen welke wijziging de storing veroorzaakte.
3. Remix vanaf de laatste werkende versie — Als de fout moeilijk op te lossen is, gebruik dan Remix vanaf je laatste succesvolle checkpoint en pas wijzigingen stapsgewijs opnieuw toe.
4. Controleer pakketcompatibiliteit — Als de fout naar een specifiek pakket verwijst, vraag de agent dan: "Controleer of [pakketnaam] compatibel is met de huidige projectconfiguratie en los eventuele versieconflicten op."

Opmerking: Als de foutmelding verwijst naar platformcomponenten (App Viewer, opstartscript, Publish, deployrecord) of interne bestanden van pakketten van derden (bijv. @vue/compiler-core, vite), kan dit een platformprobleem zijn in plaats van een agentprobleem. Neem contact op met Support met de volledige foutmelding.

Als het probleem aanhoudt, geef dan de volledige foutmelding, de Chat Link en een screenshot van de fout.

Als de agent bevestigt dat de wijziging is doorgevoerd maar het visuele resultaat niet is veranderd:

1. Forceer een vernieuwing — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows). CSS-wijzigingen worden vaak door de browser gecachet.
2. Controleer op conflicten in CSS-specificiteit — De agent kan stijlen hebben toegevoegd die door bestaande regels worden overschreven. Vraag de agent: "Controleer of de stijl die ik heb gevraagd wordt overschreven door een andere CSS-regel, en corrigeer indien nodig de specificiteit."
3. Gebruik Design Mode om te inspecteren — Schakel naar Design Mode en klik op het element. De visuele editor links toont de momenteel toegepaste kleuren, afstand, typografie en lay-outeigenschappen, zodat je kunt zien of je gevraagde wijziging is toegepast.
4. Controleer het juiste bestand — Bij projecten met zowel globale stylesheets als stijlen op componentniveau kan de agent het verkeerde bestand hebben bewerkt. Vraag: "Waar heb je de wijziging toegepast? Toon me het bestandspad en de regel."

Als het probleem aanhoudt, geef dan de Chat Link, een screenshot van het ongewijzigde element en de exacte stijlwaarden die je hebt gevraagd.

Design Mode gebruikt de visuele lay-out om te bepalen op welk component je mikt. Geneste of overlappende elementen kunnen een onjuiste selectie veroorzaken.

1. Zoom in — Zoom in op het gebied voordat je klikt. Dit helpt om dicht geneste componenten van elkaar te onderscheiden.
2. Gebruik tekstbeschrijving als back-up — Als herhaald klikken steeds het verkeerde element selecteert, beschrijf het dan in plaats daarvan in de chat. Voorbeeld: "Selecteer de tweede knop in de prijskaart in de rechterkolom."
3. Verwijs naar bestandspad — Als je weet welk bestand het component bevat, vertel het de agent dan direct: "Bewerk het element in src/components/PricingCard.tsx, regel 42."

Als selectieproblemen aanhouden, geef dan een screenshot waarop het gewenste element is gemarkeerd en de Chat Link.