So prüfen Sie Elemente auf Mac, Windows, iPhone und iPad

Entwickler und UI-Designer verwenden die Funktion „Inspect Element“, um Websites online zu ändern, ohne den Quellcode zu ändern. Aber wie kann man Elemente untersuchen, ohne einen Webentwicklungskurs zu absolvieren?

Inspect Element ist ein praktisches Entwicklertool, das mit gängigen Webbrowsern sofort einsatzbereit ist. Sie müssen nur wissen, wie Sie das Tool beim Surfen auf Websites mit wenigen Klicks bereitstellen.

Sie können viele Zaubertricks anwenden, z. B. das Website-Layout ändern, textlose Screenshots erstellen, Schriftarten ändern, Zahlen ändern und vieles mehr.

Nachfolgend finden Sie eine kurze Schritt-für-Schritt-Anleitung, um zu lernen, wie Sie Elemente mühelos prüfen können.

Was ist Element prüfen?

Inspect Element ist ein Webentwicklungstool, das in den meisten Webbrowsern verfügbar ist. Sie können es verwenden, um den Front-End-Quellcode jeder Website zu bearbeiten, die Sie besuchen.

Die Änderungen, die Sie vornehmen, werden in einer Sandbox in Ihrem Webbrowser ausgeführt. Sie nehmen also keine Änderungen an der eigentlichen Website vor. Außerdem verschwinden die oberflächlichen Änderungen, die Sie vornehmen, wenn Sie die Seite aktualisieren.

Hier sind einige kreative Möglichkeiten, es zu verwenden:

• Sie müssen einen Screenshot von einer Website machen, und die Texte auf dem Bild beunruhigen Sie. Verwenden Sie das Werkzeug Element prüfen, um diese Texte zu löschen.
• Sie möchten Ihren Freunden einen Streich spielen, indem Sie ihnen Ihren Namen in der New York Times oder der Washington Post zeigen. Inspect Element ist der beste Weg, dies zu tun.
• Testen Sie Debugging-Codes auf Websites, indem Sie sie in Echtzeit mit dem Inspect Element-Tool anwenden. Wenn es funktioniert, können Sie den Backend-Quellcode ändern.
• Als digitaler Vermarkter können Sie mit diesem mächtigen Webentwicklungstool die Schlüsselwörter, SEO-Titel, Meta-Tags usw. der Wettbewerber aufdecken.

So prüfen Sie Elemente unter Windows

Die Verwendung des Inspect Element Tools unter Windows ist lächerlich einfach. Nachfolgend finden Sie eine schrittweise Anleitung zum Überprüfen von Elementen mit verschiedenen Webbrowsern unter Windows:

Google Chrome-Inspektionstool

So überprüfen Sie Elemente im Windows Chrome-Browser

• Wenn Sie Google Chrome verwenden , klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf einer Website.
• Das Rechtsklick-Kontextmenü wird eingeblendet.
• Unten sehen Sie Inspect .
• Klicken Sie auf Prüfen , um die HTML- und CSS-Codes in einem Bereich auf der rechten Seite anzuzeigen .

Wie öffne ich Inspect Element in Chrome, ohne mit der rechten Maustaste zu klicken?

Es gibt einige praktische Verknüpfungen zum Öffnen des Inspect Element Tools in Google Chrome für Windows. Diese Hotkeys sind wie folgt:

• Strg + Umschalt + C
• Die Funktionstaste F12

Die obigen Hotkeys funktionieren auch im Mozilla-Browser für Windows.

Mozilla Inspector-Tool

So prüfen Sie Elemente im Windows Mozilla Browser

Im Mozilla-Browser ist der Prozess derselbe wie bei Google Chrome. Das Inspector- Fenster wird jedoch unten im Browser angezeigt und nicht wie in Google Chrome auf der rechten Seite.

Microsoft Edge-Inspektionstool

So prüfen Sie Elemente im Windows Edge-Browser

Überraschenderweise funktioniert das Inspect Element von Microsoft Edge ähnlich wie der Google Chrome-Browser. Das Inspect-Tool ist nach einem Rechtsklick verfügbar. Außerdem werden die HTML- und CSS-Codes auf der rechten Seite angezeigt, ähnlich wie bei Google Chrome.

So prüfen Sie Elemente auf dem Mac

Verwenden Sie Google Chrome, Mozilla Firefox oder Microsoft Edge auf Apples Mac-Computern? Wenn ja, können Sie das Inspect Element-Tool bereitstellen, indem Sie die oben im Windows-Abschnitt genannten Schritte ausführen.

Wenn Sie jedoch den standardmäßigen macOS-Webbrowser Safari verwenden, ist die Verwendung des Werkzeugs „Inspect Element“ ein kniffliges Spiel. Standardmäßig zeigt Safari auf einem Mac nicht „Inspect Element“ an. Folgendes müssen Sie tun:

So öffnen Sie Inspect Element auf einem Mac

Zunächst müssen Sie die Entwicklertools in Safari auf einem Mac aktivieren. Hier ist wie:

