Tricks für den Element-Inspektor: 8 Hacks, die Sie kennen müssen! 🛠️

Der Element Inspector in Ihrem Browser scheint möglicherweise ein reines Entwicklertool zu sein, aber Sie können damit tatsächlich einige ziemlich coole Dinge anstellen, selbst wenn Sie keine Ahnung vom Programmieren haben! 🚀

1 . Bilder herunterladen

Möglicherweise müssen Sie ein Bild von einer Website herunterladen. Sie versuchen, mit der rechten Maustaste zu klicken und „Bild speichern“ auszuwählen, stellen jedoch fest, dass diese Option ausgegraut ist oder die Schaltfläche „Bild speichern“ nicht angezeigt wird. In anderen Fällen können Sie möglicherweise nur eine Miniaturansicht des Bildes und nicht die gesamte Datei herunterladen. 🤔 Was geht?

Entwickler deaktivieren diese Schaltfläche „Bild speichern“ häufig absichtlich oder verwenden ein Web-Framework, das das Herunterladen von Bildern auf diese Weise nicht zulässt. Aber es gibt eine praktische Lösung im Elements-Inspektor. Sie können in drei einfachen Schritten jede Bildressource von einer Website in voller Größe abrufen. 📸

Schritt 1

Tut Rechtsklick auf Klicken Sie irgendwo auf der Seite und wählen Sie „Element untersuchen“ oder „Untersuchen“. Sie können auch die spezielle Tastenkombination für den Inspektor in Ihrem Browser verwenden. F12 funktioniert in den meisten Browsern und Betriebssysteme. Ich verwende Firefox für diese Demo, aber die Schritte sind identisch. 🖱️

Schritt 2

Klicken Sie im Fenster „Element Inspector“ auf die Registerkarte „Netzwerk“. Die Registerkarte „Netzwerk“ sollte als eines ihrer Untermenüs „Bilder“ haben. Klicken Sie auf „Bilder“. 🖼️

Laden Sie nun die Seite neu, sodass alle Bildressourcen im Reiter „Bilder“ angezeigt werden. Verwenden Sie die Aktualisieren-Button neben der Adressleiste von Ihrem Browser aus oder drücken Sie Strg+R. 🔄

Schritt 3

Und da haben Sie es. Die gesamte Bildbibliothek sollte in die Liste geladen werden. Die Liste wird dynamisch aktualisiert, d. h. wenn neue Bilder auf die Website hochgeladen werden, werden sie auch hier angezeigt. 🖼️✨

Sie können den Mauszeiger über eine Datei bewegen, um ihre Vorschau und Abmessungen anzuzeigen. Per Doppelklick wird die Datei in einem neuen Tab geöffnet und kann dort über das Rechtsklickmenü gespeichert werden. 💾

2 . Videos herunterladen

Genau wie Bild-Assets erlauben Websites manchmal nicht Entladung Videos direkt. Sie können sie jedoch herunterladen, indem Sie sie im Elementinspektor laden. Sobald sie in den Inspektor geladen sind, doppelklicken Sie einfach auf den Dateinamen, um ihn in einem neuen Tab zu öffnen. 🎥

Schritt 1

Öffnen Sie das Fenster „Elementinspektor“, indem Sie die Tastenkombination F12 drücken (sollte auf den meisten Systemen funktionieren). Alternativ können Sie mit der rechten Maustaste irgendwo auf die Webseite klicken und „Untersuchen“ auswählen. Das Fenster „Elementinspektor“ sollte angezeigt werden. 🖱️

Schritt 2

Klicken Sie auf die Registerkarte „Netzwerk“ und dann auf „Medien“, um alles außer Videodateien zu filtern. Laden Sie die Seite neu. Entweder durch Klicken auf die Schaltfläche „Aktualisieren“ des Browsers oder durch Drücken von Strg+R. 🔄

Schritt 3

Die Videodateien sollten in einer Liste geladen werden. Sie können keine sofortige Vorschau durchführen, aber Sie können auf eine Datei doppelklicken, um sie in einem neuen Tab zu öffnen. Dort können Sie mit der rechten Maustaste klicken und es herunterladen. 🎬

3 . Machen Sie Screenshots der ganzen Seite

Wenn Sie eine ganze Webseite speichern möchten, können Sie diese schnell als PDF- oder HTML-Datei herunterladen. Aber was, wenn Sie einen normalen Screenshot der gesamten Seite machen möchten? Hier Ich erkläre Ihnen, wie es geht. 📸

Firefox verfügt über ein spezielles Screenshot-Tool im Kontextmenü. Ich werde Ihnen zeigen, wie Sie es in Google Chrome und andere Browser. 🌐

Öffnen Sie das Prüftool, indem Sie irgendwo auf der Seite mit der rechten Maustaste klicken oder F12 drücken.

Drücken Sie Strg+Umschalt+P, um das Fenster „Ausführen“ zu öffnen. Ich schrieb Erfassung Erfassung von Vollbild in diesem Fenster. Klicken Sie darauf. 📄

Sofort sollte ein Fenster „Speichern unter“ erscheinen, in dem Sie den Screenshot der gesamten Seite im JPG-Format speichern können. 💾

4 . Stellen Sie sich vor, Sie telefonieren

