So ändern Sie den Seitencode in Google Chrome. So zeigen Sie den Quellcode einer Seite in Google Chrome an

Manche mögen zunächst denken, dass dies überhaupt kein notwendiges Tool ist, aber die Betrachtung des gesamten HTML-Codes einer Website ist großartig, um die notwendigen Elemente im Code zu finden, das können Links, Tags, Meta-Tags, Attribute und andere Elemente sein .

Hotkey-Kombination +Öffnen Sie das Suchfenster, im Chrome-Browser erscheint es oben rechts:

Abbildung 3. Suche nach Site-Code

Nachdem Sie eine Anfrage in das Suchformular eingegeben haben, wechselt der Bildschirm zum ersten gefundenen Element. Mithilfe der Pfeile können Sie zwischen ihnen wechseln und das gewünschte Element auswählen:

Abbildung 4. Suche nach HTML-Site-Code

Anleitung 2: Anzeigen und Bearbeiten des HTML- und CSS-Codes einer Website im Google Chrome-Browser

Nun zum wichtigsten Teil, in dem ich zeige, wie man den HTML- und CSS-Code einer Website in einem Browser bearbeiten kann. Anschließend übertragen Sie die Änderungen an den Browser.

Dieses nützliche Tool ist immer in Ihrem Browser verfügbar; experimentieren Sie mit anderen Befehlen, die Ihnen die Bearbeitung Ihrer Website erleichtern.

Wenn Sie unzählige Seiten im Internet durchstöbern, können Sie auf einige stoßen, die uns wirklich gefallen. Es stellen sich sofort eine Reihe von Fragen. Wurde die Website mit hausgemachtem Code oder einer Art CMS erstellt? Welche CSS-Stile gibt es? Was sind seine Meta-Tags? Usw.

Es gibt viele Tools, mit denen Informationen über den Code einer Website-Seite extrahiert werden können. Aber wir haben immer die rechte Maustaste zur Hand. Das werden wir am Beispiel meiner Website verwenden.

Wie kann ich den Seitencode anzeigen?

Um den Quellcode einer Site-Seite anzuzeigen, müssen Sie mit der Maus über einen beliebigen Bereich der Webseite fahren (außer Bilder und Links). Klicken Sie anschließend mit der rechten Maustaste. Vor uns öffnet sich ein Fenster mit mehreren Optionen (diese können in verschiedenen Browsern leicht abweichen). Im Google Chrome-Browser sind dies beispielsweise die Befehle:

• zurück;
• nach vorne;
• neu starten;
• speichern als;
• Siegel;
• ins Russische übersetzen;
• Seitencode anzeigen;
• Code ansehen.

Wir müssen klicken Seitencode anzeigen, und der HTML-Code der Site-Seite wird vor uns geöffnet.

Anzeigen des Seitencodes: Worauf ist zu achten?

Der HTML-Seitencode ist also eine nummerierte Liste von Zeilen, von denen jede Informationen darüber enthält, wie diese Site erstellt wurde. Um diese große Anzahl an Zeichen und Sonderzeichen schnell verstehen zu lernen, müssen Sie zwischen verschiedenen Abschnitten des Codes unterscheiden.

Beispielsweise enthalten Codezeilen im Head-Tag Informationen für Suchmaschinen und Webmaster. Sie werden auf der Website nicht angezeigt. Hier können Sie sehen, für welche Schlüsselwörter diese Seite beworben wird und wie Titel und Beschreibung geschrieben sind. Hier finden Sie auch einen Link, über den wir mehr über die auf der Website verwendete Familie der Google-Schriftarten erfahren.

Wenn die Seite auf dem CMS WordPress oder Joomla erstellt wurde, wird dies auch hier sichtbar sein. In diesem Bereich werden beispielsweise Informationen zu einem WordPress-Theme oder einer Joomla-Website-Vorlage angezeigt. Sie können es sehen, indem Sie die Inhalte der blau markierten Links lesen. Ein Link zeigt eine Website-Vorlage.

