So verwenden Sie das Inspect-Element-Tool Ihres Browsers

Wenn Sie mit vielen Websites arbeiten, sind Sie wahrscheinlich immer auf der Suche nach schnelleren und effizienteren Möglichkeiten, Aufgaben zu erledigen. In diesem Fall könnte das Werkzeug „Element prüfen“, das in den meisten gängigen Browsern verfügbar ist, ein nützliches Hilfsmittel sein. Damit können Sie CSS-Klassen schnell identifizieren, Änderungen an Elementen auf einer Seite in der Vorschau anzeigen, eine Site auf Mobilgeräten simulieren und vieles mehr.

In diesem Artikel stellen wir das Inspect Element-Tool vor und zeigen Ihnen, wie Sie in den gängigsten Webbrowsern darauf zugreifen. Anschließend führen wir Sie durch einige Beispiele, wie Sie es als Teil Ihres Webentwicklungsworkflows verwenden können.

Lass uns eingraben!

So greifen Sie in gängigen Browsern auf das Inspect-Element-Tool zu

Das Werkzeug Element prüfen ist ein Dienstprogramm, mit dem Sie den zugrunde liegenden Quellcode jeder Webseite anzeigen können. Darüber hinaus können Sie damit temporäre Änderungen vornehmen und die Ergebnisse in Echtzeit anzeigen, während der ursprüngliche Quellcode intakt bleibt. Dies ist unglaublich nützlich, wenn Sie eine Änderung testen oder ein Problem diagnostizieren müssen. Es kann auch nützlich sein, wenn Sie auf eine Website mit einer Funktion stoßen, die Ihnen gefällt und Sie neugierig sind, wie sie implementiert wurde.

Die meisten gängigen Browser – einschließlich Chrome, Firefox und Safari – bieten eine Variation dieses Tools an. Schauen wir uns an, wie Sie in jedem von ihnen darauf zugreifen können.

Zugriff auf das Inspect-Element in Google Chrome

Es gibt drei Möglichkeiten, auf das Inspect Element-Tool in Chrome zuzugreifen:

• Klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie Prüfen .
• Klicken Sie auf das Drei-Punkte-Menü in der oberen rechten Ecke des Fensters und wählen Sie Weitere Tools > Entwicklertools.
• Drücken Sie Strg + Umschalt + C auf Ihrer Tastatur ( Cmd + Wahl + C auf dem Mac).

Wenn das Tool geöffnet wird, wird Ihnen eine geteilte Ansicht angezeigt. Auf der einen Seite haben Sie eine Vorschau der zu untersuchenden Website sowie einige Steuerelemente zum Anpassen der Ansicht und zum Simulieren verschiedener Bildschirmauflösungen:

Auf der anderen Seite gibt es mehrere Bereiche mit Informationen. Der obere Bereich ist der HTML-Code für die Seite. Wenn Sie mit der Maus über einen Teil des Codes fahren, wird der entsprechende Bereich der Seite rechts hervorgehoben:

Darunter befindet sich ein Fenster mit Informationen zur Seite. Die hier angezeigten Details variieren je nachdem, welche der Registerkarten Sie auswählen. In den obigen Screenshots werden die CSS-Stile der Seite angezeigt.

Der untere Bereich enthält lediglich Neuigkeiten und Updates zu den Chrome-Entwicklertools. Sie können dies sicher schließen, um Unordnung zu vermeiden, indem Sie auf das X klicken.

Schließlich können Sie die Position dieser Fenster ändern, indem Sie auf das Drei-Punkte-Menü in der oberen rechten Ecke des HTML-Fensters klicken und eine der Dock-Optionen auswählen.

Zugriff auf das Inspect-Element in Mozilla Firefox

Das Inspect Element-Tool in Firefox ist dem von Chrome ziemlich ähnlich und kann auf ähnliche Weise aufgerufen werden:

• Klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie Element prüfen.
• Klicken Sie auf das Hamburger-Menü in der oberen rechten Ecke des Firefox-Fensters und wählen Sie Web Developer > Inspector .
• Drücken Sie Strg + Umschalt + C auf Ihrer Tastatur ( Cmd + Wahl + C auf dem Mac).

Firefox platziert die Informationsfenster standardmäßig am unteren Bildschirmrand:

Sie können sie jedoch leicht verschieben, indem Sie auf das Drei-Punkte-Menü klicken und eine andere Option auswählen.

Zugriff auf das Inspect-Element in Safari

Auf Mac-Computern bietet der Safari-Webbrowser auch ein Werkzeug zum Prüfen von Elementen. Es gibt jedoch einen zusätzlichen Schritt, um darauf zuzugreifen – Sie müssen die Safari-Entwicklertools aktivieren.

