So verwenden Sie Inspect Element

Gerätelinks

• Android
• Chromebook
• Mac
• Windows
• Gerät fehlt?

Den meisten Menschen ist nicht bewusst, dass ihnen ein Schatz an Entwicklertools zur Verfügung steht und dieser in ihrem Lieblingsbrowser verborgen ist.

Jeder Webbrowser bietet Entwicklertools, um den Code einer Website zu überprüfen. Für den durchschnittlichen Internetnutzer handelt es sich jedoch um eine fremde Einheit. Wer möchte sich doch schon den Code einer Website ansehen, oder?

Wie sich herausstellt, gibt es viele Dinge, die Sie lernen können, wenn Sie sich den Code einer Website ansehen. Lesen Sie weiter, um herauszufinden, was die Funktion „Element prüfen“ bietet und wie Sie sie verwenden.

Die meisten Browser verfügen über Tools zum Überprüfen von Elementen einer Website, aber im Allgemeinen funktionieren sie alle auf die gleiche Weise.

Verwenden von Inspect Element in Google Chrome

1. Öffnen Sie die Website, die Sie überprüfen möchten.
   
2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie „Inspizieren“ aus .
   
   ODER
3. Klicken Sie auf die drei vertikalen Punkte in der rechten Ecke Ihrer Symbolleiste.
   
4. Gehen Sie zu Weitere Tools .
   
5. Wählen Sie Entwicklertools aus .
   
   ODER
6. Drücken Sie die Tastenkombination F12 auf einem PC (oder CMD + Optionen + I auf einem Mac).
   

Verwenden von Inspect Element in Microsoft Edge

1. Öffnen Sie eine Website.
   
2. Klicken Sie auf die drei vertikalen Punkte in der oberen rechten Ecke der Symbolleiste des Browsers.
   
3. Scrollen Sie nach unten und klicken Sie auf Weitere Tools .
   
4. Klicken Sie auf Entwicklertools .
   
   ODER
5. Klicken Sie mit der rechten Maustaste irgendwo auf die Website und klicken Sie auf „Inspizieren“ .
   
   ODER
6. Drücken Sie Strg + Umschalt + I.
   

Jede dieser drei Methoden führt zum gleichen Ergebnis.

Wenn Sie dies richtig gemacht haben, öffnet sich unten in Ihrem Browser ein neues Fenster. Dies sind die Entwicklertools und umfassen die Registerkarte „Elemente“. Dies ist das Werkzeug, das Sie zum Inspizieren von Elementen benötigen.

Das Bedienfeld wird standardmäßig am unteren Bildschirmrand geöffnet. Sie können die Darstellung jedoch jederzeit ändern. Befolgen Sie diese einfachen Schritte, um das Bedienfeld „Entwicklertools“ neu zu positionieren:

1. Klicken Sie auf die drei horizontalen Punkte in der oberen Ecke des Entwicklertools-Bereichs.
   
2. Wählen Sie eine Dockseite (links, unten oder rechts) oder lösen Sie das Dock in einem separaten Fenster.
   

Wenn Sie den Cursor neben den Rand des Entwicklertools-Bedienfeldrahmens bewegen und ziehen, wird der Arbeitsbereich verkleinert oder erweitert. Wenn Sie das Bedienfeld beispielsweise an der rechten Seite des Browserfensters andocken möchten, versuchen Sie, den Mauszeiger über den linken Rand zu bewegen. Sie können das Bedienfeld ziehen, um seine Größe zu ändern, wenn Sie den Pfeilcursor sehen.

Verwenden von Inspect Element (betriebssystemspezifisch)

Auch wenn viele der erforderlichen Schritte bereits dadurch abgedeckt wurden, dass wir Ihnen nur gezeigt haben, wie Sie Inspect Element im Browser verwenden, zeigen wir Ihnen auf jeden Fall, wie es auf den meisten Betriebssystemen geht.

So verwenden Sie Inspect Element auf einem Chromebook

