Hilfreiche Ratschläge

Öffnen Sie zum Anzeigen des Quellcodes einer Website-Seite in einem Browser HTML-CSS-Code

Pin
Send
Share
Send
Send


Beachten Sie beim Anzeigen des Quellcodes einer Webseite, dass Informationen und Code, die nicht vom Server verarbeitet wurden, nicht angezeigt werden. Beispielsweise verarbeiten fast alle Suchmaschinen Informationen auf einem Server und zeigen die Ergebnisse dann auf einer Webseite an.

Diese Regel gilt für alle Skripten, die auf der Serverseite ausgeführt werden, für SSI und für Programmcode. Folglich zeigen Suchmaschinen, Foren, Umfragen und Chats ihren Code nicht an. Das Kopieren von Informationen aus dem Quellcode kann zu schwerwiegenden Fehlern führen oder an die Seite zurücksenden.

Microsoft Edge-Benutzer

  1. Öffnen Sie Microsoft Edge und rufen Sie die Webseite auf.
  2. Klicken Sie auf das Symbol "Mehr" in der oberen rechten Ecke des Bildschirms.
  3. Wählen Sie im angezeigten Popup-Menü die Option F12 Developer Tools.

Tipp: In Microsoft Edge bietet das DOM-Tool die Möglichkeit, mit Quellcode- und CSS-Einstellungen zu interagieren, sodass Sie sofort sehen können, wie sich Änderungen im Code auf die Webseite auswirken.

Microsoft Internet Explorer-Benutzer

  1. Öffnen Sie den Internet Explorer und rufen Sie die Webseite auf.
  2. Drücken Sie Alt, um die Browser-Menüleiste aufzurufen.
  3. Wählen Sie "Ansicht und Quelle" aus dem angezeigten Popup-Menü.

Tipp: In neueren Versionen von Internet Explorer wird durch Drücken der Taste F12 das DOM-Tool aufgerufen. Sie können sofort sehen, wie sich Codeänderungen auf eine Webseite auswirken.

Benutzer von Mozilla Firefox und Netscape

  1. Öffnen Sie Mozilla Firefox und rufen Sie die Webseite auf.
  2. Drücken Sie Alt, um die Browser-Menüleiste aufzurufen.
  3. Wählen Sie Extras, Webentwickler und dann Seitenquelle aus.

Tipp: In neueren Versionen des Browsers wird durch Drücken der Taste F12 oder Strg + Umschalt + I ein interaktives Entwicklertool aufgerufen. Dies muss beachtet werden, bevor der Quellcode einer Firefox-Seite geöffnet wird.

So zeigen Sie den Seitenquellabschnitt an

  1. Markieren Sie einen Abschnitt einer Webseite, um den Quellcode anzuzeigen.
  2. Klicken Sie mit der rechten Maustaste auf den ausgewählten Teil der Webseite und klicken Sie dann auf Auswahlquelle anzeigen.

Tipp: Verwenden Sie das Firebug-Add-On, um nicht nur den Quellcode der Seite anzuzeigen, sondern auch die erforderlichen Änderungen vorzunehmen. Und sehen Sie sie gleichzeitig im Browser.

Google Chrome-Nutzer

  1. Google Chrome öffnen,
  2. Klicken Sie oben rechts im Browserfenster auf das Symbol zum Anpassen und Steuern von Google Chrome.
  3. Wählen Sie im angezeigten Popup-Menü Zusätzliche Tools, Entwickler-Tools.

Tipp: In neueren Versionen von Google Chrome wird durch Drücken von F12 oder Strg + Umschalt + I auch ein interaktives Entwicklertool aufgerufen.

So schließen Sie den Quellcode

Wenn Sie mit dem Durchsuchen des Quellcodes einer Webseite fertig sind, können Sie diese beenden oder schließen. Dieser Vorgang hängt von der Methode ab, mit der Sie ihn geöffnet haben.

  • Wenn Sie die Kombination Strg + U verwendet haben, schließen Sie die neue Registerkarte.
  • Wenn Sie die Entwicklermethode verwendet haben (drücken Sie F12 oder Strg + Umschalt + I), klicken Sie auf die Schaltfläche zum Schließen in der oberen rechten Ecke des Werkzeugfensters.

Dies sind alle Informationen zum Öffnen des Quellcodes der Seite. Ich hoffe sie hat dir geholfen.

Diese Veröffentlichung ist eine Übersetzung des Artikels „Anzeigen des HTML-Quellcodes einer Webseite“, der vom freundlichen Team des Internet technology.ru-Projekts erstellt wurde

So öffnen Sie die Seitenquelle im Browser

Es gibt zwei Möglichkeiten, den Quellcode einer Webseite in einem Browser zu öffnen:

  1. Hotkeys verwenden,
  2. Öffnen Sie über das Kontextmenü.

Strg + U - eine Kombination von Tastenkombinationen, um den Quellcode der gesamten Seite in einem separaten neuen Fenster anzuzeigen. Standard für alle Browser: Google Chrome, Opera, Mozilla Firefox, Yandex-Browser, IE.