Gehen Sie dazu zur Menüleiste oben auf Ihrem Bildschirm und navigieren Sie zu Safari> Einstellungen> Erweitert . Sie können dann das entsprechende Kontrollkästchen aktivieren, um die Entwicklungstools zu aktivieren:

Nach der Aktivierung können Sie wie in anderen Browsern auf die Funktion „Element prüfen“ zugreifen:

• Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Element prüfen .
• Navigieren Sie in der oberen Menüleiste zu Entwickeln > Webinspektor anzeigen.
• Drücken Sie Cmd + Option + I auf Ihrer Tastatur.

Das anfängliche Layout des Safari-Tools unterscheidet sich etwas von den Browsern:

Wie bei Chrome und Firefox können Sie es jedoch ganz einfach anpassen, indem Sie auf die Symbole in der oberen linken Ecke des Inspektorfensters klicken.

5 häufige Verwendungen für das Werkzeug „Element prüfen“

Nachdem Sie nun wissen, wie Sie auf das Werkzeug „Element prüfen“ zugreifen, sehen wir uns einige der nützlichen Dinge an, die Sie damit machen können. Es gibt unzählige Möglichkeiten, aber die folgenden Anwendungen sind einige der gebräuchlichsten. Beachten Sie, dass wir für diese Beispiele Chrome verwenden, aber die Funktionen sollten in anderen Browsern ähnlich funktionieren.

1. CSS-Klassen auf einer Website finden

Eine der nützlichsten Möglichkeiten, Inspect Element zu nutzen, besteht darin, Details in den Cascading Style Sheets (CSS) einer Seite zu finden. Dies ist aus mehreren Gründen praktisch. Wenn Sie nur im Internet surfen und auf eine Website stoßen, deren Stil Sie wirklich lieben, können Sie einen Blick auf das CSS werfen, um einige Ideen für Ihr eigenes Webdesign zu sammeln.

Es ist auch auf Ihrer eigenen Website nützlich. Wenn ein Element beispielsweise nicht richtig aussieht, können Sie es schnell überprüfen, um sicherzustellen, dass es das richtige CSS verwendet.

Es gibt zwei grundlegende Möglichkeiten, Stile mit Inspect Element zu überprüfen. Wenn Sie ein einzelnes Element schnell anzeigen möchten, können Sie im Vorschaubereich mit der Maus darüber fahren, um einige grundlegende Informationen dazu anzuzeigen:

Hier sehen Sie das Farbschema, die Schriftart, die Ränder und mehr für die Kopfzeile in unserem Blog. In den Detailfenstern hebt das Tool auch den relevanten Code hervor, damit Sie genau sehen können, was vor sich geht. Wenn Sie in der Vorschau auf ein Element klicken, wird der Stilbereich aktualisiert, um auch dessen CSS anzuzeigen:

Wenn der Mauszeiger über das Element nichts zu bewirken scheint, stellen Sie sicher, dass das Cursorsymbol im Inspektorfenster blau hervorgehoben ist:

Falls Sie die spezifische CSS-Klasse oder den gesuchten Stil kennen und jedes Element sehen möchten, das sie verwendet, können Sie auch die Suchfunktion verwenden. Drücken Sie bei geöffnetem Inspektor Strg + Umschalt + F auf Ihrer Tastatur ( Cmd + Umschalt + F auf dem Mac). Dadurch wird ein Suchfeld geöffnet, in dem Sie den Code der Seite durchsuchen können . Relevante Ergebnisse werden hervorgehoben, genau wie bei der Suche in einem Dokument.

2. Fehlerbehebung bei einer Site

Das Werkzeug „Element prüfen“ ist äußerst praktisch, um Probleme zu beheben. Wenn beispielsweise die Farbe oder die Schriftart eines Elements nicht ganz richtig aussieht, können Sie dies schnell mit dem Tool überprüfen, wie wir es im vorherigen Abschnitt beschrieben haben.

Sie können den HTML-Code einer Seite auch direkt über das Werkzeug „Element prüfen“ bearbeiten. Doppelklicken Sie einfach auf den Code, den Sie ändern möchten, um ihn zu bearbeiten.

Beachten Sie, dass der Code auf der Website nicht wirklich geändert wird – wenn Sie die Seite aktualisieren, kehrt sie in ihre ursprüngliche Form zurück. Diese Funktionalität ist jedoch für schnelle Tests und Fehlerbehebung äußerst nützlich.

Schließlich ist der integrierte Debugger ein fortschrittlicheres Tool, mit dem Sie alle Fehlermeldungen anzeigen können, die hinter den Kulissen angezeigt werden. Um darauf zuzugreifen, klicken Sie oben im Inspektorfenster auf Konsole :

