{"id":33467,"date":"2025-03-07T20:23:26","date_gmt":"2025-03-07T23:23:26","guid":{"rendered":"https:\/\/mastertrend.info\/?p=33467"},"modified":"2025-12-16T00:20:05","modified_gmt":"2025-12-16T03:20:05","slug":"tricks-mit-dem-element-inspektor","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/de\/trucos-con-el-inspector-de-elementos\/","title":{"rendered":"Tricks mit dem Elementinspektor: Verwandeln Sie Ihre Website jetzt! \u26a1\ufe0f"},"content":{"rendered":"

Tricks f\u00fcr den Element-Inspektor: 8 Hacks, die Sie kennen m\u00fcssen! \ud83d\udee0\ufe0f<\/h2>\n

Der Element Inspector in Ihrem Browser scheint m\u00f6glicherweise ein reines Entwicklertool zu sein, aber Sie k\u00f6nnen damit tats\u00e4chlich einige ziemlich coole Dinge anstellen, selbst wenn Sie keine Ahnung vom Programmieren haben! \ud83d\ude80<\/p>\n

<\/p>\n

1 . <\/span>Bilder herunterladen<\/h2>\n

M\u00f6glicherweise m\u00fcssen Sie ein Bild von einer Website herunterladen. Sie versuchen, mit der rechten Maustaste zu klicken und \u201eBild speichern\u201c auszuw\u00e4hlen, stellen jedoch fest, dass diese Option ausgegraut ist oder die Schaltfl\u00e4che \u201eBild speichern\u201c nicht angezeigt wird. In anderen F\u00e4llen k\u00f6nnen Sie m\u00f6glicherweise nur eine Miniaturansicht des Bildes und nicht die gesamte Datei herunterladen. \ud83e\udd14 Was geht?<\/p>\n

Entwickler deaktivieren diese Schaltfl\u00e4che \u201eBild speichern\u201c h\u00e4ufig absichtlich oder verwenden ein Web-Framework, das das Herunterladen von Bildern auf diese Weise nicht zul\u00e4sst. Aber es gibt eine praktische L\u00f6sung im Elements-Inspektor. Sie k\u00f6nnen in drei einfachen Schritten jede Bildressource von einer Website in voller Gr\u00f6\u00dfe abrufen. \ud83d\udcf8<\/p>\n

Manchmal sind diese Bilder aus lizenzrechtlichen Gr\u00fcnden gesperrt<\/a> und Urheberrecht. Seien Sie also vorsichtig und halten Sie sich an die Fair-Use-Regeln, um rechtliche Probleme zu vermeiden. \u2696\ufe0f<\/section>\n

Schritt 1<\/h3>\n

Tut Rechtsklick auf<\/a> Klicken Sie irgendwo auf der Seite und w\u00e4hlen Sie \u201eElement untersuchen\u201c oder \u201eUntersuchen\u201c. Sie k\u00f6nnen auch die spezielle Tastenkombination f\u00fcr den Inspektor in Ihrem Browser verwenden. F12 funktioniert in den meisten Browsern<\/a> und Betriebssysteme. Ich verwende Firefox f\u00fcr diese Demo, aber die Schritte sind identisch. \ud83d\uddb1\ufe0f<\/p>\n

Schritt 2<\/h3>\n

Klicken Sie im Fenster \u201eElement Inspector\u201c auf die Registerkarte \u201eNetzwerk\u201c. Die Registerkarte \u201eNetzwerk\u201c sollte als eines ihrer Untermen\u00fcs \u201eBilder\u201c haben. Klicken Sie auf \u201eBilder\u201c. \ud83d\uddbc\ufe0f<\/p>\n

Laden Sie nun die Seite neu, sodass alle Bildressourcen im Reiter \u201eBilder\u201c angezeigt werden. Verwenden Sie die Aktualisieren-Button neben der Adressleiste<\/a> von Ihrem Browser aus oder dr\u00fccken Sie Strg+R. \ud83d\udd04<\/p>\n

\"Speichern<\/figure>\n

Schritt 3<\/h3>\n

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. \ud83d\uddbc\ufe0f\u2728<\/p>\n

Sie k\u00f6nnen den Mauszeiger \u00fcber eine Datei bewegen, um ihre Vorschau und Abmessungen anzuzeigen. Per Doppelklick wird die Datei in einem neuen Tab ge\u00f6ffnet und kann dort \u00fcber das Rechtsklickmen\u00fc gespeichert werden. \ud83d\udcbe<\/p>\n

\"Speichern<\/figure>\n

2 . <\/span>Videos herunterladen<\/h2>\n

Genau wie Bild-Assets erlauben Websites manchmal nicht Entladung<\/a> Videos direkt. Sie k\u00f6nnen 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 \u00f6ffnen. \ud83c\udfa5<\/p>\n

Schritt 1<\/h3>\n

\u00d6ffnen Sie das Fenster \u201eElementinspektor\u201c, indem Sie die Tastenkombination F12 dr\u00fccken (sollte auf den meisten Systemen funktionieren). Alternativ k\u00f6nnen Sie mit der rechten Maustaste irgendwo auf die Webseite klicken und \u201eUntersuchen\u201c ausw\u00e4hlen. Das Fenster \u201eElementinspektor\u201c sollte angezeigt werden. \ud83d\uddb1\ufe0f<\/p>\n

Schritt 2<\/h3>\n

Klicken Sie auf die Registerkarte \u201eNetzwerk\u201c und dann auf \u201eMedien\u201c, um alles au\u00dfer Videodateien zu filtern. Laden Sie die Seite neu. Entweder durch Klicken auf die Schaltfl\u00e4che \u201eAktualisieren\u201c des Browsers oder durch Dr\u00fccken von Strg+R. \ud83d\udd04<\/p>\n

\"Laden<\/figure>\n

Schritt 3<\/h3>\n

Die Videodateien sollten in einer Liste geladen werden. Sie k\u00f6nnen keine sofortige Vorschau durchf\u00fchren, aber Sie k\u00f6nnen auf eine Datei doppelklicken, um sie in einem neuen Tab zu \u00f6ffnen. Dort k\u00f6nnen Sie mit der rechten Maustaste klicken und es herunterladen. \ud83c\udfac<\/p>\n

\"Speichern<\/figure>\n

3 . <\/span>Machen Sie Screenshots der ganzen Seite<\/h2>\n

Wenn Sie eine ganze Webseite speichern m\u00f6chten, k\u00f6nnen Sie diese schnell als PDF- oder HTML-Datei herunterladen. Aber was, wenn Sie einen normalen Screenshot der gesamten Seite machen m\u00f6chten? Hier Ich erkl\u00e4re Ihnen, wie es geht<\/a>. \ud83d\udcf8<\/p>\n

Firefox verf\u00fcgt \u00fcber ein spezielles Screenshot-Tool im Kontextmen\u00fc. Ich werde Ihnen zeigen, wie Sie es in Google Chrome<\/a> und andere Browser. \ud83c\udf10<\/p>\n

\u00d6ffnen Sie das Pr\u00fcftool, indem Sie irgendwo auf der Seite mit der rechten Maustaste klicken oder F12 dr\u00fccken.<\/p>\n

\"Erstellen<\/figure>\n

Dr\u00fccken Sie Strg+Umschalt+P, um das Fenster \u201eAusf\u00fchren\u201c zu \u00f6ffnen. Ich schrieb Erfassung Erfassung von Vollbild<\/a> <\/strong>in diesem Fenster. Klicken Sie darauf. \ud83d\udcc4<\/p>\n

Sofort sollte ein Fenster \u201eSpeichern unter\u201c erscheinen, in dem Sie den Screenshot der gesamten Seite im JPG-Format speichern k\u00f6nnen. \ud83d\udcbe<\/p>\n

\"Speichern<\/figure>\n

4 . <\/span>Stellen Sie sich vor, Sie telefonieren<\/h2>\n

Die meisten Websites werden je nach Ger\u00e4tetyp und Bildschirmgr\u00f6\u00dfe unterschiedlich geladen. Wenn Sie der Site vorgaukeln m\u00f6chten, dass Sie ein anderes Ger\u00e4t verwenden (aus welchem Grund auch immer), k\u00f6nnen Sie dies ganz einfach mit dem Inspector-Tool tun. \ud83d\udcf1<\/p>\n

\u00d6ffnen Sie in Chrome das Fenster \u201eElement Inspector\u201c \u00fcber das Rechtsklickmen\u00fc oder mit F12. Klicken Sie dann oben links auf das kleine Laptop- und Telefonsymbol. Firefox hat eine \u00e4hnliche Schaltfl\u00e4che namens \u201eResponsive Design Mode\u201c (Strg+Umschalt+M). \ud83d\udda5\ufe0f<\/p>\n

\"\u00c4ndern<\/figure>\n

Sie erhalten eine Liste der Ger\u00e4te, die Sie emulieren k\u00f6nnen, und Sie k\u00f6nnen auch manuell die Gr\u00f6\u00dfe der Bildschirm<\/a>. Sobald Sie ein mobiles Ger\u00e4t ausgew\u00e4hlt haben, werden Sie feststellen, dass Ihr Browser auch Touch-Gesten simuliert. \ud83d\udcf1\u2728<\/p>\n

5 . <\/span>Quellen identifizieren<\/h2>\n

Dieser Tipp richtet sich an Kreative, aber jeder, der sich f\u00fcr Schriftarten auf einer Website interessiert, kann diesen Trick anwenden. Sie k\u00f6nnen die Inspektor-Tool zur Identifizierung<\/a> und manchmal sogar Schriftarten herunterladen. \ud83d\udd8b\ufe0f<\/p>\n

\u00d6ffnen Sie zun\u00e4chst das Tool \u201eElementinspektor\u201c. Klicken Sie anschlie\u00dfend auf die Registerkarte \u201eNetzwerk\u201c (sie ist m\u00f6glicherweise im \u00dcberlaufmen\u00fc ausgeblendet) und w\u00e4hlen Sie \u201eQuelle\u201c aus.<\/p>\n

\"Identifizieren<\/figure>\n

Dr\u00fccken Sie dann Strg+R. Gerenderte Schriftarten werden in die Liste geladen, wahrscheinlich im WOFF-Format. Durch einen Doppelklick auf den Schriftnamen k\u00f6nnen Sie diese direkt herunterladen. Beispielsweise verwendet How-To Geek Roboto als Standardschriftart. \ud83d\udd24<\/p>\n

Wenn Sie genauere Informationen zur Schriftart ben\u00f6tigen, wechseln Sie zur Registerkarte \u201eElemente\u201c und w\u00e4hlen Sie \u201eStile\u201c aus. Scrollen Sie nach unten zur Schriftfamilieneigenschaft und klicken Sie darauf. Der entsprechende Text wird auf der Website beleuchtet. Auf diese Weise k\u00f6nnen Sie eine Quelle genau identifizieren. \ud83c\udfa8<\/p>\n

\"Detaillierte<\/figure>\n

6 . <\/span>Text auf einer Seite bearbeiten (vor\u00fcbergehend)<\/h2>\n

Wussten Sie, dass Sie mit dem Inspektor fast alles auf einer Webseite vor\u00fcbergehend bearbeiten k\u00f6nnen? Mit diesem Tool k\u00f6nnen Sie den Code bearbeiten, aus dem die Website besteht. Wenn Sie also etwas Code kennen, k\u00f6nnen Sie das Aussehen der Seite beliebig gestalten (nur auf Ihrem Computer, bis Sie die Seite neu laden). \ud83d\udee0\ufe0f<\/p>\n

Auch wenn Sie keine Programmierkenntnisse haben, k\u00f6nnen Sie einfachen Text auf jeder Webseite bearbeiten. Es kann ein lustiger kleiner Streich sein, den Sie Ihren Freunden spielen k\u00f6nnen. \ud83d\ude09<\/p>\n

Markieren Sie den Text auf der Seite, den Sie bearbeiten m\u00f6chten, und klicken Sie mit der rechten Maustaste darauf. W\u00e4hlen Sie dann \u201eUntersuchen\u201c oder \u201eElement untersuchen\u201c aus.<\/p>\n

Der entsprechende Textausschnitt sollte auf der Registerkarte \u201eElemente\u201c erscheinen. Doppelklicken Sie einfach und ersetzen Sie den Text durch alles, was Sie m\u00f6chten. \u270f\ufe0f<\/p>\n

Schlie\u00dfen Sie den Elementinspektor und Sie sind fertig! Bitte beachten Sie, dass Ihre \u00c4nderungen r\u00fcckg\u00e4ngig gemacht werden, wenn Sie die Seite neu laden. \ud83d\udd04<\/p>\n

7 . <\/span>Elemente l\u00f6schen<\/h2>\n

Genau wie beim Bearbeiten von Text k\u00f6nnen Sie auch bestimmte Elemente aus einer Webseite l\u00f6schen. Auch hier gelten die \u00c4nderungen nur bis zum Neuladen der Seite. \u274c<\/p>\n

Klicken Sie mit der rechten Maustaste auf das Element, das Sie l\u00f6schen m\u00f6chten, und w\u00e4hlen Sie dann \u201eUntersuchen\u201c oder \u201eElement untersuchen\u201c aus.<\/p>\n

Bewegen Sie den Mauszeiger \u00fcber die Beschriftungen \u201e<\/p>\n

\n

\u201d hasta que se resalte la totalidad del elemento. Luego simplemente presion\u00e1 la tecla Suprimir<\/a>. \ud83d\udd1a<\/p>\n

\"Entfernen<\/figure>\n

Und einfach so ist es weg! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/p>\n

8 . <\/span>Farbwerte ermitteln<\/h2>\n

Noch ein Tipp f\u00fcr Kreative: Sie k\u00f6nnen RGB- und HEX-Werte von jedem Farbe auf einer Webseite<\/a> mit dem Pipettenwerkzeug, das Sie im Elementinspektor finden. \ud83c\udfa8<\/p>\n

Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und \u00f6ffnen Sie den Inspektor. Standardm\u00e4\u00dfig wird das Fenster \u201eRegeln\u201c auf der Registerkarte \u201eInspektor\u201c ge\u00f6ffnet. Scrollen Sie nach unten, um alle Eigenschaften mit der Bezeichnung \u201eFarbe\u201c zu finden.<\/p>\n

Neben der Farbeigenschaft sollte ein farbiger Kreis oder ein farbiges Quadrat stehen. Klicken Sie darauf, um die Farbauswahl zu \u00f6ffnen, und dr\u00fccken Sie auf das Pipettensymbol daneben. \ud83d\udd8c\ufe0f<\/p>\n

\"Verwenden<\/figure>\n

Sie k\u00f6nnen 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\u00e4hlten Farbwert gef\u00fcllt. Sie k\u00f6nnen es einfach von hier kopieren. \ud83d\udccb<\/p>\n

\"Verwenden<\/figure>\n
\n

Diese Tipps kratzen kaum an der Oberfl\u00e4che<\/a> als mit dem Elements Inspector tats\u00e4chlich m\u00f6glich ist. Wenn Sie tiefer in die Webentwicklung eintauchen m\u00f6chten, finden Sie hier eine Anleitung f\u00fcr den Einstieg. \ud83d\udcbb<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Element Inspector-Tricks: Entdecken Sie 8 \u00fcberraschende Techniken zum einfachen Anpassen und Verbessern Ihres Online-Erlebnisses \ud83d\udcbb\u2728<\/p>","protected":false},"author":1,"featured_media":89558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":78,"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"1","parallax":"1","fullscreen":"1","layout":"right-sidebar","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"top","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"1","show_popup_post":"1","show_comment_section":"1","number_popup_post":"1","show_author_box":"1","show_post_related":"1","show_inline_post_related":"0"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"percentage","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[1435],"tags":[1582,1445,1558],"class_list":["post-33467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-browsertips","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/posts\/33467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/comments?post=33467"}],"version-history":[{"count":6,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/posts\/33467\/revisions"}],"predecessor-version":[{"id":104702,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/posts\/33467\/revisions\/104702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/media\/89558"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/media?parent=33467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/categories?post=33467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/de\/wp-json\/wp\/v2\/tags?post=33467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}