So überprüfen Sie eine Website richtig

Ob Sie ein Entwickler sind, der neue Funktionen für ein Projekt testet, oder ein Designer, der sich HTML- und CSS-Code genauer ansehen möchte, es gibt viele Gründe, eine Website und ihre Elemente zu überprüfen. Zu wissen, wo man anfangen soll, kann jedoch (zunächst) verwirrend erscheinen.

Glücklicherweise können Sie verschiedene einfache Tools, Techniken und Tricks verwenden, um Webelemente richtig zu untersuchen. Außerdem gibt es Optionen für fast jeden Browser und jedes Betriebssystem (OS).

In diesem Beitrag besprechen wir, warum Sie eine Website überprüfen möchten. Dann führen wir Sie durch einige der besten Tools, die Sie verwenden können, bevor wir erklären, worauf Sie achten müssen. Springen wir rein!

Warum Sie eine Website überprüfen sollten

Es gibt mehrere Gründe, warum Sie eine Website überprüfen möchten. Beispielsweise müssen Sie möglicherweise ein Problem beheben oder eine bestimmte Information finden.

Durch das Untersuchen von Webelementen in einem Browser können WordPress-Entwickler, Designer und digitale Vermarkter das Erscheinungsbild einer Webseite manipulieren und Änderungen testen. Entwickler oder Tester verwenden diese Funktion eher, um ein bestimmtes Element zu debuggen, Layouttests durchzuführen oder CSS live zu bearbeiten.

Die Inspektion von Webelementen ist auch für Webdesigner hilfreich. Wenn Sie schnell eine Farbänderung oder eine neue Schriftart testen möchten, können Sie dies tun, ohne in Ihren CSS-Code einzugreifen.

Darüber hinaus können digitale Vermarkter ein Inspect Element-Tool verwenden, um zu sehen, wie sich bestimmte Änderungen auf das allgemeine Erscheinungsbild einer Webseite auswirken würden. Beispielsweise möchten Sie vielleicht einen neuen Call To Action (CTA)-Button oder ein anderes Farbschema ausprobieren. Sie können Tools verwenden, um die Updates zu replizieren, ohne Änderungen an Ihrer Live-Site vorzunehmen.

Schließlich kann die Inspektion einer Website eine hervorragende Möglichkeit sein, um zu erfahren, wie eine Website aufgebaut ist und funktioniert. Wenn Sie mehr über die Webentwicklung erfahren möchten, ist die Inspektion von Websites ein ausgezeichneter Einstieg.

Die besten Tools und Erweiterungen zum Überprüfen einer Website

Es gibt eine Reihe verschiedener Tools und Erweiterungen, mit denen Sie eine Website überprüfen können. Hier sind einige der beliebtesten Optionen!

Element prüfen

Das Inspect Element Tool ist die gebräuchlichste Option. Damit können Sie sich den HTML- und CSS-Code, aus dem eine Webseite besteht, genau ansehen. Sie können es auch verwenden, um das CSS live zu bearbeiten und zu sehen, wie Ihre Änderungen aussehen würden, ohne dauerhafte Änderungen vorzunehmen.

Obwohl es als Google Chrome-Erweiterung verfügbar ist, ist das Inspect Element-Tool auch in allen gängigen Browsern enthalten. Die Funktion ist Teil der Chrome Developer Tools, einer Reihe von Programmen, mit denen Sie den HTML- und CSS-Code einer Webseite überprüfen und bearbeiten können.

Um auf die Google Chrome Developer Tools zuzugreifen, drücken Sie einfach Strg+Shift+I (oder Cmd+Opt+I auf einem Mac). Sie können auch auf die Tools zugreifen, indem Sie das Chrome-Menü öffnen und Weitere Tools > Entwicklertools auswählen:

Sie können in anderen Browsern auf dieselben Entwicklertools zugreifen. Zum Beispiel hat Firefox Developer Tools ähnliche Funktionen. Um auf die Tools zuzugreifen, drücken Sie einfach Strg+Shift+I (oder Cmd+Opt+I auf einem Mac). Sie finden die Tools auch, indem Sie das Firefox-Menü öffnen und Web Developer > Inspector auswählen.

Darüber hinaus können Sie mit Safari Developer Tools den HTML- und CSS-Code einer Webseite auf Mac-Geräten überprüfen und bearbeiten. Drücken Sie einfach Cmd+Opt+I . Sie können auch das Safari-Menü öffnen und in der Menüleiste Einstellungen > Erweitert > Entwicklungsmenü anzeigen auswählen.