Es gibt auch andere Registerkarten zum Anzeigen von Quellen, Netzwerkaktivitäten und mehr. Um auf die vollständige Liste zuzugreifen, klicken Sie oben im Inspektor auf das Doppelpfeilsymbol.

3. Text bearbeiten, um Änderungen in der Vorschau anzuzeigen

Eine der besten Anwendungen für Inspect Element ist die schnelle Vorschau von Änderungen an Text, Schriftart oder Farbe einer Seite. Auf diese Weise können Sie genau sehen, wie Ihre Idee aussieht, ohne sich in Ihr WordPress-Dashboard einzuloggen.

Um ein Element zu bearbeiten, klicken Sie mit der rechten Maustaste darauf und wählen Sie Inspizieren. Dadurch wird das Tool mit dem Code dieses Elements im Fokus geöffnet. Wenn Sie Inspect Element bereits geöffnet haben, können Sie auch auf das Element im Vorschaufenster klicken, um den entsprechenden Code hervorzuheben.

Als nächstes doppelklicken Sie einfach auf den Code, um ihn bearbeitbar zu machen. Hier haben wir beispielsweise den Titel unseres Blogs geändert:

Sie können auch Farben ändern. Wählen Sie einfach das Element und blättern Sie durch die Styles den entsprechenden Abschnitt finden Bereich. Sie können auf die Farbquadrate klicken, um eine Farbauswahl aufzurufen:

Sie können den Hex-Code der Farbe auch direkt bearbeiten, wenn Sie den gewünschten Code kennen.

4. Vorschau von Bildänderungen

Inspect Element erleichtert auch die Vorschau von Bildänderungen. Dies ist auch eine hervorragende Möglichkeit, verschiedene Bildgrößen auszuprobieren.

Wählen Sie einfach im Vorschaubereich das Bild aus, das Sie ändern möchten, und doppelklicken Sie dann im HTML-Bereich auf seine URL:

Sie können dann die URL eines anderen Bildes einfügen, um es zu testen. Wenn sich das Bild in Ihrer WordPress-Medienbibliothek befindet, können Sie die URL schnell in den Anhangsdetails finden:

Es gibt sogar eine praktische Schaltfläche, um die URL in Ihre Zwischenablage zu kopieren. Denken Sie auch hier daran, dass alle Änderungen, die Sie im Inspektor vornehmen, nur vorübergehend und nur für Sie sichtbar sind. Spielen Sie also ruhig herum.

5. Testen einer Site mit der Geräteemulation

Schließlich ist eine weitere nützliche Funktion von Inspect Element die Möglichkeit, verschiedene Bildschirmgrößen und sogar bestimmte Geräte zu emulieren. Auf diese Weise können Sie die Reaktionsfähigkeit einer Website testen und genau sehen, wie sie mit verschiedenen mobilen Formfaktoren angezeigt wird.

Klicken Sie bei geöffnetem Inspektor auf das Symbol, das wie ein gestapeltes Telefon und Tablet aussieht:

Dies ermöglicht die Geräteemulation. Beachten Sie, dass es beim Öffnen des Inspektors standardmäßig aktiviert sein kann. Ändern Sie die Größe der Seitenvorschau mithilfe der Ziehpunkte um sie herum oder klicken Sie auf die Dropdown-Listen oben im Vorschaufenster, um verschiedene Geräte auszuwählen:

Sie können auch ein bestimmtes Seitenverhältnis eingeben oder sogar überprüfen, wie die Seite aussieht, wenn das mobile Gerät gedreht wird, indem Sie oben im Vorschaubereich auf das Symbol „Drehen“ klicken. Um verschiedene Sensoren wie Standort und Berührung zu emulieren, klicken Sie auf das Drei-Punkte-Menü im Informationsfenster und wählen Sie Weitere Tools > Sensoren .

Abschluss

Egal, ob Sie neu in der Webentwicklung oder ein erfahrener Profi sind, das Inspect Element-Tool ist ein leistungsstarkes Dienstprogramm, das auf jeden Fall in Ihrem Arsenal sein sollte. Es ist leicht zugänglich, fast universell verfügbar und macht eine Vielzahl von Operationen schnell und einfach.

In diesem Artikel haben wir gezeigt, wie Sie in Chrome, Firefox und Safari auf Inspect Element zugreifen. Wir haben Ihnen auch gezeigt, wie Sie damit CSS-Klassen finden, Fehler auf einer Website beheben, Text und Bilder vorübergehend ändern und mobile Geräte emulieren. Mit diesem Toolkit haben Sie alles, was Sie brauchen, um Inspect Element zu einem Teil Ihres Workflows zu machen.

Haben Sie Fragen zur Verwendung von Inspect Element? Lass es uns im Kommentarbereich unten wissen!

Ausgewähltes Bild über Kinjugraphics / shutterstock.com.