Zum Beispiel:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Wir werden die CSS-Schriftstile der Seite sehen. In diesem Fall wird die Schriftart verwendet. Dies ist hier zu sehen – Schriftfamilie: „Source Sans Pro“.

Diese Seite wird mit dem Yoast SEO-Plugin optimiert. Dies ist aus diesem kommentierten Codeabschnitt ersichtlich:

Diese Seite ist mit dem Yoast SEO-Plugin v3.4.2 optimiert – https://yoast.com/wordpress/plugins/seo/

Alle im Body-Tag enthaltenen Informationen werden vom Browser auf dem Monitorbildschirm angezeigt. Hier sehen wir den HTML-Code der Seite und ganz unten befindet sich der Yandex Metrics-Skriptcode. Es ist von einem kommentierten Tag mit dem Text umgeben:

/Yandex.Metrika-Zähler

Fassen wir es zusammen

Nachdem wir eine eher oberflächliche Analyse des Codes der Hauptseite der Website durchgeführt haben, können wir eine Schlussfolgerung darüber ziehen, mit welchen Tools diese Seite erstellt wurde. Wir haben darauf gesehen:

• CMS WordPress;
• Google-Schriftart Source Sans Pro;
• WordPress-Theme – Sydney;
• Yoast-Plugins;
• Yandex-Metrikzähler.

Nun ist das Prinzip der Analyse des HTML-Codes einer Website recht klar. Es ist überhaupt nicht notwendig, die Seite, die Sie recherchieren, im Browser geöffnet zu lassen. Sie können den Seitencode mit den Tastenkombinationen Strg+A, Strg+C, Strg+V auf Ihrem Computer speichern. Fügen Sie es in einen beliebigen Texteditor (vorzugsweise Notepad++) ein und speichern Sie es mit der HTML-Erweiterung. So können Sie es jederzeit tiefer studieren und weitere nützliche Informationen für sich finden.

Wir haben ein neues Buch veröffentlicht: Social Media Content Marketing: Wie Sie in die Köpfe Ihrer Follower gelangen und sie dazu bringen, sich in Ihre Marke zu verlieben.

Der Quellcode einer Website ist eine Sammlung von HTML-Markup, CSS-Stilen und JavaScript-Skripten, die der Browser vom Webserver empfängt.

Weitere Videos auf unserem Kanal – Internetmarketing lernen mit SEMANTICA

Es kann mit einer Reihe von Befehlen verglichen werden, die ein Kommandant den Soldaten erteilt. Stellen Sie sich vor, dass das Publikum den Chef weder sieht noch hört. Aus ihrer Sicht führt das Militär seine Aktionen selbstständig durch. In unserem Fall ist der Kommandant der Browser, die Befehle der Quellcode und die marschierenden Soldaten das Endergebnis.

Die Website wird auf einem Webserver gespeichert, der die Seite auf Benutzeranfrage sendet. Bei einer Anfrage wird eine URL in die Adressleiste eingegeben, auf einen Link geklickt oder auf die Schaltfläche „Senden“ in einem Formular geklickt. Dabei spielt es keine Rolle, in welcher Sprache die Webseiten geschrieben sind oder ob sie eine Softwarekomponente enthalten. Das Endergebnis eines jeden serverseitigen Algorithmus ist eine Reihe von HTML-Tags und Text.
Der Seitenquellcode ist ein Datensatz, der Folgendes umfasst:

• HTML-Markup;
• Stylesheet oder Dateilink;
• In JavaScript geschriebene Programme oder Links zu Dateien mit Code.

Diese drei Abschnitte werden vom Browser verarbeitet. Für den Server ist dies lediglich der Text, der als Antwort auf die Anfrage gesendet werden muss.

Warum wir möglicherweise den Quellcode studieren müssen

