Seitenquelltext anzeigen in Chrome, Firefox, Safari | We.Inc
Tastenkürzel, um den HTML-Quelltext einer Seite in Chrome, Firefox und Safari anzuzeigen, der Unterschied zu Untersuchen, was du wiederverwenden darfst, und ein Viewer, der eingefügtes HTML zusammenfasst.
Seitenquelltext anzeigen
Drücke in Chrome und Firefox unter Windows oder Linux Ctrl+U. Auf einem Mac nutzt Chrome Command+Option+U und Firefox Command+U. Du kannst auch mit der rechten Maustaste auf eine leere Stelle der Seite klicken und Seitenquelltext anzeigen wählen. In Safari musst du zuerst die Entwicklerfunktionen in den Einstellungen unter Erweitert einschalten.
Tastenkürzel für den Quelltext nach Browser (Hilfeseiten der Hersteller)
Browser
Windows oder Linux
Mac
Chrome
Ctrl+U
Command+Option+U
Firefox
Ctrl+U
Command+U
Safari
Nicht verfügbar
Zuerst Funktionen für Webentwickler anzeigen einschalten (Einstellungen, Erweitert)
Alle oben genannten
Rechtsklick auf die Seite, dann Seitenquelltext anzeigen
Rechtsklick (oder Control-Klick) auf die Seite
Der Seitenquelltext ist die HTML-Datei, die der Server gesendet hat, bevor irgendwelche Skripte gelaufen sind. Er zeigt dir, welchen Titel und welche Beschreibung eine Seite verwendet, welche Tracking-Tags sie lädt und wo ihre Bilder liegen. Damit ist er der schnellste Weg, deine eigene Website nach einer Änderung zu prüfen oder zu sehen, wie eine Seite aufgebaut ist, die dir gefällt.
Öffne die Seite, die du lesen willst, und drücke das Tastenkürzel für deinen Browser.
Nutze die Suchfunktion des Browsers (Ctrl+F oder Command+F), um zu dem zu springen, was du brauchst, etwa <title oder og:image.
Um ihn bequemer zu studieren, kopiere alles und füge es in den Viewer oben ein.
Um die Seite so zu sehen, wie sie nach dem Ausführen der Skripte aussieht, nutze stattdessen Untersuchen.
In Firefox kannst du auf eine einzelne Zeile verlinken: Hänge #line100 an das Ende einer view-source:-Adresse an.
Markiere in Firefox einen Text, klicke mit der rechten Maustaste und wähle Auswahl-Quelltext anzeigen, um nur diesen Teil zu sehen.
Seiten, die mit einem JavaScript-Framework gebaut sind, zeigen oft einen fast leeren Quelltext. Untersuchen zeigt, was die Skripte aufgebaut haben.
Prüfe deine eigenen Seiten nach jedem Redesign: Ein fehlender Titel oder eine fehlende Beschreibung fällt im Quelltext sofort auf.
Häufige Fragen
Was ist der Unterschied zwischen Seitenquelltext anzeigen und Untersuchen?
Seitenquelltext anzeigen zeigt die Originaldatei vom Server. Untersuchen öffnet die Entwicklertools des Browsers, wo laut der Chrome-Dokumentation der DOM-Baum den aktuellen Zustand der Seite zeigt, der vom HTML abweicht, sobald JavaScript Teile hinzufügt, entfernt oder bearbeitet.
Darf ich HTML-Code von einer Website kopieren?
Du darfst ihn lesen und daraus lernen. Ihn wiederzuverwenden ist etwas anderes: Laut dem US Copyright Office können originelle Texte, Grafiken und Fotos auf einer Website geschützt sein. Das Urheberrecht umfasst keine Ideen, Systeme oder Methoden, lerne also die Technik und schreibe deine eigene Version. Das ist eine allgemeine Information, keine Rechtsberatung.
Warum fehlt die Option zum Anzeigen des Quelltexts?
In Safari bleibt sie verborgen, bis du unter Einstellungen, Erweitert die Option Funktionen für Webentwickler anzeigen aktivierst. Auf einem verwalteten Arbeits- oder Schulcomputer hat eventuell ein Administrator die Entwicklertools deaktiviert, frag dort nach.
Kann ich den Servercode einer Website sehen, etwa PHP oder Datenbankabfragen?
Nein. Der Server führt diesen Code aus und sendet nur das daraus entstandene HTML, CSS und JavaScript. Nichts im Seitenquelltext verrät, was ihn erzeugt hat.
Worauf du in deinem eigenen Seitenquelltext achten solltest
Weiter oben, innerhalb von <head>, findest du <title> und <meta name="description">, also den Text, den Suchergebnisse anzeigen. Weiter unten stehen og:-Tags, die Linkvorschauen in sozialen Medien steuern, und die Skripte für Analytics oder Tag-Manager.
Wenn eine Änderung, die du in deinem Website-Editor gemacht hast, hier nicht erscheint, ist die Seite womöglich im Cache. Lade einmal neu und prüfe dann erneut.
Wiederverwenden, was du findest
Das Urheberrecht schützt die Art, wie etwas ausgedrückt wird, nicht die Idee dahinter. Eine Layout-Idee oder eine gängige Technik darfst du frei nutzen, die Fotos, Texte und Illustrationen anderer dagegen nicht, außer ihre Lizenz erlaubt es.
Quelltext, Untersuchen und view-source: im Vergleich
Drei Wege, den Code einer Seite zu lesen
Methode
Zeigt
Bearbeitbar
Am besten für
Seitenquelltext anzeigen
Das HTML, das der Server gesendet hat
Nein
Titel, Meta-Tags und Tracking-Skripte prüfen
Untersuchen (Entwicklertools)
Die Live-Seite nach dem Ausführen der Skripte
Ja, vorübergehend
Herausfinden, welcher Code einen Button oder ein Bild zeichnet
view-source: in der Adressleiste (Firefox)
Dasselbe wie Seitenquelltext anzeigen
Nein
Auf eine Zeile verlinken, etwa #line100
Nützliche Suchen im Seitenquelltext
Drücke im Quelltext-Tab Ctrl+F (Command+F auf dem Mac) und suche nach diesen Begriffen, um die wichtigsten Stellen zu finden.
Wonach du suchen kannst
Jede Zeile ist ein Suchbegriff, gefolgt von dem, was er findet.
Quelltext-Viewer
Füge HTML ein, das du über Seitenquelltext anzeigen kopiert hast. Es bleibt in deinem Browser, nichts wird hochgeladen oder abgerufen.