Der Standardbrowser auf einem Chromebook ist Google. Befolgen Sie daher die Anweisungen des Chrome-Browsers, um auf Inspect Element zuzugreifen . Hier ist ein kleiner Auffrischungskurs für Sie:

1. Öffnen Sie eine Website.
   
2. Klicken Sie auf die drei vertikalen Punkte in der oberen rechten Ecke der Symbolleiste.
   
3. Wählen Sie Weitere Tools aus .
   
4. Klicken Sie auf Entwicklertools .
   

Sie können auch die Rechtsklick-Methode oder die Funktionstaste F12 verwenden , um schneller zu den Entwicklertools zu gelangen.

So verwenden Sie Inspect Element auf einem Android-Gerät

Das Ausführen von Inspect Element auf einem Android-Gerät ist etwas anders. Sehen Sie sich an, wie Sie auf Android zum Bedienfeld „Element prüfen“ gelangen:

1. Drücken Sie die Funktionstaste F12 .
   
2. Wählen Sie „Geräteleiste umschalten“ .
   
3. Wählen Sie das Android-Gerät aus dem Dropdown-Menü aus.
   

Wenn Sie ein bestimmtes Android-Gerät auswählen, werden Sie feststellen, dass eine mobile Version der Website geladen wird. Von hier aus können Sie die Inspect Element-Funktion bequem von Ihrem Desktop aus auf Ihrem Android-Gerät nutzen.

Diese Methode funktioniert sowohl für Chrome- als auch für Firefox-Browser, da diese über eine Funktion namens „Gerätesimulation“ in ihren Entwicklertools verfügen.

Auf die gleiche Weise funktioniert es auch für iPhone-Geräte. Sie müssen nur das richtige im Dropdown-Menü auswählen.

So verwenden Sie Inspect Element in Windows

Das Inspect Element-Tool ist nicht unbedingt betriebssystemspezifisch, aber browserspezifisch. Das bedeutet, dass Entwicklertools eine Funktion des von Ihnen verwendeten Browsers sind und nicht unbedingt Windows. Sie können jedoch unabhängig von Ihrem bevorzugten Browser auf das Bedienfeld „Element prüfen“ zugreifen.

Wenn Sie ein Windows-Betriebssystem verwenden, verwenden Sie wahrscheinlich auch den Microsoft Edge-Browser. Sehen Sie sich an, wie Sie auf Inspect Element in MS Edge zugreifen:

1. Öffnen Sie die Website, die Sie überprüfen möchten.
   
2. Tippen Sie auf die drei vertikalen Punkte in der Ecke des Browserfensters.
   
3. Scrollen Sie nach unten und wählen Sie Weitere Tools aus .
   
4. Klicken Sie auf Entwicklertools .
   

Sie können auch die Funktionstaste F12 verwenden, um schneller auf „Element prüfen“ zuzugreifen. Es funktioniert auch, mit der rechten Maustaste auf die Webseite zu klicken und „Inspizieren“ auszuwählen.

So verwenden Sie Inspect Element auf einem Mac

Wenn Sie einen Mac verwenden, ist Safari wahrscheinlich der Browser Ihrer Wahl. Das Öffnen von Inspect Elements in Safari unterscheidet sich geringfügig von dem in Chrome und Firefox. Aber genauso einfach geht es mit diesen Schritten:

1. Öffnen Sie den Safari-Browser.
   
2. Klicken Sie auf der Registerkarte „Kopfzeile“ auf „Safari“ und wählen Sie im Dropdown-Menü „ Einstellungen“ aus.
   
3. Klicken Sie oben auf dem Bildschirm auf das Zahnradsymbol „Erweitert“ .
   
4. Aktivieren Sie das Kontrollkästchen „ Entwicklungsmenü in der Menüleiste anzeigen“ .
   

Wenn Sie diese Schritte ausführen, wird die Funktion „Element prüfen“ in Ihrem Browser aktiviert. Wenn Sie „Inspect Element“ nicht zuerst aktivieren, wird die Option beim Öffnen einer Website nicht angezeigt.

