Es gibt zahlreiche wertvolle Ressourcen für die Webentwicklung, seien es Bücher, Videos, Onlinekurse und mehr. Zu lernen, wie man das Werkzeug „Element untersuchen“ des Browsers benutzt, ist eine dieser mächtigen Fähigkeiten. Es ist ein unschätzbar wertvolles Werkzeug – eines, das du immer zur Hand hast und auf das du jederzeit zugreifen kannst.

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öglichkeit, genau zu sehen, wie die Entwickler eine Webseite aufgebaut haben.

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ührung in das Werkzeug Elemente untersuchen selbst.

Schau dir unsere Videoanleitung an, wie du eine Website mit inspect element bearbeitest

Einführung in das Werkzeug „Elemente untersuchen“

In den Anfängen des Internets gab es nur eine Möglichkeit, den Code einer Webseite zu betrachten – die View Source Funktion.

Kinsta.com's
Kinsta.com’s „View Source“ Seite.

Diese Situation war verbreitet in der Zeit bevor wir Cascading Style Sheets (CSS) und JavaScript in Hülle und Fülle hatten. Webentwickler benutzten HTML für alle Elemente einer Webseite, einschließlich Inhalt, Design und… nun ja, alles.

Als sich das Web zu entwickeln begann und die zugrundeliegenden Technologien immer leistungsfähiger wurden, war es notwendig, bessere Werkzeuge zu entwickeln. Firefox’s Firebug war eine frühe Lösung, um herauszufinden, wie eine Webseite unter der Oberfläche funktioniert und arbeitet:

Die Logos von Firefox und Firebug.
Die Logos von Firefox und Firebug.

Nach einer Weile fand diese Funktionalität ihren Weg in fast alle Browser. Heute kennen wir diese Funktion als das Werkzeug Element untersuchen:

Das Werkzeug "Element untersuchen" auf der Webseite von Kinsta.
Das Werkzeug „Element untersuchen“ auf der Webseite von Kinsta.

Es ist ein mächtiger Weg, um die zugrunde liegende Technologie und den Code einer Webseite zu sehen. Als solches kannst du es an verschiedenen Stellen finden – oft über ein Menü in der Symbolleiste, durch Rechtsklick auf eine Seite und Auswahl der Option oder über ein Tastenkürzel.

Das Werkzeug Elemente untersuchen konzentriert sich zwar primär auf HTML und CSS einer Seite, aber es gibt noch mehr, was du damit machen kannst.

Rundgang durch das Panel “Element untersuchen”

Die DevTools von Brave.
Die DevTools von Brave.

Das Werkzeug Element untersuchen ist viel mehr als nur eine Möglichkeit, Code anzuzeigen. Es gibt oft mehrere Panels, auf die du zugreifen kannst:

  • Inspector – In einigen Browsern wird dies Elements Es ist der Hauptbildschirm des Werkzeugs “Elemente untersuchen” und zeigt dir den Seitencode, zusammen mit elementspezifischem CSS. Hier findest du auch weitere Details über das „Rastersystem“ einer Webseite und andere Aspekte.
  • Console – Dies ist ein Frontend-Warnungsprotokoll für eine Webseite und ein Ort, an dem du auch Codeschnipsel eingeben kannst, um einen schnellen Test einer Idee durchzuführen.
  • Network – Hier siehst du die Anfragen, die von und zu einem Server gemacht werden, wie z.B. alle POST und GET Anfragen.
  • Performance – Natürlich muss eine Webseite leistungsfähig sein. Aus diesem Grund gibt es ein spezielles Werkzeug, das dir hilft, einige wichtige Parameter der Webseite zu messen. Einige Browser schneiden hier besser ab als andere.
  • Memory – In diesem Panel kannst du sehen, wie eine Webseite den Arbeitsspeicher nutzt, und auch hier bieten einige Browser umfangreiche Metriken.
  • Application – In diesem Panel kannst du eine ganze Reihe von Informationen über den Cache der Webseite, Hintergrunddienste und mehr sehen

Darüber hinaus gibt es weitere Panels, die du hinzufügen kannst:

Eine Liste anderer Panels innerhalb der DevTools von Brave.
Eine Liste anderer Panels innerhalb der DevTools von Brave.

Es gibt einfache Panels wie Media und komplexere wie den JavaScript Profiler und den Performance Monitor. Kurz gesagt, der Name des Werkzeugs „Elemente untersuchen“ wird der gesamten Funktionalität nicht wirklich gerecht. Es hat eine immense Leistungsfähigkeit und sollte ein zentraler Bestandteil des Workflows eines jeden Webentwicklers sein.

Warum du „Element untersuchen“ verwenden solltest

Das Werkzeug Element untersuchen ist fast die einzige Komplettlösung, die du während der Entwicklung an deiner Seite haben solltest. Wir werden im weiteren Verlauf des Artikels auf die technischen Details eingehen, warum das so ist. Zunächst aber lohnt es sich, über deine Motivation für die Verwendung von Element untersuchen zu sprechen.

Es gibt ein paar Gründe, warum du das Werkzeug nutzen solltest:

  • Du kannst andere Webseiten durchstöbern, um Inspiration zu finden, wie du an deiner arbeiten kannst.
  • Du erfährst, wie andere Webseiten oder Entwickler bestimmte Techniken erreichen.
  • Es gibt dir die Freiheit, auf deiner Webseite ohne Konsequenzen zu experimentieren.
  • In den meisten Werkzeugen zum Untersuchen von Elementen hast du die Möglichkeit, die Webseiten zu debuggen.
  • Es ist gut, mehr über die betreffende Webseite herauszufinden.

Kurz gesagt, um etwas über Webentwicklung zu lernen, muss man sich gute Beispiele von Webseiten anschauen und herausfinden, was sie ausmacht.

Mit dem Werkzeug “Element untersuchen” kannst du die genauen HTML- und CSS-Elemente einer Webseite überprüfen und hast so die Möglichkeit, diese Aspekte und Techniken in deine Arbeit zu integrieren.

Wie du das Werkzeug „Element untersuchen“ in deinem Browser findest

Die gute Nachricht ist, dass das Werkzeug “Element untersuchen” ganz einfach zu finden ist. In den meisten Fällen klickst du mit der rechten Maustaste auf eine Seite und wählst „Untersuchen“ oder „Element untersuchen„.

Wählen des Werkzeugs "Element untersuchen".
Wählen des Werkzeugs „Element untersuchen“.

Standardmäßig wird das Werkzeug in einem geteilten Fenster geöffnet. Oft ist es auf der rechten Seite voreingestellt. Du kannst es aber nach deinen Wünschen anpassen und das Werkzeug sogar in ein eigenes Fenster ausklappen.

Das Werkzeug "Element untersuchen" in seinem Fenster.
Das Werkzeug „Element untersuchen“ in seinem Fenster.

Natürlich kannst du “Element untersuchen” auch über die Symbolleiste des Browsers oder über ein Tastenkürzel aufrufen. Der genaue Ort variiert je nach Browser. In Firefox zum Beispiel findest du die Web Developer Tools im Menü Tools > Browser Tools. In Brave (und anderen Chromium-basierten Browsern) hingegen findest du die Option Developer Tools im Menü View > Developer.

Das Menü der Brave-Werkzeugleiste, das die Werkzeuge für Entwickler anzeigt.
Das Menü der Brave-Werkzeugleiste, das die Werkzeuge für Entwickler anzeigt.

Die Tastenkürzel sind oft browserübergreifend ähnlich: Command + Shift + C (Control + Shift + C für Windows). Mit diesem Tastenkürzel kannst du schnell die Werkzeuge aufrufen, mit denen du arbeiten möchtest.

Wenn du das Werkzeug „Element untersuchen“ noch nie geöffnet hast, wird es oft auf der rechten Seite deines Menüs angezeigt, wie wir bereits erwähnt haben. Um dies zu ändern, klicke auf das Ampel menü in der Werkzeugleiste von „Elements untersuchen“. Hier kannst du die Seite wechseln, auf der das „Dock“ angezeigt wird:

Die "Dock-Side"-Optionen im Werkzeug "Element untersuchen"
Die „Dock-Side“-Optionen im Werkzeug „Element untersuchen“

Beachte, dass Firefox standardmäßig auch eine „triple pane“-Ansicht verwendet, die dir hilft, so viele Informationen wie möglich im Werkzeug “Element untersuchen” zu erhalten:

Die "Triple Pane"-Ansicht von Firefox.
Die „Triple Pane“-Ansicht von Firefox.

Jetzt, wo du das Werkzeug geöffnet hast, ist es eine gute Idee, herauszufinden, was du damit machen kannst. Darüber sprechen wir als nächstes.

Drei Situationen für die Verwendung des Werkzeugs „Elemente untersuchen“

Wir haben einige Möglichkeiten aufgezeigt, wie du das Werkzeug „Element untersuchen“ nutzen kannst, aber wir können noch weiter gehen und einige Anwendungsfälle anbieten. Lasst uns diese kurz besprechen.

1. Suche nach bestimmten Elementen auf einer Webseite

Das primäre Ziel des Werkzeugs „Element untersuchen“ liegt in seinem Namen – das Untersuchen von Elementen einer Webseite. Um dies zu tun, gehst du auf die gewünschte Webseite und wählst dann deine Methode, um die Entwicklerwerkzeuge zu öffnen.

Sobald das Panel geöffnet ist, klickst du auf den Pfeil, der als Auswähler für dein gewünschtes Element dient:

Das Inspector-Pfeil-Symbol.
Das Inspector-Pfeil-Symbol.

Von hier aus kannst du mit dem Mauszeiger über ein beliebiges Element auf der Seite fahren und du siehst es im Inspector/Elemente-Fenster hervorgehoben:

Hervorheben eines Elements im Panel der Entwicklungswerkzeuge.
Hervorheben eines Elements im Panel der Entwicklungswerkzeuge.

Es ist ein einfacher Prozess – einer der Gründe, warum das Werkzeug „Element untersuchen“ so wertvoll und beliebt bei Webentwicklern ist.

2. Emulation eines Zielgeräts, Displays und Browsers

Das „Element untersuchen“ funktioniert auch als eine Art Geräteemulator. Mit anderen Worten kannst du sehen, wie eine Webseite auf einem bestimmten Gerät aussieht. Die Optionen sind zahlreich:

Eine Liste der emulierten Geräte, die in Brave angezeigt werden.
Eine Liste der emulierten Geräte, die in Brave angezeigt werden.

Dieser Emulator ist großartig, um zu beurteilen, ob deine mobilfreundliche Strategie oder dein reaktionsfähiges Design korrekt ist und funktioniert. Er ist von unschätzbarem Wert und außerdem kostengünstiger, als 200 Geräte auf deinem Schreibtisch herumliegen zu haben.

Du erreichst die Geräte-Emulation oft über ein kleines Icon irgendwo im Panel „Element untersuchen“:

Emulation eines Geräts mit dem Werkzeug "Element untersuchen".
Emulation eines Geräts mit dem Werkzeug „Element untersuchen“.

Wenn du auf dieses Symbol klickst, wird deine Webseite so angezeigt, wie sie auf dem von dir ausgewählten Gerät aussieht:

Wähle ein zu emulierendes Gerät aus dem Werkzeug "Element untersuchen".
Wähle ein zu emulierendes Gerät aus dem Werkzeug „Element untersuchen“.

Wir werden später noch genauer darauf eingehen, aber es ist ein felsenfester Weg, um deine Designs über alle Geräte hinweg einheitlich zu gestalten.

3. Die Leistung einer Webseite ermitteln

Das Werkzeug „Element untersuchen“ kann dir auch dabei helfen, die Geschwindigkeit und Leistung einer Webseite über das Performance-Panel zu beurteilen:

Das Performance-Panel "Element untersuchen"
Das Performance-Panel „Element untersuchen“

Dieses Feature funktioniert, indem es die Ladezeiten von bestimmten Elementen und Skripten „aufzeichnet“. Chromium-basierte Browser sind hervorragend in der Lage, diese Informationen zu liefern. Du zeichnest die Seite auf, während sie geladen wird, und kannst dir die Ergebnisse dann in einem Zeitleistenformat ansehen.