Alles, was wir sehen, können wir analysieren und anwenden, um bestimmte Probleme zu lösen, die bei der Arbeit mit der Website, insbesondere bei der Optimierung, auftreten. Durch einen Blick auf den Quellcode können wir:

• Sehen Sie sich die Meta-Tags Ihrer oder einer anderen Website an, um sie zu analysieren.
• Sehen Sie das Vorhandensein oder Fehlen bestimmter Elemente auf der Website: Zähler, Identifikationscodes in verschiedenen Systemen, bestimmte Skripte usw.
• Finden Sie die Parameter der Elemente heraus: Größen, Farben, Schriftarten.
• Finden Sie den Pfad zu Fotos und anderen Elementen auf der Seite.
• Entdecken Sie die Links auf der Seite.
• Finden Sie Probleme mit dem Code, die den Prozess der Site-Optimierung beeinträchtigen: Stile, die nicht in separaten Dateien platziert sind, Skripte, ungültiger Code.

Dies sind die Grundfunktionen, aber tatsächlich können Sie durch die Fähigkeit, den Code zu lesen, viel mehr über die Seite erfahren.

So zeigen Sie den Quellcode einer Site an

Dies ist in der Form, in der es vom Browser auf dem Server veröffentlicht wird, nicht vollständig möglich. Sie können jedoch das gesamte Markup sehen, indem Sie mit der rechten Maustaste auf die Seite klicken. Hier und unten am Beispiel von Google Chrome.

Wählen Sie die Option „Seitencode anzeigen“ und erhalten Sie die vollständige Liste in einem separaten Tab.

Es ist nur Text, den man analysieren muss, um ihn zu verstehen. Mit den Entwicklertools können Sie jedoch interaktiven Code erhalten.

So finden Sie den Quellcode einer Website-Seite

Klicken Sie im Browser auf das Menüsymbol. Meistens befindet es sich rechts und sieht aus wie drei Punkte oder Streifen.

Wählen Sie im Abschnitt „Zusätzliche Tools“ „Entwicklertools“ aus.

Es öffnet sich ein Fenster, das den aktiven Status des Codes anzeigt. Das heißt, wenn Sie auf das Markup klicken, wird der Elementstil daneben angezeigt und die ausgewählten Blöcke werden auf der Seite hervorgehoben.

Auf der Registerkarte „Quelle“ können Sie den Inhalt einiger Dateien anzeigen: Skripte, Schriftarten, Bilder.

Im Reiter „Sicherheit“ können Sie das Zertifikat der Site überprüfen.

Die Registerkarte „Audits“ hilft Ihnen, die auf dem Hosting veröffentlichten Ressourcen zu überprüfen.

Wenn die Position des Bedienfelds auf der rechten Seite ungünstig ist, können Sie auf die drei Punkte klicken und sie ändern, indem Sie das gewünschte Element auswählen.

So zeigen Sie Meta-Tags an

Jedes HTML-Dokument enthält Struktur-Tags. Hier sind einige davon:

1. Html – das gesamte Dokument.
2. Head – Abschnitt der Service-Header.
3. Titel – Seitentitel (wird auf der Registerkarte angezeigt).
4. Hauptteil – der Hauptteil des Dokuments.
5. H1-H6 – Seitentextüberschriften.
6. Artikel – Artikel.
7. Abschnitt - Abschnitt.
8. Menü – Menü.
9. Div – Block.
10. Spanne – Zeichenfolge.
11. P – Absatz.
12. Tisch – Tisch.

Elemente dienen dazu, Abschnitte auf einer Seite logisch abzugrenzen; bei Bedarf werden sie mithilfe von Stilen gestaltet. Sie enthalten Text, der auf der Seite irgendwie sichtbar ist. Aber das Head-Tag enthält Serviceinformationen. Zur Kennzeichnung werden Meta-Tags verwendet. Alles, was darin steht, ist für den Server und die Suchmaschinen bestimmt.

Ihr Inhalt kann auf andere Weise nicht in Erfahrung gebracht werden.

