Hat sich das Design einer Seite verändert?
Entdecken Sie die Checkout-Seite, die plötzlich als ungestylter Text erscheint, oder das defekte Titelbild, auch wenn der Text der Seite gleich bleibt. Jede Prüfung stellt die Seite wie für Besucher dar, vergleicht sie mit der letzten Aufnahme und meldet sich bei Abweichungen. Sie zahlen pro Prüfung, ohne Abo.
Ein Werkzeug, das eine Webseite regelmäßig als Screenshot erfasst und mit der vorherigen Aufnahme vergleicht – Pixel für Pixel statt nur den Text. So fallen optische Änderungen auf, die eine reine Textprüfung übersieht, etwa ein verschobenes Layout oder ein fehlendes Bild. Aktuell noch in der Beta-Phase.
Wie der Vergleich funktioniert
Zu einer festgelegten Zeit wird ein Screenshot der Seite erstellt und mit der vorherigen Aufnahme verglichen. Weichen die beiden Bilder voneinander ab, wird eine Benachrichtigung ausgelöst, dass sich das Erscheinungsbild seit der letzten Aufnahme verändert hat – ein Änderungssignal, keine Markierung der genauen Stelle, die sich bewegt hat. Weil schon kleine Abweichungen genügen, ist die Funktion empfindlich; auf sehr unruhigen Seiten kann sie daher auch unbedeutende Schwankungen melden.
Wofür sich das eignet
Ein CSS-Update, das versehentlich ein Element verschiebt, oder ein Bild, das beim nächsten Deployment plötzlich fehlt, fällt bei einer reinen Textprüfung oft nicht auf. Die visuelle Überwachung erkennt solche Änderungen, unabhängig davon, ob sich der Text der Seite überhaupt verändert hat, und ergänzt damit die reine Textprüfung sinnvoll, gerade bei rein technisch verursachten Fehlern im Layout einer Seite, die sonst leicht übersehen werden.
Warum diese Funktion als Beta gekennzeichnet ist
Der Vergleich von Screenshots reagiert empfindlicher auf technische Nebeneffekte als ein reiner Textvergleich, etwa auf unterschiedlich geladene Werbebanner oder Animationen zum Aufnahmezeitpunkt. Ein anfänglicher Testlauf zeigt, ob eine Seite ruhig genug für eine zuverlässige Überwachung ist, bevor sie dauerhaft eingerichtet wird. Bei ruhigen, statischen Seiten ist das Ergebnis meist von Anfang an zuverlässig und über längere Zeit stabil.
Anwendungsfälle
Kontrolle nach jedem Deployment
Ein Entwicklungsteam lässt die Startseite nach jedem Deployment automatisch mit der vorherigen Version vergleichen, um ein versehentlich verschobenes Layout sofort zu bemerken.
Überwachung einer Landingpage der Agentur
Eine Agentur überwacht die Landingpage eines Kunden visuell, um sofort zu erfahren, wenn eine unautorisierte Änderung am Design vorgenommen wird.
Bilder auf der Produktseite im Blick
Ein Onlineshop prüft täglich, ob die Produktbilder auf der Startseite korrekt laden, nachdem ein früherer Ausfall des Bildservers unbemerkt blieb.
Überwachung rund um einen A/B-Test
Ein Marketingteam lässt eine Seite rund um die Umstellung eines A/B-Tests überwachen, um benachrichtigt zu werden, sobald sich ihr Erscheinungsbild ändert.
Häufige Fragen
Was bedeutet Beta bei dieser Funktion?
Dass der Bildvergleich empfindlicher auf technische Nebeneffekte reagiert als ein reiner Textvergleich, etwa auf Werbebanner oder Animationen. Auf ruhigen, statischen Seiten arbeitet er am zuverlässigsten.
Was zählt als relevante Änderung?
Jede sichtbare Abweichung im Erscheinungsbild gegenüber der vorherigen Aufnahme, etwa ein verschobenes Element, eine geänderte Farbe oder ein fehlendes Bild.
Kann ich einstellen, wie empfindlich der Vergleich reagiert?
Derzeit nicht: Die Funktion ist in der Beta-Phase und meldet jede sichtbare Abweichung. Deshalb eignet sie sich am besten für ruhige, statische Seiten; eine einstellbare Toleranzschwelle ist noch nicht verfügbar.
Werden auch reine Textänderungen erkannt, wenn sich das Layout nicht verändert?
Ja, sofern sich der Text sichtbar auf dem Screenshot auswirkt. Für eine reine Textprüfung ohne Bildvergleich eignet sich stattdessen das Schwesterwerkzeug zur einfachen Änderungsüberwachung.
Brauche ich ein Konto?
Nein, es gibt derzeit keine Konten. Sie richten die Überwachung einmalig ein und bezahlen pro Prüfung.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Ein authentifizierter POST erstellt die Aufgabe; das Ergebnis kommt per Webhook oder über einen signierten Link. Diese Funktion ist per API verfügbar, nicht als interaktives Web-Werkzeug.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/web/monitor-visual \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com"}'const res = await fetch("https://api.kit.forhosting.com/web/monitor-visual", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "https://example.com"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/monitor-visual",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "https://example.com"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/monitor-visual", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"https://example.com"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://example.com"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/monitor-visual", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"url": "https://example.com"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.monitor_visual",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
timeout_sec | 30 |
max_crawl_pages | 25 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
422 | task_failed | Die Aufgabe ist fehlgeschlagen und wird nicht berechnet. |
Technische Hinweise
Kanäle und Preis
Die Frequenz lässt sich jederzeit anpassen, etwa vorübergehend erhöhen vor einem wichtigen Deployment und danach wieder senken, ganz nach Bedarf. Eingerichtet wird die Überwachung über diese Seite im Browser oder über die API, mit frei wählbarer Prüffrequenz. Der Preis liegt bei $0.040 pro Prüfung, zuzüglich $0.001 pro zusätzlich verglichener Seite; bei einer täglichen Prüfung sind das rund $1.20 im Monat.
Technische Fragen
Was kostet die visuelle Überwachung?
$0.040 pro Prüfung, zuzüglich $0.001 pro zusätzlich verglichener Seite. Bei einer täglichen Prüfung sind das rund $1.20 im Monat.