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 damit den Front-End-Quellcode jeder Website 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
- Beim Benutzen Google Chrome, Rechtsklick irgendwo auf einer Website.
- Das Rechtsklick-Kontextmenü wird eingeblendet.
- Unten sehen Sie Prüfen.
- Klicken Prüfen zum Anzeigen der HTML- und CSS-Codes auf a rechte Seitenwand.
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 + Schicht + C
- Die Funktionstaste F12
Die obigen Hotkeys funktionieren auch im Mozilla-Browser für Windows.
Mozilla Inspector-Tool
Im Mozilla-Browser ist der Prozess derselbe wie bei Google Chrome. Allerdings ist die Inspektor Das Fenster wird unten im Browser angezeigt und nicht wie in Google Chrome auf der rechten Seite.
Microsoft Edge-Inspektionstool
Ü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 kein 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:
- Laufen Die Safari-Browser.
- Besuchen Sie eine Website, auf der Sie Webelemente untersuchen möchten.
- Wählen Safari aus der oberen Menüleiste des Safari-Browsers.
- Klicken Einstellungen aus dem sich öffnenden Kontextmenü.
- Auf der Einstellungsbildschirm, wählen Fortschrittlich.
- Markieren Sie die Entwickeln anzeigen Menü am unteren Rand des Erweiterte Einstellungen Bildschirm.
Sie haben die Entwicklertools in Safari für Mac erfolgreich aktiviert. Befolgen Sie nun diese Schritte, um Inspect Element zu verwenden:
- Auf jedem Element einer Website, wie Text oder Bild, Rechtsklick.
- Es erscheint ein Kontextmenü. Unten sehen Sie Element prüfen.
- Klicken Sie darauf, um einen Debug-Bereich unterhalb der Website zu öffnen, der HTML und anzeigt CSS Codes.
Was sind die Schlüssel für Inspect Element?
Möglicherweise suchen Sie nach Verknüpfungen für Inspect Element auf dem Mac. Sie können Folgendes verwenden:
- Befehl + Schicht + C
- Drücken Sie die Kontrolle drücken und dann ein beliebiges Element auswählen.
- 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:
Warum kann ich auf meinem Schul-Chromebook keine Inspektion durchführen?
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 Überprü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 das iPad/iPhone Einstellungen App.
- Klicken Safari im linken Navigationsbereich.
- Scrollen Sie dann auf der rechten Seite nach unten, um zu suchen und auszuwählen Fortschrittlich.
- Aktivieren Sie den Schalter für Webinspektor.
- Verbinden Sie nun das mobile Gerät mit dem Mac mit USB.
- 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 aus Entwickeln in der oberen Menüleiste.
- 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 oben genannten Schritte Ihnen geholfen haben, eine Methode, die Sie als schwierig empfinden, oder geheime Tipps zum Werkzeug „Inspect Element“.
Benötigen Sie eine Webseite als gedruckte Referenz? Lernen wie man schnell eine Webseite als PDF speichern Jetzt!