Nachdem Sie diesen Schritt abgeschlossen haben, klicken Sie einfach mit der rechten Maustaste auf eine beliebige geöffnete Webseite und wählen Sie „Inspizieren“. Sie können auch den Schnelltastenbefehl verwenden: CMD + Option + I (Inspizieren).

So verwenden Sie Inspect Element unter iOS

Möchten Sie die Funktion „Elemente prüfen“ verwenden, um zu sehen, wie eine mobile Version einer Webseite auf einem iPhone angezeigt wird? Dies und mehr können Sie mit nur wenigen einfachen Schritten erledigen. Bevor Sie sich jedoch ein Element ansehen, müssen Sie Web Inspector für Ihr iOS-Gerät aktivieren:

1. Gehen Sie zu Einstellungen .
   
2. Wählen Sie nun Safari aus .
   
3. Scrollen Sie nach unten und tippen Sie auf das Erweiterte Menü .
   
4. Tippen Sie nun auf den Kippschalter, um Web Inspector zu aktivieren .
   

Stellen Sie außerdem sicher, dass das Menü „Entwickeln“ auf Ihrem Mac aktiviert ist, indem Sie die Schritte im obigen Abschnitt ausführen.

Nachdem Sie sowohl iOS-Mobilgeräte als auch Macs aktiviert haben, wird in der oberen Leiste Ihres Mac das Menü „Entwickeln“ angezeigt. Klicken Sie darauf, um das verbundene iPhone und die auf dem Gerät aktive Webseite anzuzeigen. Wenn Sie die Webseite auswählen, wird auch ein Web-Inspektor-Fenster für dieselbe Seite auf Ihrem Mac-Bildschirm geöffnet.

Beachten Sie jedoch, dass diese Anweisungen nur für Safari auf einem Mac funktionieren, nicht für Safari unter Windows.

So verwenden Sie „Element prüfen“, wenn es blockiert ist

Gelegentlich werden Sie feststellen, dass Sie eine Webseite nicht überprüfen können und die Auswahl „Inspizieren“ ausgegraut ist, wenn Sie versuchen, mit der rechten Maustaste darauf zu klicken. Sie denken vielleicht, dass es blockiert ist, aber es gibt zahlreiche Möglichkeiten, dies zu umgehen:

Methode 1 – Javascript deaktivieren

1. Gehen Sie in die Einstellungen .
   
2. JavaScript durchsuchen .
   
3. Schalten Sie JavaScript aus .
   

Methode 2 – Greifen Sie über den langen Weg auf Entwicklertools zu

Anstatt mit der rechten Maustaste zu klicken, um „Inspizieren“ zu starten, gehen Sie wie folgt vor:

1. Gehen Sie in Ihrem Browser zu Einstellungen .
   
2. Wählen Sie Weitere Tools aus .
   
3. Scrollen Sie nach unten und klicken Sie auf Entwicklertools .
   

Methode 3 – Verwenden der Funktionstaste

Sie können auch versuchen, die Funktionstaste F12 auf Webseiten zu verwenden, die den Rechtsklick für „Inspizieren“ blockieren.

Möglicherweise müssen Sie alle diese Methoden ausprobieren, bevor Sie eine finden, die für Sie funktioniert. Als letzten Ausweg können Sie auch versuchen, den Quellcode anzuzeigen, indem Sie view-source: [enter full url] eingeben .

So verwenden Sie Inspect Element auf einem Schul-Chromebook

Wenn Ihr Chromebook von einer Schule ausgegeben wurde, umfasst die Verwendung der Funktion „Element prüfen“ ein paar einfache Schritte:

1. Klicken Sie mit der rechten Maustaste oder tippen Sie mit zwei Fingern auf die Webseite und wählen Sie „Inspizieren“ aus .
   
2. Drücken Sie Strg + Umschalt + I.
   