Sie können Entwickler-Tools auch wie folgt eingeben:

  1. Rufen Sie das Kontextmenü auf, indem Sie mit der rechten Maustaste auf einen Teil der Site-Seite klicken, auf dem HTML-, CSS-Code,
  2. Klicken Sie im Kontextmenü auf den Eintrag "Seitencode anzeigen" (siehe Abbildung unten). (Der Screenshot wurde in Google Chrome aufgenommen. In einigen anderen Browsern unterscheidet sich der Menüeintrag geringfügig. In Opera wird beispielsweise "Der Quelltext der Seite" angezeigt.)

Zeigen Sie den Code der Site-Seite im Browser an

So öffnen Sie den Quellcode einer Site-Seite

Um den gewünschten Code, das gewünschte Wort oder den gewünschten Text auf der Seite schnell zu finden, können Sie für alle Browser die Standard-Tastenkombination verwenden: Strg + G.

Zeigen Sie den Site-Code in Mozilla Firefox an

  • Die Tastenkombination lautet "Strg + U".
  • Menü Firefox / Webentwicklung / Seitenquelle.
  • Datei-Menü "Extras / Webentwicklung / Seitenquelle".

Tipp: Wenn das Menü Datei nicht angezeigt wird, drücken Sie die Alt-Taste auf Ihrer Tastatur.

  • Die rechte Maustaste auf der Site lautet "Seitenquellcode".

Artikelcode anzeigen | Element erkunden | Gegenstand untersuchen

| Element erkunden | Gegenstand untersuchen

Wenn Sie plötzlich nicht den gesamten Quellcode anzeigen müssen, sondern nur einen separaten Teil davon anzeigen möchten, einen Teil auf der Seite, funktioniert das vorherige Tool nicht. Zu diesem Zweck haben die Entwicklertools eine weitere Funktion, auf die weiter unten eingegangen wird.

So zeigen Sie den Artikelcode auf der Seite an:

  1. Öffnen Sie die gewünschte Seite der Website,
  2. Rufen Sie mit der rechten Maustaste das Kontextmenü auf,
  3. Klicken Sie dann auf das Element, das Ihrem Browser entspricht.
    Google Chrome: Code anzeigen
    Opera: "Artikelcode anzeigen"
    Yandex-Browser und Mozilla Firefox: „Entdecke das Element“

Überprüfen Sie einen einzelnen Artikel

Darüber hinaus können Sie Tastenkombinationen für den Schnellzugriff zum Überprüfen eines Elements verwenden.

Hotkeys (Schaltflächen):

Google Chrome: Strg + Umschalt + I und Strg + Umschalt + C

Opera: Strg + Umschalt + I und Strg + Umschalt + C

Mozilla Firefox: Strg + Umschalt + I und Strg + Umschalt + C

Yandex-Browser: Strg + Umschalt + I und Strg + Umschalt + C

Nach den ausgeführten Aktionen wird der Quellcode der Webseite in demselben Browserfenster geöffnet:

HTML CSS Site Code anzeigen

Der gesamte HTML-Code befindet sich in der linken großen Spalte. Und CSS-Stile sind auf der rechten Seite.

Anzeigen von CSS-Stilen in einem Browser

Der Vorteil dieser Methode ist natürlich, dass der Benutzer den Quellcode ändern und die Stile bearbeiten kann. Das heißt, Sie können die Stile auf der Site bearbeiten und sehen, wie sie mit diesen oder anderen Stilen aussehen, ohne sofort Änderungen an den Dateien vornehmen zu müssen, die sich auf den Hostservern befinden. Um Programmcode zu ändern oder hinzuzufügen, müssen Sie auf das gewünschte Fragment oder den gewünschten Abschnitt doppelklicken. Natürlich wird die Code-Korrektur im Browser nicht auf den Hosting-Servern durchgeführt. Daher müssen Sie diesen Code in Zukunft auf jeden Fall kopieren und in Dateien registrieren.

Dieses Video-Tutorial zeigt Details und die Arbeit mit Entwicklertools:

Im Online-Modus können Sie also direkt in Ihrem Browser den Quellcode einer Site-Seite anzeigen, grundlegende Daten zu HTML- und CSS-Code abrufen, ändern und kopieren, ohne die Dateien dieser Site auf Ihren Computer herunterladen zu müssen.

Unerfahrene Internetnutzer, die den Seitencode geändert haben und damit rechnen, dass er gespeichert wird, werden übrigens enttäuscht sein. Nach dem Aktualisieren der Seite verschwinden schließlich alle Änderungen. Es ist nicht genug, eine Website zu hacken

So zeigen Sie den Quellcode auf einem Android-Handy an

Ich möchte auch darauf hinweisen, dass die Entwicklertools nicht nur in der Desktop-Version von Browsern verfügbar sind, dh auf Computern und Laptops. Auf Handys und Tablets (Android, IOS) können Sie auch den Quellcode sehen.

Fügen Sie dazu die Präfix-Ansichtsquelle zur URL der überprüften Seite hinzu:

Keine Antwort gefunden? Dann nutzen Sie das Suchformular:

Pin
Send
Share
Send
Send