Inspect Element ist im Grunde das Schweizer Taschenmesser eines Entwicklers, oder? Jeder, der schon einmal versucht hat, im Code einer Website herumzust\u00f6bern, ohne sich voll in den Entwicklermodus zu st\u00fcrzen, hat wahrscheinlich festgestellt, wie n\u00fctzlich (und ein wenig s\u00fcchtig machend) es sein kann. Ob zum Bereinigen eines kniffligen Screenshots, zum Bearbeiten von Streichen, zum schnellen Optimieren von Stilen oder zum Ausspionieren der SEO-Tags der Konkurrenz \u2013 dieses kleine Tool ist ein Lebensretter. Aber ehrlich gesagt: Manche Leute m\u00f6chten sich nicht jedes Mal unz\u00e4hlige Tastenkombinationen merken oder sich durch Men\u00fcs w\u00fchlen, wenn sie es brauchen. Hier also eine kurze \u00dcbersicht, wie man Inspect Element in verschiedenen Browsern und auf verschiedenen Ger\u00e4ten \u00f6ffnet, ohne es unn\u00f6tig kompliziert zu machen.<\/p>\n
Das funktioniert auf praktisch jeder Website einwandfrei. Warum ist es hilfreich? Weil es sofortigen Zugriff auf das HTML und CSS hinter dem bietet, was Sie sehen. Bei manchen Setups, insbesondere in Chrome oder Edge, f\u00e4llt Ihnen m\u00f6glicherweise das Panel unten auf, wenn Sie dieses Layout bevorzugen. Manchmal reicht es aus, das Panel zu verschieben oder das Layout-Symbol zu \u00e4ndern.<\/p>\n
Profi-Tipp: Wenn der Rechtsklick nicht funktioniert (z. B.weil eine Website ein Skript hat, das Kontextmen\u00fcs blockiert) oder Sie ein paar Sekunden sparen m\u00f6chten, sind diese Tastenkombinationen Gold wert. Beachten Sie jedoch, dass einige Browser m\u00f6glicherweise eine kleine Anpassung ben\u00f6tigen, wenn die Hotkeys nicht funktionieren, aber normalerweise funktionieren sie.<\/p>\n
Dasselbe Prinzip wie bei Windows: Klicken Sie mit der rechten Maustaste und w\u00e4hlen Sie \u201eUntersuchen\u201c oder dr\u00fccken Sie die Taste Cmd + Shift + C<\/kbd>. Ganz einfach. In den meisten F\u00e4llen funktionieren diese Tastenkombinationen einwandfrei, mit Ausnahme einiger Sonderf\u00e4lle, in denen Erweiterungen st\u00f6ren k\u00f6nnen.<\/p>\n In Safari ist \u201eElement untersuchen\u201c standardm\u00e4\u00dfig nicht aktiviert. Sie m\u00fcssen zuerst die Entwicklertools aktivieren. Das ist zwar ein bisschen m\u00fchsam, aber nicht allzu schlimm:<\/p>\n Nach der Aktivierung wird in der oberen Men\u00fcleiste das Men\u00fc \u201eEntwickeln\u201c<\/strong> angezeigt. Klicken Sie dort einfach mit der rechten Maustaste auf ein Seitenelement und w\u00e4hlen Sie \u201e Element pr\u00fcfen\u201c<\/strong>. Alternativ k\u00f6nnen Sie auch die Tastenkombination verwenden Cmd + Option + I<\/kbd>, um direkt zu starten.<\/p>\n Und wenn Sie mit einem mobilen Ger\u00e4t arbeiten, k\u00f6nnen Sie Ihr iPhone oder iPad mit aktiviertem Entwicklermodus an einen Mac anschlie\u00dfen und so mobile Webseiten im Safari-Debugger \u00fcberpr\u00fcfen. Aufgrund der Vorgehensweise von Apple ist der Einrichtungsaufwand etwas gr\u00f6\u00dfer, aber machbar. Aktivieren Sie einfach den Web Inspector unter iOS, verbinden Sie ihn \u00fcber USB und w\u00e4hlen Sie dann Ihr Ger\u00e4t aus dem Men\u00fc \u201eEntwickeln\u201c in Safari auf dem Mac aus.<\/p>\n Da Chromebooks grunds\u00e4tzlich nativ mit Chrome-Technologie arbeiten, ist der Vorgang im Grunde derselbe: Rechtsklick > Untersuchen. Der Haken? Manche Schul- oder Arbeitsadministratorkonten blockieren Entwicklertools aus Sicherheitsgr\u00fcnden. Fehlt die Option \u201eUntersuchen\u201c, helfen keine Hotkeys, es sei denn, Sie verf\u00fcgen \u00fcber Administratorrechte oder der Administrator hat die Entwickleroptionen wieder aktiviert.<\/p>\n Die \u00dcberpr\u00fcfung von Elementen auf iOS oder Android ist nur mit einem Desktop-PC m\u00f6glich. Auf iPhones und iPads ben\u00f6tigen Sie einen Mac und den Web Inspector von Safari oder eine Drittanbieter-App mit \u00e4hnlichen Funktionen \u2013 und selbst dann ist die Bedienung nicht so reibungslos wie auf dem Desktop. Wenn Sie also eine mobile Website optimieren m\u00f6chten, ist es besser, dies zun\u00e4chst auf dem Computer zu tun und dann eine Vorschau auf dem Mobilger\u00e4t anzuzeigen.<\/p>\n Das sollte eigentlich kein Hexenwerk sein, aber manchmal verstecken Browser oder Ger\u00e4te die Funktion \u201eElement untersuchen\u201c hinter ein paar zus\u00e4tzlichen Klicks oder Tastenkombinationen. Unter Windows ist Strg+Umschalt+C oder F12 Ihr bester Freund. Mac-Benutzer k\u00f6nnen auf Cmd + Umschalt + C zur\u00fcckgreifen und bei Bedarf den Entwicklermodus in Safari aktivieren. Und in Chrome, Edge oder Firefox gen\u00fcgt normalerweise ein Rechtsklick auf das jeweilige Element.<\/p>\n Hoffentlich hilft dies jemandem, den L\u00e4rm zu durchdringen und schneller auf die Website-Dateien zuzugreifen. Manchmal reicht es schon aus, die richtige Verkn\u00fcpfung oder den richtigen Men\u00fcpfad zu kennen, um das frustrierende Herumfummeln zu vermeiden.<\/p>\n Inspect Element ist kein geheimes Tool mehr \u2013 es ist in allen g\u00e4ngigen Browsern integriert. Sobald Sie die Verkn\u00fcpfung oder den Men\u00fcpfad kennen, k\u00f6nnen Sie es schnell \u00f6ffnen und ausprobieren. Die meisten Benutzer k\u00f6nnen mit einem Rechtsklick oder einer Tastenkombination darin navigieren. Bedenken Sie jedoch, dass die Entwicklertools in manchen Setups m\u00f6glicherweise deaktiviert oder hinter den Einstellungen versteckt sind. Viel Erfolg und ein reibungsloses Web-Debugging.<\/p>\n","protected":false},"excerpt":{"rendered":" Inspect Element ist im Grunde das Schweizer Taschenmesser eines Entwicklers, oder? Jeder, der schon einmal versucht hat, im Code einer Website herumzust\u00f6bern, ohne sich voll<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1059","post","type-post","status-publish","format-standard","hentry","category-hilfe"],"_links":{"self":[{"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/posts\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":0,"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.peacedoorball.blog\/de\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Mit Safari (denn das ist nat\u00fcrlich der einzige Browser, bei dem es etwas schwieriger wird)<\/h3>\n
\n
\u00dcberpr\u00fcfung auf Chromebooks oder Schulger\u00e4ten<\/h2>\n
Auf dem Handy? Nicht so schnell…<\/h2>\n
Abschluss<\/h2>\n
Zusammenfassung<\/h2>\n
\n
Zusammenfassung<\/h2>\n