BrowserStack

Eine weitere Plattform, die Sie zum Testen von Websites verwenden können, ist BrowserStack:

Diese Cloud-basierte Testplattform funktioniert mit allen gängigen Browsern und Geräten. Nachdem Sie sich für eine kostenlose Testversion angemeldet haben, können Sie zum Live-Dashboard navigieren und Ihr Betriebssystem auswählen.

Anschließend können Sie Ihre bevorzugte Browserversion auswählen, um eine Live-Sitzung in Ihrem Browser zu starten. Schließlich können Sie auf der Website navigieren, die Sie inspizieren möchten, wie Sie es mit Inspect Element tun würden.

So inspizieren Sie eine Website

Lassen Sie uns einen Blick darauf werfen, wie Sie eine Website mit dem Tool Inspect Element inspizieren können. Beginnen Sie, indem Sie einfach mit der rechten Maustaste auf ein beliebiges Webseitenelement klicken und im Kontextmenü die Option Inspizieren auswählen:

Dadurch wird das Werkzeug „Inspect Element“ in Ihrem Browser geöffnet. Sobald das Tool geöffnet ist, können Sie damit beginnen, den HTML- und CSS-Code zu manipulieren, um zu sehen, wie sich dies auf das Erscheinungsbild der Webseite auswirken würde.

Sie können beispielsweise die Farbe eines Elements ändern, eine Klasse hinzufügen oder entfernen oder sogar die Position eines Elements ändern. Sie können auch das Suchfeld oben verwenden, um nach einem Text oder einem Bild zu suchen.

Natürlich sind alle Änderungen, die Sie mit Inspect Element vornehmen, nur vorübergehend. Sie werden nicht gespeichert, wenn Sie die Seite aktualisieren oder den Browser schließen. Dies ist jedoch eine großartige Möglichkeit, um zu testen, wie bestimmte Änderungen aussehen würden, ohne Ihre Website dauerhaft zu ändern.

Sie können auf das Tool auch zugreifen, indem Sie Strg+Umschalt+I (oder Cmd+Opt+I auf einem Mac) drücken, um die Entwicklertools zu öffnen. Klicken Sie dann oben im Fenster auf die Registerkarte Elemente :

Schließlich können Sie auch auf Inspect Element zugreifen, indem Sie das Chrome-Menü öffnen und Weitere Tools > Entwicklertools auswählen, die wir bereits besprochen haben.

So ändern Sie ein Element

Wenn Sie ein Element auf einer Webseite ändern möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie Inspect . Suchen Sie im sich öffnenden Bedienfeld „Elemente“ den Teil, den Sie ändern möchten, und doppelklicken Sie darauf.

Wenn Sie das Feld „ Elemente“ öffnen, können Sie das Cursorsymbol „Inspizieren“ oben links im Bedienfeld verwenden, um den Quellcode des Elements hervorzuheben, das Sie ändern möchten. Wenn Sie mit der rechten Maustaste auf den markierten Code klicken, wählen Sie Als HTML bearbeiten aus:

Das Feld wird erweitert, dann können Sie den Text ändern. Um eine Vorschau der Änderungen anzuzeigen, können Sie das Element abwählen. Sie können auch auf den Text doppelklicken, um ihn zu bearbeiten.

Sie können diese Technik auch verwenden, um den CSS-Code für ein Element zu ändern. Klicken Sie dazu mit der rechten Maustaste darauf und wählen Sie Inspect . Suchen Sie im Elementebedienfeld das Element, das Sie ändern möchten, und wählen Sie die Eigenschaft element.style aus. Dann können Sie Ihren Code oder Deklarationen in geschweiften Klammern hinzufügen.

So verstecken oder löschen Sie ein Element

Möglicherweise möchten Sie auch ein Element auf einer Webseite ausblenden oder löschen. Wenn Sie das Element gefunden haben, das Sie ausblenden oder löschen möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie Prüfen aus, um das Werkzeug Element prüfen zu starten.

Klicken Sie von hier aus mit der rechten Maustaste auf das Element und wählen Sie dann die Option Element löschen oder Element ausblenden :