Dies ist eine hervorragende Möglichkeit, um festzustellen, ob eine Seite generell leistungsfähig ist. Danach solltest du ein Werkzeug wie Google PageSpeed Insights oder Lighthouse verwenden, um die Leistung deiner Webseite weiter zu verbessern. Chromium-basierte Browser verfügen über einen integrierten Lighthouse-Berichtsgenerator:

Ein eingebauter Google Lighthouse Bericht.
Ein eingebauter Google Lighthouse Bericht.

Du kannst auch eine Zusammenfassung der leistungsfähigen Tests in einigen anderen Tabs sehen. Zum Beispiel kannst du einen Call Tree mit Gesamtübersicht und Ereignisprotokoll sehen:

Das Ereignisprotokoll des "Elements untersuchen".
Das Ereignisprotokoll des „Elements untersuchen“.

Es ist denkbar, dass du kein anderes Werkzeug brauchst, um zu beurteilen, wie leistungsfähig deine Webseite ist oder funktioniert. Wie es in der Praxis funktioniert, besprechen wir als nächstes.

Tricks und Tipps zur Verwendung des Werkzeugs „Elemente untersuchen

Wir haben bereits darüber gesprochen, dass das Werkzeug „Element untersuchen“ viel mächtiger ist, als es auf den ersten Blick scheint. Schauen wir uns ein paar Tricks und Tipps an, um das Beste aus den Funktionen herauszuholen, beginnend mit den Grundlagen.

1. Ändern von Elementeigenschaften, Werten und Zuständen

Bisher haben wir nur das Konzept der Verwendung des Werkzeugs „Element untersuchen“ angesprochen, um temporäre Änderungen an einer Webseite vorzunehmen. Lass uns nun im Detail besprechen, wie man das macht.

Die Schritte sind ganz einfach. Zuerst wählst du mit dem Pfeilsymbol das gewünschte Element aus. Du wirst ein Overlay sehen, das die verschiedenen Komponenten hervorhebt, wenn du mit dem Mauszeiger darüber fährst:

Auswählen von Elementen im Werkzeug "Elemente untersuchen".
Auswählen von Elementen im Werkzeug „Elemente untersuchen“.

Sobald du zu deinem gewünschten Element kommst, kannst du fast überall, wo du ein Tag im Elemente-Panel siehst, doppelklicken und eine Änderung eintippen. Zum Beispiel wollen wir den ursprünglichen Heldentext auf der Kinsta Homepage in etwas anderes ändern:

Ändern des Textes auf der Kinsta-Startseite
Ändern des Textes auf der Kinsta-Startseite

Du kannst auch mit CSS auf die gleiche Weise wie mit HTML arbeiten. Nimm zum Beispiel die Call-to-Action (CTA) Buttons auf der Kinsta-Startseite:

Auswählen einer Schaltfläche auf der Kinsta-Startseite.
Auswählen einer Schaltfläche auf der Kinsta-Startseite.

Wenn du die Schaltfläche mit dem Mauszeiger auswählst, kannst du das zugehörige CSS im rechten Styles-Panel sehen:

Das Style-Panel innerhalb des Werkzeugs "Element untersuchen".
Das Style-Panel innerhalb des Werkzeugs „Element untersuchen“.

Wie bei HTML-Elementen kannst du auch hier Werte ändern und dein CSS einfügen:

Ändern der Farbe der Schaltfläche im Styles Panel.
Ändern der Farbe der Schaltfläche im Styles Panel.

Natürlich kann es sein, dass du bei Elementen wie Schaltflächen mit verschiedenen Zuständen arbeiten möchtest. In diesem Fall lohnt es sich, auch den :hover-Zustand zu ändern. Um dies zu tun, klicke auf den :hov-Link im Style Panel. Wenn du diesen Link auswählst, wird eine Liste von Elementzuständen angezeigt und du kannst die auswählen, für die du das CSS für den Hover-Zustand sehen möchtest:

Aufrufen der "States"-Optionen im Styles-Panel.
Aufrufen der „States“-Optionen im Styles-Panel.

Die Webseite wird dir zeigen, wie der Zustand ist, ohne dass du handeln musst. Hier haben wir die Hover-Farben geändert, um sie vom Standard-Button-Status zu unterscheiden:

Ändern der Farben des Hover-Status im Styles-Panel.
Ändern der Farben des Hover-Status im Styles-Panel.

Du kannst sogar Bild-URLs nehmen und sie gegen andere austauschen. Auf der Kinsta-Startseite zeigen wir einen Screenshot des MyKinsta-Dashboards

Das MyKinsta Dashboard auf der Kinsta Homepage.
Das MyKinsta Dashboard auf der Kinsta Homepage.

Indem du das Element ausfindig machst und die Quell-URL des Bildes änderst, kannst du andere Bilder an seiner Stelle ausprobieren:

In diesem Fall ging die Änderung innerhalb weniger Minuten live (Bildquelle: Pixabay).
In diesem Fall ging die Änderung innerhalb weniger Minuten live (Bildquelle: Pixabay).

Wie zu erwarten, sind diese Änderungen nicht dauerhaft und mit einem kurzen Refresh der Seite kannst du die Dinge wieder in den Normalzustand bringen. Alternativ kannst du das HTML und CSS auch in deinen Editor kopieren und in deinen Code einfügen, um die Änderungen dauerhaft zu machen.

2. Suchen nach Elementen

Bevor du ein Element ändern kannst, musst du es vielleicht erst einmal finden. Das Werkzeug „Element untersuchen“ hat eine einfache Suchfunktion, die dir helfen kann, jeden Aspekt einer Webseite zu finden.

Allerdings ist es schwer zu finden, wenn du nicht weißt, wo du suchen musst. Der „offizielle“ Weg in Chromium-basierten Browsern ist, das „Ampel“-Menü auf der rechten Seite der Seite aufzurufen und die Option Suchen auszuwählen:

Die "Suchen"-Option in Braves DevTools
Die „Suchen“-Option in Braves DevTools

Wenn du dies benutzt, öffnet sich das Konsolen-Panel mit dem Reiter Suchen. Gib hier den gewünschten Tag in das Textfeld ein und du bekommst eine Liste der zugehörigen Elemente auf der Seite angezeigt:

Suche nach Elementen in den DevTools von Brave.
Suche nach Elementen in den DevTools von Brave.

Beachte, dass du in anderen Browsern die Funktionen woanders findest. Firefox hat zum Beispiel ein Suchfeld am oberen Rand des Inspector-Panels:

Suche nach Elementen im Firefox Inspector Panel.
Suche nach Elementen im Firefox Inspector Panel.

Hier noch ein kleiner Tipp: Du kannst eine Expansion durchführen, die auf die verschiedenen Knoten und Elemente zurückgreift, indem du mit der rechten Maustaste auf das Elementfenster klickst und Rekursiv expandieren wählst:

Die Option "Rekursiv erweitern" im Elemente-Bedienfeld.
Die Option „Rekursiv erweitern“ im Elemente-Bedienfeld.

Wenn du einen Blick auf das Style-Panel wirfst, wirst du auch ein Filter Textfeld entdecken. Mit diesem Feld kannst du nach CSS-Eigenschaften filtern, was es zu einer großartigen Ergänzung der globalen Suchfunktion macht:

Filtern nach Eigenschaften im Style-Bedienfeld.
Filtern nach Eigenschaften im Style-Bedienfeld.

Im Großen und Ganzen sollte es nicht schwer sein, mit zwei speziellen Filter- und Suchwerkzeugen das zu finden, was du brauchst,

3. Eine kurze Einführung in das Box-Modell

Eine der besten Möglichkeiten, wie das Werkzeug „Element untersuchen“ dir helfen kann, mehr darüber zu lernen, wie CSS-Eigenschaften auf Elemente wirken, ist das visuelle „Box Model“ Panel.

Das Box Modell.
Das Box Modell.

