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:
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
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:
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:
Sie haben die Entwicklertools in Safari für Mac erfolgreich aktiviert. Befolgen Sie nun diese Schritte, um Inspect Element zu verwenden:
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:
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 der Safari-Einstellungen auf dem iPad oder iPhone
Aktivieren von Web Inspector auf iPad und iPhone
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 !
Chrome zeigt Ihnen standardmäßig nicht die vollständige URL an. Dieses Detail interessiert Sie vielleicht nicht so sehr, aber wenn Sie aus irgendeinem Grund die Anzeige der vollständigen URL benötigen, finden Sie hier detaillierte Anweisungen, wie Sie Google Chrome dazu bringen, die vollständige URL in der Adressleiste anzuzeigen.
Reddit hat im Januar 2024 sein Design erneut geändert. Das neue Design ist für Benutzer von Desktop-Browsern sichtbar und schränkt den Haupt-Feed ein, während gleichzeitig Links bereitgestellt werden
Das Eingeben Ihres Lieblingszitats aus Ihrem Buch auf Facebook ist zeitaufwändig und voller Fehler. Erfahren Sie, wie Sie mit Google Lens Text aus Büchern auf Ihre Geräte kopieren.
Wenn Sie mit Chrome arbeiten, können Sie manchmal nicht auf bestimmte Websites zugreifen und erhalten die Fehlermeldung „Server-DNS-Adresse konnte in Chrome nicht gefunden werden“. Hier erfahren Sie, wie Sie das Problem beheben können.
Erinnerungen waren schon immer das größte Highlight von Google Home. Sie machen unser Leben sicherlich einfacher. Lassen Sie uns einen kurzen Überblick darüber geben, wie Sie Erinnerungen auf Google Home erstellen, damit Sie wichtige Besorgungen nie verpassen.
So ändern Sie Ihr Passwort für den Streaming-Videodienst Netflix mit Ihrem bevorzugten Browser oder Ihrer Android-App.
Erhalten Sie die Meldung „Etwas ist schiefgelaufen?“ Beim Zugriff auf Twitter in Google Chrome auf Ihrem Computer tritt die Fehlermeldung „Versuchen Sie es neu zu laden“ auf.
Beim Versuch, sich bei Ihrem Snapchat-Konto anzumelden, werden Sie mit einer Fehlermeldung und einem C14A-Code begrüßt. Möglicherweise sind die Server der Plattform ausgefallen, was überall zu Anmeldeproblemen führen kann.
Die Idee, Videospiele zu entwickeln, gefällt vielen. Der eigentliche Prozess ist jedoch entmutigend, insbesondere wenn man ein Programmieranfänger ist.
Vielleicht möchten Sie Ihre YouTube-Videos auf Instagram teilen, um Ihre Marke auszubauen und Engagement zu generieren. Aber wie teilen Sie YouTube-Videos in Ihrer Instagram-Story? Es gibt keine Möglichkeit, ein YouTube-Video direkt in Ihrer Instagram-Story zu teilen, aber es gibt eine Möglichkeit, dies zu umgehen.