3. Versuchen Sie, die Methode view-source:[url] zu verwenden, z. B. view-source:https://www.wikipedia.com .
   
   

Allerdings blockieren einige Schulen und Organisationen diese Funktion. Wenn sie also bei Ihnen nicht funktioniert, müssen Sie sich möglicherweise an Ihre Organisation oder den Schulverwalter wenden.

So verwenden Sie Inspect Element, um Antworten zu finden

Sie können Inspect Element verwenden, um Antworten auf eine Vielzahl von Dingen zu finden, wie zum Beispiel:

• Vorschau des Website-Designs auf Mobilgeräten.
• Finden Sie Schlüsselwörter heraus, die Konkurrenten verwenden.
• Geschwindigkeitstests.
• Text auf einer Webseite ändern.
• Finden Sie schnelle Beispiele, um Entwicklern zu zeigen, was Sie brauchen.

Wenn Sie das Bedienfeld „Element prüfen“ starten, sehen Sie den gesamten Code für die Website. Dazu gehört der gesamte darin integrierte JavaScript-, CSS- und HTML-Code. Es ist, als würde man den Quellcode einer Webseite sehen, nur dass man Änderungen am Code vornehmen kann. Außerdem können Sie alle vorgenommenen Änderungen in Echtzeit sehen.

Dieses Tool macht es für Vermarkter, Designer und Entwickler von unschätzbarem Wert, alle Designänderungen anzuzeigen, bevor sie finalisiert werden. Änderungen an der Codierung mit Inspect Element sind jedoch nicht ewig von Dauer. Wenn Sie die Seite neu laden, kehrt sie in den Standardzustand zurück.

Zusätzliche FAQ

Wenn Sie nach der Lektüre oben kein Experte für Inspect Element sind, finden Sie hier weitere Antworten.

Wie verwende ich den Befehl „Element prüfen“, um Antworten zu finden?

Die einzige Möglichkeit, mit der Funktion „Element prüfen“ Antworten zu finden, besteht darin, dass die Website sie sofort nach der Übermittlung anzeigt. In diesem Fall sind Antworten in der Kodierung vorhanden.

Andernfalls sehen Sie sich lediglich den Code für das Quiz oder den Test an, wenn Sie die Funktion „Element prüfen“ sowie alle von Ihnen übermittelten Antworten verwenden.

Ist „Element prüfen“ illegal?

Nein, das Tool „Element prüfen“ ist nicht illegal. Es ist für Webentwickler konzipiert. Das Anzeigen des Quellcodes einer Website ist nicht illegal; Es wird nur dann zu einem Problem, wenn Sie die gesammelten Informationen für schändliche Zwecke verwenden, z. B. für den Versuch von Exploits usw.

Ist es möglich, die Elementprüfung im Browser zu deaktivieren?

Die kurze Antwort ist nein.

Sie können das Inspect-Element in einem Browser nicht deaktivieren, aber Sie können Parameter festlegen, die Benutzer daran hindern, bestimmte Aktionen auszuführen, z. B. mit der rechten Maustaste auf eine Webseite zu klicken. Es gibt zahlreiche Online-Tutorials zum Festlegen der richtigen Skripte zum Deaktivieren bestimmter Ereignisse. Allerdings können Sie die Funktion „Element prüfen“ nicht vollständig deaktivieren.

Lernen Sie das Innere einer Webseite kennen

Das Ausprobieren der Funktion „Element prüfen“ einer Webseite ist wahrscheinlich ein Entwicklertool, von dem Sie nie wussten, dass Sie es benötigen – selbst wenn Sie selbst kein Entwickler sind. Es verfügt über unzählige Design- und Marketinganwendungen, die den Betrieb Ihrer Website verbessern können. Und vielleicht verschaffen Sie sich einen Vorteil gegenüber einem Konkurrenten.

Wofür verwenden Sie Inspect Element? Erzählen Sie uns davon im Kommentarbereich unten.