Inhaltsverzeichnis
Wollten Sie schon einmal eine Webseite vorübergehend bearbeiten, um zu sehen, wie sie mit bestimmten Farben, Schriftarten, Styling usw. aussehen würde? Das ist mit einem Tool möglich, das es bereits in Ihrem Browser gibt: Inspect Element. Für alle Heimwerker wird ein Traum wahr, wenn sie davon erfahren. In diesem Artikel zeigen wir Ihnen die Grundlagen von Inspect Element und wie Sie es mit Ihrer WordPress-Website verwenden können.
Was sind Inspect Element oder Developer Tools?
Moderne Webbrowser wie Google Chrome und Mozilla Firefox verfügen über integrierte Tools, mit denen Webentwickler Fehler beheben können. Diese Tools zeigen den HTML-, CSS- und JavaScript-Code einer Seite und wie der Browser den Code ausführt.
Mit dem Tool Inspect Element können Sie HTML-, CSS- oder JavaSCript-Code für jede beliebige Webseite bearbeiten und Ihre Änderungen live sehen (nur auf Ihrem Computer).
Heimwerker, die eine Website selbst gestalten, können mit diesen Tools eine Vorschau auf das Design ihrer Website erhalten, ohne die Änderungen selbst vornehmen zu müssen.
Für Autoren sind diese Tools großartig, da sie persönliche Informationen bei der Aufnahme von Screenshots einfach ändern können und somit die Notwendigkeit entfällt, Elemente ganz unkenntlich zu machen.
Für Support-Mitarbeiter ist dies eine gute Möglichkeit, den Fehler zu identifizieren, der dazu führen könnte, dass Ihre Galerien nicht geladen werden oder Ihre Schieberegler nicht richtig funktionieren.
Wir kratzen gerade mal an der Oberfläche der Anwendungsfälle. Das Element Inspect ist wirklich leistungsstark.
In diesem Artikel werden wir uns auf Inspect Element in Google Chrome konzentrieren, da dies der Browser unserer Wahl ist. Firefox hat seine eigenen Entwicklertools, die auch durch Auswahl von Inspect Element im Browsermenü aufgerufen werden können.
Bereit? Dann fangen wir an.
Video-Anleitung
AbonnierenWenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie bitte weiter.
Starten von Inspect Element und Auffinden des Codes
Sie können das Tool "Element inspizieren" starten, indem Sie die Tasten STRG + Umschalt + I auf Ihrer Tastatur drücken. Alternativ können Sie auf eine beliebige Stelle einer Webseite klicken und "Element inspizieren" aus dem Browsermenü auswählen.
Ihr Browserfenster wird in zwei Teile geteilt, und das untere Fenster zeigt den Quellcode der Webseite an.
Das Fenster des Entwicklertools ist außerdem in zwei Fenster unterteilt. Auf der linken Seite sehen Sie den HTML-Code für die Seite. Auf der rechten Seite sehen Sie die CSS-Regeln.
Wenn Sie mit der Maus über den HTML-Quelltext fahren, wird der betroffene Bereich auf der Webseite hervorgehoben. Sie werden auch feststellen, dass sich die CSS-Regeln ändern und das CSS für das angezeigte Element angezeigt wird.
Sie können auch mit dem Mauszeiger auf ein Element auf der Webseite zeigen, mit der rechten Maustaste klicken und Element inspizieren wählen. Das Element, auf das Sie gezeigt haben, wird im Quellcode hervorgehoben.
Editieren und Debuggen von Code im Inspect Element
Sowohl der HTML- als auch der CSS-Code im Fenster "Element inspizieren" sind bearbeitbar. Sie können auf eine beliebige Stelle im HTML-Quellcode doppelklicken und den Code nach Belieben bearbeiten.
Sie können auch auf alle Attribute und Stile im CSS-Fenster doppelklicken und sie bearbeiten. Um eine benutzerdefinierte Stilregel hinzuzufügen, klicken Sie auf das +-Symbol oben im CSS-Fenster.
Wenn Sie Änderungen an CSS oder HTML vornehmen, werden diese Änderungen sofort im Browser angezeigt.
Beachten Sie, dass alle Änderungen, die Sie hier vornehmen, nirgendwo gespeichert werden. Das Inspect-Element ist ein Debugging-Tool und schreibt Ihre Änderungen nicht in die Dateien auf Ihrem Server zurück. Das heißt, wenn Sie die Seite aktualisieren, sind alle Ihre Änderungen verschwunden.
Um die Änderungen tatsächlich vorzunehmen, müssen Sie das Stylesheet Ihres WordPress-Themes oder die entsprechende Vorlage bearbeiten, um die Änderungen hinzuzufügen, die Sie speichern möchten.
Bevor Sie Ihr bestehendes WordPress-Theme mit dem Tool Inspect Element bearbeiten, sollten Sie alle Änderungen speichern, indem Sie ein Child-Theme erstellen.
Einfaches Finden von Fehlern auf Ihrer Website
Das Inspect-Element verfügt über einen Bereich namens Console, in dem alle Fehler auf Ihrer Website angezeigt werden. Wenn Sie versuchen, einen Fehler zu beheben oder Unterstützung von Plugin-Autoren anzufordern, ist es immer hilfreich, hier nachzusehen, welche Fehler vorliegen.
Wenn Sie zum Beispiel ein OptinMonster-Kunde sind und sich fragen, warum Ihr Optin nicht geladen wird, dann können Sie das Problem "Ihr Seiten-Slug stimmt nicht überein" leicht finden.
Wenn Ihre Sharebar nicht richtig funktioniert, können Sie sehen, dass ein JavaScript-Fehler vorliegt.
Tools wie die Inspect Element Console und SupportAlly helfen Ihnen dabei, einen besseren Kundensupport zu erhalten, da das technische Supportteam Kunden schätzt, die die Initiative ergreifen und detailliertes Feedback zu ihrem Problem geben.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Grundlagen des inspect-Elements zu erlernen und zu verstehen, wie Sie es in Ihrer WordPres-Site verwenden können. Vielleicht möchten Sie auch einen Blick auf den standardmäßig von WordPress generierten CSS-Spickzettel werfen, um Ihre Fähigkeiten bei der Theme-Entwicklung zu verbessern.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Google+ finden.