• Führen Sie den Safari-Browser aus .
• Besuchen Sie eine Website, auf der Sie Webelemente untersuchen möchten.
• Wählen Sie Safari aus der oberen Menüleiste des Safari-Browsers.
• Klicken Sie im sich öffnenden Kontextmenü auf Einstellungen .
• Wählen Sie auf dem Bildschirm „Einstellungen“ die Option „Erweitert“ .
• Aktivieren Sie das Menü "Entwicklung anzeigen" am unteren Rand des Bildschirms "Erweiterte Einstellungen" .

Sie haben die Entwicklertools in Safari für Mac erfolgreich aktiviert. Befolgen Sie nun diese Schritte, um Inspect Element zu verwenden:

• Klicken Sie mit der rechten Maustaste auf ein beliebiges Element einer Website, z. B. einen Text oder ein Bild .
• Es erscheint ein Kontextmenü. Unten sehen Sie Inspect Element .
• Klicken Sie darauf, um einen Debug-Bereich unterhalb der Website mit HTML- und CSS- Codes zu öffnen.

What Are the Keys for Inspect Element?

Möglicherweise suchen Sie nach Verknüpfungen für Inspect Element auf dem Mac. Sie können Folgendes verwenden:

• Befehl + Umschalt + C
• Drücken Sie die Strg- Taste und wählen Sie dann ein beliebiges Element aus.
• Klicken Sie mit zwei Fingern auf das Trackpad

So prüfen Sie Elemente auf Chromebooks

Chromebook verwendet Google Chrome als Standardbrowser. Klicken Sie daher nach dem Öffnen einer beliebigen Website einfach mit der rechten Maustaste, um die Option Inspect Element im folgenden Kontextmenü zu finden.

Wenn Sie ein Chromebook von der Arbeit oder Schule verwenden, stellen Sie sich möglicherweise diese Frage:

Why Can’t I Inspect on My School Chromebook?

Die meisten Schul- und Unternehmensadministratoren deaktivieren erweiterte Funktionen auf dem Chromebook, das sie Ihnen für Arbeit oder Studium zur Verfügung stellen. Da es sich bei Entwicklertools um erweiterte Funktionen handelt, zeigt Ihr Schul- oder Arbeits-Chromebook möglicherweise kein Tool zum Prüfen von Elementen an.

So prüfen Sie Elemente auf dem iPad/iPhone

Leider können Sie das Werkzeug „Inspect Element“ auf einem iPhone oder iPad nicht ohne einen Mac verwenden.

iOS und iPadOS haben Web Inspector für die Safari-App. Das funktioniert allerdings nur, wenn Sie das Mobilgerät mit einem Mac verbinden, auf dem Sie bereits Entwicklertools für Safari aktiviert haben. Nachfolgend sind die Schritte aufgeführt, die Sie ausprobieren können:

• Öffnen Sie die App „iPad/iPhone- Einstellungen“ .
• Klicken Sie im linken Navigationsbereich auf Safari .

Öffnen der Safari-Einstellungen auf dem iPad oder iPhone

• Scrollen Sie dann auf der rechten Seite nach unten, um Erweitert zu finden und auszuwählen .

Aktivieren von Web Inspector auf iPad und iPhone

• Aktivieren Sie den Schalter für Web Inspector .
• Verbinden Sie nun das mobile Gerät über USB mit dem Mac .
• Autorisieren Sie das iPhone/iPad auf dem Mac.
• Öffnen Sie eine beliebige Website auf einem mobilen Gerät in Safari.
• Führen Sie nun Safari auf dem Mac aus und wählen Sie in der oberen Menüleiste Entwickeln aus.
• Suchen Sie im sich öffnenden Kontextmenü nach dem Namen Ihres Mobilgeräts.
• Bewegen Sie den Mauszeiger über das mobile Gerät, um alle geöffneten Websites anzuzeigen.
• Wählen Sie nun eine beliebige Website aus, um den HTML- und CSS-Quellcode im Safari-Browser von Mac anzuzeigen.

Abschluss

Sie haben alle Möglichkeiten erkundet, das Werkzeug „Element prüfen“ für die temporäre Bearbeitung von Webseiten zu verwenden. Sie haben auch gelernt, wie Sie Elemente für verschiedene Geräte wie Mac, Windows, Chromebook, iPad und iPhone überprüfen.

Wenn Sie das nächste Mal eine Webseite aus Spaß oder aus beruflichen Gründen ändern müssen, probieren Sie diese Methoden aus. Sie werden diese mühelosen Schritte gegenüber anderen komplizierten Methoden, die an anderer Stelle erklärt werden, definitiv lieben.

Vergessen Sie nicht, unten Kommentare zu hinterlassen, wenn die obigen Schritte Ihnen geholfen haben, eine Methode, die Sie als herausfordernd empfinden, oder geheime Tipps zum Werkzeug „Inspect Element“.

Benötigen Sie eine Webseite als gedruckte Referenz? Erfahren Sie jetzt , wie Sie eine Webseite schnell als PDF speichern !