{"id":368552,"date":"2022-12-17T09:56:00","date_gmt":"2022-12-17T06:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368552"},"modified":"2022-12-29T18:56:13","modified_gmt":"2022-12-29T15:56:13","slug":"so-ueberpruefen-sie-website-elemente-in-ihrem-browser","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-ueberpruefen-sie-website-elemente-in-ihrem-browser\/","title":{"rendered":"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser"},"content":{"rendered":"\n<p>Wenn Sie schon immer wissen wollten, wie Ihre Seite mit verschiedenen Stilen aussehen w\u00fcrde, ohne jedoch \u00c4nderungen vornehmen zu m\u00fcssen, werden Sie erfreut sein zu h\u00f6ren, dass es eine M\u00f6glichkeit f\u00fcr Sie gibt, dies zu tun. Tats\u00e4chlich verf\u00fcgt Ihr Browser \u00fcber ein praktisches <strong>Tool, mit dem Sie Website-Elemente untersuchen k\u00f6nnen<\/strong>. Auf diese Weise k\u00f6nnen Sie die verschiedenen M\u00f6glichkeiten sehen, wie Ihre Inhalte aussehen k\u00f6nnen.<\/p>\n<p>Im folgenden Text stellen wir Ihnen alle wesentlichen Informationen zur \u00dcberpr\u00fcfung von Website-Elementen w\u00e4hrend der Arbeit in WordPress zur Verf\u00fcgung.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/KsV3YdZiwcU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Was genau ist Inspect Element?<\/h2>\n<p>Alle aktuellen Webbrowser verf\u00fcgen \u00fcber eine Reihe integrierter Tools, die den CSS-, JavaScript- und HTML-Code f\u00fcr eine bestimmte Seite anzeigen. Mit dem Inspect-Tool k\u00f6nnen Webentwickler den Code bei Bedarf in ihrem Webbrowser bearbeiten. Dies gibt ihnen die <strong>M\u00f6glichkeit, alle \u00c4nderungen in der Vorschau anzuzeigen, ohne den Code tats\u00e4chlich zu manipulieren<\/strong>. Mit anderen Worten, sie sind die einzigen, die diese \u00c4nderungen in ihrem Browser sehen k\u00f6nnen.<\/p>\n<p>Diese Option kann besonders f\u00fcr diejenigen von Vorteil sein, die \u00c4nderungen an ihrer WordPress-Website vornehmen m\u00f6chten, diese jedoch zuerst in der Vorschau anzeigen m\u00f6chten, bevor sie wirksam werden. Wenn Sie beispielsweise ein Blog-Besitzer sind und sehen m\u00f6chten, wie <a href=\"https:\/\/themewp.inform.click\/de\/wordpress-auszug-was-es-ist-und-wie-man-es-benutzt\/\" title=\"WordPress-Ausz\u00fcge Ihrer Beitr\u00e4ge\">WordPress-Ausz\u00fcge Ihrer Beitr\u00e4ge<\/a> in Ihrem Browser angezeigt werden, k\u00f6nnen Sie dies ganz einfach mit Hilfe dieses Tools tun.<\/p>\n<p>Dies ist nicht nur f\u00fcr Websitebesitzer n\u00fctzlich, sondern auch f\u00fcr alle Autoren, Vermarkter, Supportmitarbeiter und alle anderen, die daran interessiert sind, zu sehen, wie die Inhalte, an denen sie arbeiten, aussehen k\u00f6nnten.<\/p>\n<h2>So \u00fcberpr\u00fcfen Sie das Element in Google Chrome<\/h2>\n<p>Es gibt zwei M\u00f6glichkeiten, auf dieses Tool zuzugreifen. Sie k\u00f6nnen entweder mit der <strong>rechten Maustaste auf einen beliebigen Bereich Ihrer Webseite<\/strong> klicken und Untersuchen ausw\u00e4hlen oder auf Ihrer Tastatur STRG + Umschalt + I dr\u00fccken.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Nachdem Sie diesen ersten Schritt ausgef\u00fchrt haben, wird Ihr Browser automatisch in zwei Teile geteilt und der <strong>Quellcode Ihrer Seite wird im kleineren Fenster<\/strong> angezeigt. In diesem Fenster sehen Sie links HTML und rechts CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Verschiedene Bereiche der Webseite werden <strong>hervorgehoben, wenn Sie die Maus \u00fcber die HTML-Quelle ziehen<\/strong>. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Element Ihrer Webseite klicken, wird dieses Element hervorgehoben.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<h2>So bearbeiten und debuggen Sie den Code<\/h2>\n<p>Mit dem Werkzeug \u201eElement pr\u00fcfen&#8220; k\u00f6nnen Sie sowohl HTML als auch CSS bearbeiten. Um den HTML-Code zu bearbeiten, doppelklicken Sie einfach auf einen beliebigen Bereich im HTML-Quellcode und bearbeiten Sie dann den Code.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Das Gleiche ist auch im CSS-Bereich m\u00f6glich. Um <strong>eine neue Stilregel hinzuzuf\u00fcgen<\/strong>, klicken Sie einfach oben auf das Symbol +.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Alle \u00c4nderungen, die Sie vornehmen, werden sofort in Ihrem Browser angezeigt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Wir m\u00fcssen noch einmal betonen, dass keine dieser \u00c4nderungen gespeichert wird. Sie k\u00f6nnen beliebige Website-Elemente so lange untersuchen, wie Sie m\u00f6chten, aber dies ist <strong>nur ein Debugging-Tool, mit dem Sie keine tats\u00e4chlichen \u00c4nderungen am Code vornehmen k\u00f6nnen<\/strong>. Mit anderen Worten, alle Ihre \u00c4nderungen verschwinden, sobald Sie Ihre Seite neu laden.<\/p>\n<p>Wenn Sie die \u00c4nderungen tats\u00e4chlich vornehmen m\u00f6chten, m\u00fcssen Sie daher auf das Stylesheet Ihres WordPress-Themes zugreifen und den Code dort bearbeiten. Wir m\u00fcssen jedoch beachten, dass Sie f\u00fcr diese Zwecke <a href=\"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-ein-untergeordnetes-thema-auf-die-richtige-weise\/\" title=\"ein untergeordnetes Thema erstellen sollten .\">ein untergeordnetes Thema erstellen sollten .<\/a><\/p>\n<h2>Konsolenbereich zum Auffinden von Fehlern<\/h2>\n<p>Eine weitere wichtige Funktion des Werkzeugs Element pr\u00fcfen ist ein Konsolenbereich. Dieser spezielle Bereich zeigt alle <strong>vorhandenen Fehler auf Ihrer Website an<\/strong>. Wenn Sie also einen Fehler auf Ihrer Seite debuggen m\u00f6chten, k\u00f6nnte es f\u00fcr Sie von Nutzen sein, diesen Bereich zu \u00fcberpr\u00fcfen, um die Fehler zu untersuchen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" alt=\"So \u00fcberpr\u00fcfen Sie Website-Elemente in Ihrem Browser\"><\/a><\/p>\n<p>Zu lernen, wie Website-Elemente \u00fcberpr\u00fcft werden, ist nicht nur f\u00fcr Ihre Arbeit n\u00fctzlich, sondern kann auch Zeit f\u00fcr Ihr technisches Support-Team sparen, wenn Sie bereits wissen, was Ihr Problem ist. Da dieses leistungsstarke Tool mehrere Vorteile bietet, empfehlen wir Ihnen, es zu verwenden, indem Sie unserem Leitfaden folgen.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ihr Browser verf\u00fcgt \u00fcber ein praktisches Tool, mit dem Sie Website-Elemente untersuchen und sehen k\u00f6nnen, wie Ihre Inhalte auf unterschiedliche Weise aussehen k\u00f6nnen.<\/p>\n","protected":false},"author":1,"featured_media":364372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-368552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/368552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=368552"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/368552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/364372"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=368552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=368552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=368552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}