Achten wir auf das Link-Tag. Mit seiner Hilfe werden Links zu externen eingebundenen Dateien angegeben. Bei Bedarf können Sie den Inhalt anzeigen und auf der Festplatte speichern. Bewegen Sie dazu den Zeiger auf die Adresse und drücken Sie RMB. Wählen Sie „In neuem Tab öffnen“.

Die angegebene Datei wird in einem neuen Tab geöffnet, den Sie anzeigen oder speichern können.

So zeigen Sie den Quellcode einer Seite an, um ein Skript zu debuggen

In diesem Fall ist es am bequemsten, die Seite auf dem lokalen Computer zu öffnen. Wenn Sie nur Markup, Stile und Skripte korrigieren müssen, können Sie dies direkt aus dem Ordner heraus tun. Der HTML-Code wird auf die gleiche Weise angezeigt. Auf der Registerkarte „Konsole“ sind jedoch JavaScript-Codefehler zu sehen. Hier wird die Beschreibung des Fehlers und die Zeilennummer angezeigt, in der er aufgetreten ist.

Die Syntax ist direkt im Code ersichtlich. Dafür gibt es die Registerkarte „Quelle“.

So zeigen Sie den Code eines bestimmten Elements an

Bei großen Seiten mit vielen Elementen ist es schwierig, den erforderlichen Code im gesamten Markup zu finden. In diesem Fall sollten Sie einen speziellen Kontextmenübefehl verwenden. Bewegen Sie die Maus über das Fragment und drücken Sie RMB. Wählen Sie den Befehl „Code anzeigen“.

Es öffnet sich das gleiche Fenster, jedoch mit dem Fokus auf dem ausgewählten Objekt.

Zusammenfassung

Wir haben Ihnen gesagt, was der Quellcode der Seite ist. Es reicht aus, Grundkenntnisse in HTML und CSS zu beherrschen, und mit praktischen Entwicklertools können Sie Ihre eigenen HTML-Dokumente debuggen.

Durch die Durchsicht des Ressourcencodes im Internet können Sie nicht nur aus Ihren eigenen Erfahrungen lernen, sondern auch echte Arbeitsbeispiele verwenden. Und für SEO-Spezialisten sind Meta-Tags nützlich, deren Informationen viel über die Website aussagen können.

Der SendPulse-Dienst ist ein Marketingtool zum Aufbau einer Abonnementbasis und zur Umwandlung gelegentlicher Besucher Ihrer Website in regelmäßige Besucher. SendPulse vereint auf einer Plattform die wichtigsten Funktionen zur Kundengewinnung und -bindung:
● E-Mail-Newsletter,
● Web-Push,
● SMS-Mailings,
● SMTP,
● Newsletter in Viber,
● Senden von Nachrichten an den Facebook-Messenger.

E-Mail-Newsletter

Senden von Push-Benachrichtigungen

SMTP

Facebook-Messenger-Bots

SMS senden

Partnerprogramm

Jeder Internetnutzer hat seine eigenen Lieblingsseiten, auf denen er viel Zeit verbringt. Und nur die Faulen dachten nicht daran, sich anzusehen, wie es entstand und woraus es bestand. Es ist unmöglich, alle diese Fragen zu beantworten, da es viele Möglichkeiten gibt, eine Website zu erstellen. Ein Blick auf die Befehle und Codes, aus denen sie besteht, ist jedoch möglich und für jedermann öffentlich zugänglich.

Eine andere Frage ist, ob eine Person, die nicht in die Programmierung involviert ist, eines der Symbole verstehen wird, aus denen der Code besteht. Anhand der unten aufgeführten Beispiele kann jedoch jeder Google Chrome-Benutzer einzelne Elemente von Websites anzeigen.

So zeigen Sie den Quellcode einer HTML-Seite in einem Google-Browser an

Damit Sie den Seitencode in Chrome anzeigen können, müssen Sie zu der Website gehen, an der Sie interessiert sind, und die folgenden Schritte ausführen:

Diese beiden Elemente unterscheiden sich in ihrer Funktionalität und Information für den Benutzer, Programmierer oder Hacker.

Was ist der Unterschied zwischen dem Seitencode und dem Befehl „Code anzeigen“?

Wenn Sie jede dieser Funktionen analysieren, können Sie einen separaten Artikel schreiben. Für Programmierer ist dieser Unterschied von Bedeutung und sie verstehen, in welchen Fällen „Code anzeigen“ und in welchen Fällen „Seitencode anzeigen“ im Google Chrome-Browser verwendet werden muss.

Für den durchschnittlichen Benutzer lassen sich diese Funktionen jedoch in die folgenden Zwecke unterteilen:

1. „Seitencode anzeigen“ ist nur erforderlich, um die Hauptkombination der Seite anzuzeigen. Im Wesentlichen handelt es sich hierbei um die Struktur der Site (ohne zusätzliche Modelle in Form von CSS-Dateien und anderen Ergänzungen, die im Ordner des Site-Erstellers verbleiben). Für die Erstellung einer eigenen Seite per „Copy-Paste“ eignet sich diese Struktur zwar nicht, aber sie ermöglicht es Ihnen, zu sehen, was der Programmierer genau gemacht hat und in welcher Reihenfolge, um sicherzustellen, dass die Seite im Google Chrome-Browser ein solches äußeres Design hatte.
2. „Code anzeigen“ zeigt eine detaillierte Struktur an und hebt alle betroffenen Bereiche auf der Seite hervor. Wenn Sie mit der Maus über einen bestimmten Listencode fahren, wird das Element auf der Site hervorgehoben, zu der es gehört.
3. Wenn Sie den Seitencode anzeigen, wird er in einem separaten Browser geöffnet, ohne dass Sie ihn bearbeiten können. Das heißt, es ist nur zum Kopieren und Lesen von Site-Code geeignet. Dies ist jedoch eine nicht weniger nützliche Funktion.
4. „Code anzeigen“ ist änderbar und Sie können jedes Element auf eine für Sie bequeme Weise bearbeiten. Natürlich bleiben alle diese Änderungen „leben“, bis die Seite aktualisiert wird, aber manchmal macht es Spaß, diese Einstellungen durchzugehen und einfach zu verstehen, warum dieser oder jener Wert benötigt wird und was passiert, wenn Sie ihn ändern. Sie sollten nicht davon ausgehen, dass Sie durch solche Aktionen sich selbst oder der Website Schaden zufügen – diese Änderungen wirken sich nur auf den Code Ihres Google Chrome aus und gehen nicht online.

Wir überlegen, wie der Elementcode angezeigt werden soll

Wenn wir eine solche Frage beantworten müssten, wäre die einzige Möglichkeit, die sich uns bietet, ein Beispiel. Denn in einem Artikel ist es sehr schwierig, zu einer Person zu werden, die dieses Thema versteht (Webentwickler), aber es ist viel einfacher, anhand eines Beispiels zu zeigen, dass die Frage geklärt ist.

Die Funktionalität des Elementcodes ist sehr umfangreich, daher nehmen wir eines der Wörter auf der Website des Google Chrome-Browsers. Wir wollten überlegen, welche Schlüsselwörter (im Code wird es als „Schlüsselwörter“ geschrieben) für unsere Website verwendet wurden. Dazu führen wir den folgenden Algorithmus aus:

Andere Möglichkeiten, diese Funktion im Google Chrome-Browser zu verwenden

Im Allgemeinen sollten Sie bei der weiteren Beantwortung der Frage, wie der Code eines Elements aussieht und warum es benötigt wird, seine Funktionen auflisten. Dank der Möglichkeit, den Code eines Elements einer beliebigen Website im Google Chrome-Browser anzuzeigen, können wir nämlich:

• Sehen Sie sich die Struktur der Site an, beginnend mit head („Site-Header“) und endend mit end (dem letzten Befehl eines Programms);
• Sehen Sie sich alle Funktionen der Site an, nämlich: Links zu anderen Sites, zusätzliche Module von externen Sites und das Vorhandensein integrierter Zähler zum Sammeln verschiedener Informationen;
• Finden Sie heraus, ob das Kopieren von der Website verboten ist oder nicht;
• Der Code zeichnet alle Links zu anderen Seiten der Website sowie deren Gestaltung und nachfolgende Aktionen nach dem Anklicken auf.

Dies ist keineswegs eine endliche Liste. Es sei jedoch daran erinnert, dass es ohne besondere Kenntnisse fast unmöglich ist, den Code einer Google Chrome-Seite zu „lesen“ und die empfangenen Daten von einem normalen Benutzer praktisch nicht benötigt werden.

Der Punkt „Elementcode anzeigen“ funktioniert nicht

Es sollte gleich gesagt werden, dass jede Site offenen Zugang zu den Elementcodes haben wird. Das heißt, selbst die beliebtesten und teuersten Websites können ihren Code einsehen. Wenn das Element im Google Chrome-Browser nicht aktiv ist oder einen Fehler generiert, kann dies folgende Gründe haben:

• Das Benutzerprofil ist beschädigt.
• Das Vorhandensein von Malware auf dem Computer;
• Blockierung durch eine bestimmte Erweiterung zur Leistungssteigerung (auch das kann passieren).

Behebung eines beschädigten Benutzerprofils

Um ein neues Profil zu erstellen, müssen Sie das alte von Ihrem Computer löschen. Dazu gehen wir wie folgt vor:

1. Schließen Sie Google Chrome und starten Sie den integrierten Windows Explorer-Browser.
2. Geben Sie den folgenden Befehl in die Adressleiste ein: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Wenn das Verzeichnis geöffnet wird, suchen Sie nach dem Ordner „Default“ und fügen Sie „Backup“ zu seinem Namen hinzu, sodass er wie folgt aussieht: „Backup Default“.
4. Nach dem Neustart des Chrome-Browsers wird nun ein neues Profil erstellt.

Wir entfernen Malware oder deren Überreste

Wenn uns das neue Profil keinen Zugriff auf den Seitenelementcode gewährt und der Fehler weiterhin angezeigt wird, sollten wir Folgendes tun:

1. Öffnen Sie die Windows-Befehlszeile („Ausführen“) und geben Sie dort den Befehl „cmd“ ein.
2. Geben Sie den folgenden Befehl in die Zeile ein: RD /S /Q „%WinDir%\System32\GroupPolicyUsers“.
3. Geben Sie nach Bestätigung der Aktion Folgendes ein: RD /S /Q „%WinDir%\System32\GroupPolicy“.
4. Jetzt „gpupdate /force“ (ohne Anführungszeichen).

Wenn alles richtig gemacht wurde, öffnet Google Chrome nach dem Neustart des Computers den Code der Elemente und der Browser funktioniert normal.

Es könnte nützlich sein zu lesen:

• Mit Hamachi Minecraft spielen – Installation und Konfiguration;
• Welche SSD soll man für ein MacBook wählen? Welche Solid-State-Festplatte ist besser für ein MacBook?;
• Hochempfindliche Mikrofone mit rauscharmen Bassverstärkern;
• So schalten Sie Nokia Lumiya ein Warum lässt sich Lumiya nicht einschalten?;
• Flat Design: Vergangenheit, Gegenwart und Zukunft Geschichte des Flat Designs;
• Facebook für Telefon – Installation und Arbeiten mit der Anwendung Neue Version von Facebook für Android;
• So senden Sie ein Dokument in Odnoklassniki als Nachricht an einen Freund. Ist es möglich, ein Word-Dokument in Odnoklassniki zu senden?;
• Was tun, wenn die Tastatur Ihres Computers nicht funktioniert?;