Die Schaltfläche Löschen entfernt das Document Object Model (DOM)-Element. Die Schaltfläche Ausblenden blendet das Element einfach aus, aber es befindet sich immer noch im DOM.

So prüfen Sie CSS-Klassen

Es gibt mehrere Möglichkeiten, CSS-Klassen zu inspizieren. Die einfachste Methode ist jedoch, mit der rechten Maustaste auf das Element zu klicken, das Sie überprüfen möchten, und Untersuchen auszuwählen. Öffnen Sie dann die Registerkarte Stile , um die CSS-Stile anzuzeigen:

Beachten Sie, dass auf dieser Registerkarte nur die angewendeten Inline-Stile angezeigt werden und nicht diejenigen, die aus einem Stylesheet stammen.

Wenn Sie alle CSS-Stile sehen möchten, die auf ein Element angewendet werden, können Sie die Registerkarte „Berechnet“ verwenden. Es zeigt Ihnen alle CSS-Stile, die auf ein Element angewendet werden, einschließlich derer aus einem Stylesheet:

Wenn Sie mit der Untersuchung einer Webseite fertig sind, schließen Sie einfach das Werkzeug Element untersuchen. Ihre Änderungen werden nicht gespeichert, Sie müssen sich also keine Sorgen machen, dass versehentlich etwas kaputt geht.

Worauf Sie bei der Inspektion einer Website achten sollten

Unabhängig davon, welche Methode Sie verwenden, um auf Inspect Element zuzugreifen, sehen Sie dieselbe Benutzeroberfläche. Es besteht aus zwei Bereichen: dem HTML-Bereich und dem CSS-Bereich.

Der HTML-Bereich zeigt Ihnen die Struktur der Webseite. Sie können sehen, wie die verschiedenen Elemente verschachtelt und miteinander verbunden sind.

Der CSS-Bereich zeigt Ihnen die auf das ausgewählte Element angewendeten Stile. Sie können auch die CSS-Regeln bearbeiten, um zu sehen, wie sich Ihre Änderungen auf das Erscheinungsbild des Elements auswirken würden.

Wenn Sie auf einer Website nach etwas Bestimmtem suchen, sei es ein bestimmter Text oder ein Bild, können Sie Inspect Element verwenden, um es zu finden. Es hat ein Suchfeld, in dem Sie nach einem bestimmten Element suchen können.

Wenn Sie eine Website überprüfen, sollten Sie einige Dinge beachten:

• HTML: Der Code, der die Struktur der Webseite definiert. Achten Sie darauf, wie die Elemente angeordnet sind und wie sie miteinander interagieren.
• CSS: Der Code, der den Stil der Webseite definiert.
• JavaScript : Der Code, der das Verhalten der Webseite definiert. Sie beeinflusst, wie die Elemente interagieren und wie die Seite auf Benutzereingaben reagiert.
• Design : Das allgemeine Erscheinungsbild der Website. Sie beeinflusst, wie benutzerfreundlich das Layout ist und wie gut es zum Zweck der Website passt.
• Inhalt: Der Text, die Bilder und andere Medien der Website.

Worauf Sie bei der Inspektion einer Website achten sollten, hängt hauptsächlich davon ab, ob Sie Designer, Entwickler oder digitaler Vermarkter sind. Wie wir bereits besprochen haben, kann Ihnen das Inspect Element-Tool bei allem helfen, von Designtests bis hin zur Fehlerbehebung.

Abschluss

Inspect Element ist eine wertvolle Funktion für Designer und Entwickler. Sie können es verwenden, um den HTML- und CSS-Code einer Webseite anzuzeigen und zu bearbeiten. Dieses Tool kann hilfreich sein, wenn Sie Änderungen an einer Webseite vornehmen möchten, an der Sie gerade arbeiten, oder sehen möchten, wie sie codiert ist.

Inspect Element ist in den meisten Webbrowsern verfügbar. Sie können darauf zugreifen, indem Sie mit der rechten Maustaste auf eine Webseite klicken und im Menü Untersuchen auswählen. Nachdem Sie das Inspect- Fenster geöffnet haben, sehen Sie den HTML- und CSS-Code der Webseite und können verschiedene Änderungen vornehmen.

Benötigen Sie Hilfe bei der Verwaltung oder Optimierung Ihrer Website? Erfahren Sie, wie WP Engine bei allem helfen kann, vom WordPress-Hosting bis hin zum Site- und Client-Management!