Das Element Inspector-Tool ist eines der nützlichsten Tools, die Ihr Browser zu bieten hat, egal ob Sie ein Webentwickler oder ein Benutzer sind, der eine Webseite schnell anpassen möchte. Mit diesem Tool können Sie Texte und Bilder bearbeiten, Fehler erkennen und sogar das Seitendesign direkt anpassen. In diesem Artikel geht es um eine Reihe toller Tricks, die Sie mit diesem Tool ausführen können, um Ihr Online-Erlebnis zu verbessern und einige Geheimnisse zu erfahren, die vielen vielleicht unbekannt sind.
Der Elementinspektor in Ihrem Browser scheint ein reines Entwicklertool zu sein, aber Sie können damit einige coole Dinge tun, auch wenn Sie keine Programmierkenntnisse haben.
1. Bilder herunterladen
Möglicherweise müssen Sie ein Bild von einer Website abrufen. Sie versuchen, mit der rechten Maustaste darauf zu klicken und auf „Bild speichern“ zu klicken, stellen dann aber fest, dass der Rechtsklick deaktiviert ist oder die Schaltfläche „Bild speichern“ nicht verfügbar ist. In anderen Fällen stellen Sie möglicherweise fest, dass Sie nur eine kleine Miniaturvorschau des Bildes herunterladen können, nicht jedoch die Datei in voller Größe. Was ist los?
Entweder haben die Entwickler die Schaltfläche „Bild speichern“ absichtlich deaktiviert, oder sie verwenden ein Webframework, das solche Bilder nicht unterstützt. Hierfür gibt es im Element Inspector eine elegante Lösung. Tatsächlich können Sie in drei einfachen Schritten jedes Bildelement von einer Website in voller Größe abrufen.
Rat
Manchmal sind diese Bilder aus Lizenz- und Urheberrechtsgründen gesperrt. Seien Sie also vorsichtig und achten Sie auf eine faire Verwendung, um rechtliche Probleme zu vermeiden.
Schritt 1
Klicken Sie mit der rechten Maustaste irgendwo auf der Seite und klicken Sie auf „Element prüfen“ oder „Prüfen“. Sie können auch die spezifische Tastenkombination des Inspektors finden und in Ihrem Browser verwenden. F12 funktioniert mit den meisten Browsern und Betriebssystemen. Ich verwende Firefox für diese Demo, aber die Schritte sind identisch.
Schritt 2
Klicken Sie im Fenster „Element prüfen“ auf die Registerkarte „Netzwerk“. Die Registerkarte „Netzwerk“ sollte „Fotos“ als eines der Untermenüs enthalten. Klicken Sie auf „Fotos“.
Laden Sie nun die Seite neu, sodass alle Bildelemente auf der Registerkarte „Bilder“ angezeigt werden. Verwenden Sie die Schaltfläche „Aktualisieren“ neben der Adressleiste Ihres Browsers oder drücken Sie Strg+R.
Weiter zu Schritt 3
Und das ist alles. Die gesamte Fotobibliothek muss in die Liste geladen werden. Die Liste wird dynamisch aktualisiert. Wenn Mehr mehr Bilder auf die Webseite lädt, werden diese auch hier angezeigt.
Sie können den Mauszeiger über eine Datei bewegen, um deren Vorschau und Abmessungen anzuzeigen. Doppelklicken Sie darauf, um die Datei in einem neuen Tab zu öffnen, wo Sie sie über das Rechtsklick-Menü speichern können.
2. Videos herunterladen
Genau wie bei Bild-Assets ist es auf Websites manchmal nicht möglich, Videos direkt herunterzuladen. Sie können sie jedoch herunterladen, indem Sie sie in den Artikelinspektor laden. Sobald die Datei in den Inspektor geladen ist, können Sie einfach auf den Dateinamen doppelklicken, um sie in einem neuen Tab zu öffnen.
Schritt 1
Öffnen Sie das Fenster „Element prüfen“, indem Sie die Tastenkombination F12 drücken (dies sollte auf den meisten Systemen funktionieren). Alternativ können Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite klicken und „Inspizieren“ auswählen. Das Fenster „Artikelinspektor“ sollte erscheinen.
Schritt 2
Klicken Sie auf die Registerkarte „Netzwerk“ und dann auf „Medien“, um alles außer Videodateien zu filtern. Laden Sie die Seite neu. Klicken Sie entweder auf die Schaltfläche „Browser aktualisieren“ oder drücken Sie Strg+R.
Zu Schritt 3.
Videodateien müssen in einer Liste geladen werden. Sie können die Datei nicht sofort in der Vorschau anzeigen, aber Sie können auf eine Datei doppelklicken, um sie in einem neuen Tab zu öffnen. Hier können Sie einfach mit der rechten Maustaste klicken und es herunterladen.
3. Machen Sie Screenshots der gesamten Seite
Wenn Sie eine komplette Webseite speichern möchten, können Sie diese schnell als PDF- oder HTML-Datei herunterladen. Was aber, wenn Sie einen regulären Screenshot der gesamten Seite machen möchten? Hier erfahren Sie, wie.
Firefox verfügt über ein spezielles Tool zum Erstellen von Screenshots in seinem regulären Kontextmenü. Ich zeige Ihnen daher, wie Sie dies in Google Chrome und anderen Browsern tun.
Öffnen Sie das Inspektionstool, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken oder F12 drücken.
Drücken Sie Strg+Umschalt+P, um das Fenster „Ausführen“ zu öffnen. Geben Sie in diesem Fenster „Screenshot in Originalgröße erstellen“ ein. Klicken Sie darauf.
Sie sehen sofort ein Fenster „Speichern unter“, in dem Sie den ganzseitigen Screenshot im JPG-Format speichern können.
4. Stellen Sie sich vor, Sie würden ein Telefon benutzen
Die meisten Websites werden je nach Gerätetyp und Bildschirmgröße unterschiedlich geladen. Wenn Sie einer Website vorgaukeln möchten, dass Sie ein anderes Gerät verwenden (aus welchem Grund auch immer), können Sie dies ganz einfach mit einem Scan-Tool tun.
Öffnen Sie in Chrome das Elementinspektionsfenster über das Kontextmenü, das angezeigt wird, wenn Sie mit der rechten Maustaste klicken oder F12 verwenden. Klicken Sie dann auf das kleine Laptop- und Telefonsymbol in der oberen linken Ecke. Firefox verfügt über eine ähnliche Schaltfläche namens Responsive Design Mode (Strg+Umschalt+M).
Sie erhalten eine Liste der Geräte, die Sie emulieren können, und können die Bildschirmgröße auch manuell anpassen.
Sobald Sie sich für ein mobiles Gerät entschieden haben, werden Sie feststellen, dass Ihr Browser auch Touch-Gesten nachahmt.
5. Linien definieren
Dieser Trick ist für Kreative gedacht, aber jeder, der sich für Schriftarten auf einer Website interessiert, kann diesen Trick anwenden. Mit dem Scan-Tool können Sie Schriftarten auswählen und manchmal herunterladen.
Öffnen Sie zunächst das Artikelinspektor-Tool. Klicken Sie anschließend auf die Registerkarte „Netzwerk“ (diese ist möglicherweise im Überlaufmenü ausgeblendet) und wählen Sie „Leitung“.
Drücken Sie dann Strg+R. Die in der Liste angezeigten Schriftarten werden geladen, höchstwahrscheinlich im WOFF-Format. Sie können sie direkt herunterladen, indem Sie auf den Namen der Schriftart doppelklicken. How-To Geek verwendet beispielsweise Roboto als Standardschriftart.
Wenn Sie detailliertere Informationen zur Schriftart benötigen, gehen Sie zur Registerkarte „Elemente“ und wählen Sie „Stile“. Scrollen Sie nach unten zur Eigenschaft „Schriftfamilie“ und klicken Sie darauf. Der entsprechende Text leuchtet auf der Webseite auf. Auf diese Weise können Sie die Schriftart genau definieren.
6. Text auf der 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 wir den Code bearbeiten, aus dem die Website besteht. Wenn Sie also den Code kennen, können Sie die Website wie alles aussehen lassen (nur auf Ihrem Gerät, bis Sie die Seite aktualisieren).
Selbst wenn Sie keine Programmierkenntnisse haben, können Sie einfachen Text auf jeder Webseite bearbeiten. Dies kann ein lustiger kleiner Streich sein, den Sie mit 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. Klicken Sie dann auf „Inspizieren“ oder „Element prüfen“.
Der entsprechende Textteil sollte auf der Registerkarte „Elemente“ angezeigt werden. Doppelklicken Sie einfach darauf und ersetzen Sie den Text durch einen beliebigen Text.
Schließen Sie den Artikelinspektor und Sie sind fertig! Denken Sie daran, dass durch das Aktualisieren der Seite die von Ihnen vorgenommenen Änderungen rückgängig gemacht werden.
7. Elemente löschen
Genau wie beim Bearbeiten von Text können Sie auch bestimmte Elemente von einer Webseite entfernen. Auch hier gelten die Änderungen nur so lange, bis Sie die Seite aktualisieren.
Klicken Sie mit der rechten Maustaste auf das Element, das Sie entfernen möchten, und klicken Sie dann auf „Inspizieren“ oder „Element prüfen“.
Bewegen Sie den Mauszeiger über die „Markierung“ ”, bis das gesamte Element hervorgehoben ist. Drücken Sie dann die Entf-Taste.
Also ist es verschwunden.
8. Farbwerte ermitteln
Ein weiterer Tipp für Ersteller: Sie können die RGB- und HEX-Werte jeder Farbe auf einer Webseite mit dem Pipettenwerkzeug ziehen, 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 durch Farbe markierten Eigenschaften zu finden.
Neben der Farbeigenschaft muss ein farbiger Kreis oder ein farbiges Quadrat vorhanden sein. Klicken Sie darauf, um den Farbwähler zu öffnen, und tippen Sie auf das Pipettensymbol daneben.
Sie können dieses Pipettenwerkzeug an eine beliebige Stelle auf der Seite bewegen, um nach Farbwerten zu suchen. Wenn Sie auf die Pipette klicken, wird die Eigenschaft automatisch mit dem gerade ausgewählten Farbwert gefüllt. Von hier aus können Sie es einfach kopieren.
Diese Tipps stellen nur einen Bruchteil dessen dar, was mit Element Inspector möglich ist. Wenn Sie tiefer in die Webentwicklung eintauchen möchten, finden Sie hier einen Leitfaden, der Ihnen den Einstieg erleichtert.
Mit Element Inspector haben Sie die Möglichkeit, Webseiten flexibel und schnell anzupassen. Egal, ob Sie kleine Textanpassungen vornehmen, verstehen möchten, wie ein bestimmtes Design funktioniert, oder sogar lernen möchten, wie man Seiten programmgesteuert optimiert, dieses Tool ist eines der besten Tools, die Ihnen zur Verfügung stehen. Erkunden Sie gerne die Tricks, die wir in diesem Artikel behandelt haben, um die Möglichkeiten von Mehr zu entdecken und alle seine Funktionen zu nutzen.
