{"id":42707,"date":"2021-07-28T11:02:06","date_gmt":"2021-07-28T09:02:06","guid":{"rendered":"https:\/\/kinsta.com\/?p=97002"},"modified":"2023-08-23T15:38:17","modified_gmt":"2023-08-23T14:38:17","slug":"element-untersuchen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/element-untersuchen\/","title":{"rendered":"Wie du das Werkzeug „Element untersuchen“ deines Browsers verwendest, um Webseiten zu bearbeiten"},"content":{"rendered":"

Es gibt zahlreiche wertvolle Ressourcen f\u00fcr die Webentwicklung<\/a>, seien es B\u00fccher, Videos, Onlinekurse<\/a> und mehr. Zu lernen, wie man das Werkzeug „Element untersuchen“ des Browsers benutzt, ist eine dieser m\u00e4chtigen F\u00e4higkeiten. Es ist ein unsch\u00e4tzbar wertvolles Werkzeug – eines, das du immer zur Hand hast und auf das du jederzeit zugreifen kannst.<\/p>\n

Mit der Funktion „Elemente untersuchen“ kannst du das Innenleben der Webseite sehen. Obwohl du nur Frontend-Markup wie HTML, CSS und manchmal JavaScript sehen kannst, gibt es dir eine M\u00f6glichkeit, genau zu sehen, wie die Entwickler eine Webseite aufgebaut haben.<\/p>\n

In diesem Beitrag zeigen wir dir, wie du das Werkzeug „Elemente untersuchen“ verwendest und welche Technologien, Features und Funktionen du dabei kennenlernst. Zuerst geben wir dir eine formale Einf\u00fchrung in das Werkzeug Elemente untersuchen selbst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Schau dir unsere Videoanleitung an, wie du eine Website mit inspect element bearbeitest<\/a><\/strong><\/p>\n<\/kinsta-video>\n

Einf\u00fchrung in das Werkzeug „Elemente untersuchen“<\/h2>\n

In den Anf\u00e4ngen des Internets gab es nur eine M\u00f6glichkeit, den Code einer Webseite zu betrachten – die View Source<\/strong> Funktion.<\/p>\n

\"Kinsta.com's
Kinsta.com’s „View Source“ Seite.<\/figcaption><\/figure>\n

Diese Situation war verbreitet in der Zeit bevor wir Cascading Style Sheets (CSS)<\/a> und JavaScript<\/a> in H\u00fclle und F\u00fclle hatten. Webentwickler benutzten HTML f\u00fcr alle Elemente einer Webseite, einschlie\u00dflich Inhalt, Design und… nun ja, alles.<\/p>\n

Als sich das Web zu entwickeln begann und die zugrundeliegenden Technologien immer leistungsf\u00e4higer wurden, war es notwendig, bessere Werkzeuge zu entwickeln. Firefox’s Firebug<\/a> war eine fr\u00fche L\u00f6sung, um herauszufinden, wie eine Webseite unter der Oberfl\u00e4che funktioniert und arbeitet:<\/p>\n

\"Die
Die Logos von Firefox und Firebug.<\/figcaption><\/figure>\n

Nach einer Weile fand diese Funktionalit\u00e4t ihren Weg in fast alle Browser. Heute kennen wir diese Funktion als das Werkzeug Element untersuchen:<\/p>\n

\"Das
Das Werkzeug „Element untersuchen“ auf der Webseite von Kinsta.<\/figcaption><\/figure>\n

Es ist ein m\u00e4chtiger Weg, um die zugrunde liegende Technologie und den Code einer Webseite zu sehen. Als solches kannst du es an verschiedenen Stellen finden – oft \u00fcber ein Men\u00fc in der Symbolleiste, durch Rechtsklick auf eine Seite und Auswahl der Option oder \u00fcber ein Tastenk\u00fcrzel.<\/p>\n

Das Werkzeug Elemente untersuchen konzentriert sich zwar prim\u00e4r auf HTML und CSS einer Seite, aber es gibt noch mehr, was du damit machen kannst.<\/p>\n\n

Rundgang durch das Panel \u201cElement untersuchen\u201d<\/h3>\n
\"Die
Die DevTools von Brave.<\/figcaption><\/figure>\n

Das Werkzeug Element untersuchen ist viel mehr als nur eine M\u00f6glichkeit, Code anzuzeigen. Es gibt oft mehrere Panels, auf die du zugreifen kannst:<\/p>\n