Die meisten Websites werden je nach Gerätetyp und Bildschirmgröße unterschiedlich geladen. Wenn Sie der Site vorgaukeln möchten, dass Sie ein anderes Gerät verwenden (aus welchem Grund auch immer), können Sie dies ganz einfach mit dem Inspector-Tool tun. 📱

Öffnen Sie in Chrome das Fenster „Element Inspector“ über das Rechtsklickmenü oder mit F12. Klicken Sie dann oben links auf das kleine Laptop- und Telefonsymbol. Firefox hat eine ähnliche Schaltfläche namens „Responsive Design Mode“ (Strg+Umschalt+M). 🖥️

Sie erhalten eine Liste der Geräte, die Sie emulieren können, und Sie können auch manuell die Größe der Bildschirm. Sobald Sie ein mobiles Gerät ausgewählt haben, werden Sie feststellen, dass Ihr Browser auch Touch-Gesten simuliert. 📱✨

5 . Quellen identifizieren

Dieser Tipp richtet sich an Kreative, aber jeder, der sich für Schriftarten auf einer Website interessiert, kann diesen Trick anwenden. Sie können die Inspektor-Tool zur Identifizierung und manchmal sogar Schriftarten herunterladen. 🖋️

Öffnen Sie zunächst das Tool „Elementinspektor“. Klicken Sie anschließend auf die Registerkarte „Netzwerk“ (sie ist möglicherweise im Überlaufmenü ausgeblendet) und wählen Sie „Quelle“ aus.

Drücken Sie dann Strg+R. Gerenderte Schriftarten werden in die Liste geladen, wahrscheinlich im WOFF-Format. Durch einen Doppelklick auf den Schriftnamen können Sie diese direkt herunterladen. Beispielsweise verwendet How-To Geek Roboto als Standardschriftart. 🔤

Wenn Sie genauere Informationen zur Schriftart benötigen, wechseln Sie zur Registerkarte „Elemente“ und wählen Sie „Stile“ aus. Scrollen Sie nach unten zur Schriftfamilieneigenschaft und klicken Sie darauf. Der entsprechende Text wird auf der Website beleuchtet. Auf diese Weise können Sie eine Quelle genau identifizieren. 🎨

6 . Text auf einer Seite bearbeiten (vorübergehend)

Wussten Sie, dass Sie mit dem Inspektor fast alles auf einer Webseite vorübergehend bearbeiten können? Mit diesem Tool können Sie den Code bearbeiten, aus dem die Website besteht. Wenn Sie also etwas Code kennen, können Sie das Aussehen der Seite beliebig gestalten (nur auf Ihrem Computer, bis Sie die Seite neu laden). 🛠️

Auch wenn Sie keine Programmierkenntnisse haben, können Sie einfachen Text auf jeder Webseite bearbeiten. Es kann ein lustiger kleiner Streich sein, den Sie Ihren Freunden spielen können. 😉

Markieren Sie den Text auf der Seite, den Sie bearbeiten möchten, und klicken Sie mit der rechten Maustaste darauf. Wählen Sie dann „Untersuchen“ oder „Element untersuchen“ aus.

Der entsprechende Textausschnitt sollte auf der Registerkarte „Elemente“ erscheinen. Doppelklicken Sie einfach und ersetzen Sie den Text durch alles, was Sie möchten. ✏️

Schließen Sie den Elementinspektor und Sie sind fertig! Bitte beachten Sie, dass Ihre Änderungen rückgängig gemacht werden, wenn Sie die Seite neu laden. 🔄

7 . Elemente löschen

Genau wie beim Bearbeiten von Text können Sie auch bestimmte Elemente aus einer Webseite löschen. Auch hier gelten die Änderungen nur bis zum Neuladen der Seite. ❌

Klicken Sie mit der rechten Maustaste auf das Element, das Sie löschen möchten, und wählen Sie dann „Untersuchen“ oder „Element untersuchen“ aus.

Bewegen Sie den Mauszeiger über die Beschriftungen „

“, bis das gesamte Element hervorgehoben ist. Drücken Sie dann einfach die Entf-Taste. 🔚

Und einfach so ist es weg! 🕵️‍♂️

8 . Farbwerte ermitteln

Noch ein Tipp für Kreative: Sie können RGB- und HEX-Werte von jedem Farbe auf einer Webseite mit dem Pipettenwerkzeug, das Sie im Elementinspektor finden. 🎨

Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und öffnen Sie den Inspektor. Standardmäßig wird das Fenster „Regeln“ auf der Registerkarte „Inspektor“ geöffnet. Scrollen Sie nach unten, um alle Eigenschaften mit der Bezeichnung „Farbe“ zu finden.

Neben der Farbeigenschaft sollte ein farbiger Kreis oder ein farbiges Quadrat stehen. Klicken Sie darauf, um die Farbauswahl zu öffnen, und drücken Sie auf das Pipettensymbol daneben. 🖌️

Sie können diese Pipette an eine beliebige Stelle auf der Seite ziehen, um Farbwerte zu finden. Wenn Sie auf die Pipette klicken, wird die Eigenschaft automatisch mit dem gerade ausgewählten Farbwert gefüllt. Sie können es einfach von hier kopieren. 📋

---

Diese Tipps kratzen kaum an der Oberfläche als mit dem Elements Inspector tatsächlich möglich ist. Wenn Sie tiefer in die Webentwicklung eintauchen möchten, finden Sie hier eine Anleitung für den Einstieg. 💻