Diese Übersicht gibt dir eine Vorstellung davon, wie eine bestimmte Box (z.B. „Element“ oder „div“) auf dem Bildschirm erscheint. Mit anderen Worten, es ist ein Überblick darüber, wie die Ränder, die Füllung, die Umrandung und der Inhalt kombiniert werden, um den Abschnitt zu bilden, den du auf dem Bildschirm siehst.

Das komplette CSS Box Model zu erklären und wie es mit dem HTML einer Webseite interagiert, würde den Rahmen dieses Artikels sprengen, aber Mozilla hat einen fantastischen Leitfaden für die Ins und Outs des Konzepts.

Du findest das Box-Modell oft in den Abschnitten Layout oder Berechnungen im rechten Bereich des Werkzeugs „Element untersuchen“:

Das Panel vom "Box Model" innerhalb des Werkzeugs "Element untersuchen".
Das Panel vom „Box Model“ innerhalb des Werkzeugs „Element untersuchen“.

Wie bei allen Elementen und Eigenschaften, kannst du auch die Werte und Einstellungen einer bestimmten Box ändern. Es wird auch eine Liste von anderen Eigenschaften geben, die dir helfen, die Box zu positionieren, einen z-Index zu setzen, Float- und Display-Einstellungen anzuwenden und vieles mehr.

Während du mit dem Box-Modell arbeitest, kannst du auch davon profitieren, das Grid-System auf der Seite im Einsatz zu sehen. Um das zu tun, wirf einen Blick auf das Layout-Panel – die Optionen, die du brauchst, findest du im Menü Raster:

Das Menü der Rastereinstellungen.
Das Menü der Rastereinstellungen.

Wenn du auf deine gewünschten Anzeigeeinstellungen klickst und dann ein entsprechendes Overlay auswählst, wird es auf dem Bildschirm angezeigt. So kannst du genauere Entscheidungen treffen, indem du das Box-Modell zur Handhabung der Webseite-Elemente verwendest.

4. Geräte mit „Element untersuchen“ emulieren

Sie haben sich von Buzzwords zu integrierten lexikalischen Begriffen entwickelt, aber „responsive“ und „mobile-friendly“ sind Schlüsselfaktoren der Webentwicklung. Das Werkzeug „Element untersuchen“ widmet sich diesen Aspekten mit einer Reihe von Funktionen.

In den meisten Browsern hat das Werkzeug „Element untersuchen“ ein Symbol für mobile Geräte in der oberen Werkzeugleiste:

Schalte die mobile “responsive” Ansicht in Brave um.
Schalte die mobile “responsive” Ansicht in Brave um.

Safari ist jedoch anders. Stattdessen gibt es einen An-/Ausschalter für den Responsive Design Modus im Entwicklermenü:

Die Möglichkeit, den "Responsive Design Modus zu beenden" in Safari.
– Die Möglichkeit, den „Responsive Design Modus zu beenden“ in Safari.

Unabhängig davon, wie du dorthin kommst, sobald du die Option wählst, wird die Webseite so angezeigt, als ob du sie auf einem kleineren Gerät betrachten würdest:

Eine Layout-Ansicht für mobile Geräte in Firefox.
Eine Layout-Ansicht für mobile Geräte in Firefox.

Während Safari dir nur die Wahl zwischen verschiedenen Apple-Geräten lässt, geben dir andere Browser die Werkzeuge an die Hand, die du brauchst, um mit Mobile-First-Prinzipien zu gestalten. So kannst du zum Beispiel die Ausrichtung des Ansichtsfensters wählen, sowie das Gerät, das du emulieren möchtest:

Die "Device Emulation" Liste in Brave.
Die „Device Emulation“ Liste in Brave.

Hier gibt es zwei weitere interessante Funktionen. Erstens kannst du eine emulierte Netzwerkgeschwindigkeit wählen. Safari enthält keine Optionen dafür und Chromium-basierte Browser bieten eine kleine, allgemeine Auswahl an Netzwerkdrosselung:

Die Drosselungsoptionen in Brave.
Die Drosselungsoptionen in Brave.

Firefox schneidet hier am besten ab, mit einer guten Auswahl an Netzwerken, aus denen du wählen kannst:

Die Drosselungsoptionen von Firefox.
Die Drosselungsoptionen von Firefox.

Um die Sache abzurunden, kannst du auch haptisches Feedback und Sensorerkennung simulieren. In Chromium-basierten Browsern ist das standardmäßig der Fall, in Firefox musst du es einschalten:

Die Option für haptisches Feedback in Firefox.
Die Option für haptisches Feedback in Firefox.

Firefox fällt hier zurück, da Chrome, Brave und andere deinen Cursor als kleines „Fingerspitzen-ähnliches“ Overlay zeigen. Die Funktionalität ist nicht für jeden Browser perfekt, aber es ist ein zuverlässiger Weg, um herauszufinden, wie sich deine Webseite auf anderen Geräten verhalten könnte.

Diese Art des Testens bleibt bei vielen Webentwicklern oft auf der Strecke. Das heißt, es gibt keine Entschuldigung mehr, wenn die Browser umfassende Lösungen wie diese anbieten.

5. Tastenkürzel bei der Verwendung des Werkzeugs „Element untersuchen”

Die meisten Tastenkürzel in den Browsern sind oft in allen Browsern gleich. Das ist eine gute Nachricht, wenn du zwischen verschiedenen Geräten hin und her wechselst, um deine Webseiten zu testen.

Hier ist eine kurze Liste mit einigen der beliebtesten (und nützlichsten) Tastenkürzel:

Öffne das Werkzeug „Element untersuchen“ Command + Shift + C für Mac, Control + Shift + C für Windows
Bewegen zwischen den einzelnen Knoten Pfeil nach oben und unten
Erweitern des ausgewählten Knotens Rechter Pfeil
Komprimieren des ausgewählten Knotens Linker Pfeil
Rekursives Auf- und Zuklappen von Knoten Option + Klick für Mac, Alt + Klick für Windows
Bewegen innerhalb eines Knotens, um mit Attributen zu arbeiten Enter oder Zurück
Schritt vorwärts durch die Attribute eines Knotens Tab
Schritt rückwärts durch die Attribute eines Knotens Shift + Tab
Ausblenden oder Anzeigen des ausgewählten Knotens H
Bearbeiten und Beenden der Bearbeitung eines Knotens als HTML F2
Wenn eine CSS-Eigenschaft ausgewählt ist, wird der Wert um eins erhöht Pfeil nach oben
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um einen Pfeil nach unten
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um zehn Shift + Pfeil nach oben
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um zehn Shift + Pfeil nach unten
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um 0,1 Option + Pfeil nach oben für Mac, Alt + Pfeil nach oben für Windows
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um 0,1 Option + Pfeil nach unten für Mac, Alt + Pfeil nach unten für Windows

Natürlich gibt es noch viele weitere Tastenkürzel. Mozilla hat eine hervorragende Anleitung für Firefox, während Chrome, Brave, Edge und andere ebenfalls Tastenkürzel teilen. Apple ist weniger hilfreich mit den Tastenkürzeln für Safari-Entwickler, da es keine definierte Liste innerhalb ihrer Hilfeseiten gibt. Stattdessen empfehlen wir, die offizielle Dokumentation der Safari Werkzeuge für Entwickler durchzulesen.

Zusammenfassung

Webentwicklung ist nicht mehr nur HTML. Es sind viele Technologien beteiligt. Selbst wenn du dich an die heilige Dreifaltigkeit von HTML, CSS und JavaScript hältst, musst du verstehen, wie eine Webseite all diese Komponenten zusammenhält.

Das Werkzeug „Element untersuchen“ des Browsers ist eine der besten Möglichkeiten, um unter die Oberfläche einer Webseite zu schauen und herauszufinden, wie sie im Detail funktioniert. Es ist nicht nur eine fantastische Lernhilfe, sondern kann dir auch helfen, Änderungen an deiner Webseite zu testen und herauszufinden, wie sie auf verschiedenen Geräten und mobilen Netzwerken funktioniert.

Benutzt du das „Element untersuchen“ oft? Wenn ja, was sind deine Lieblingsfunktionen? Teile deine Meinung im Kommentarbereich!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.