Chrome DevTools: Elements, Console, Network
Navigieren Sie durch die Bereiche Elements, Console und Network, um Stile zu untersuchen, JavaScript-Fehler zu beheben und HTTP-Anfragen zu überwachen.
Chrome DevTools: Elements, Console, Network ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
DevTools effizient öffnen
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element und wählen Sie „Inspect“, um die DevTools mit diesem Element als Auswahl zu öffnen. Mit F12 blenden Sie das Panel ein oder aus. Mit Cmd+Shift+C (Mac) oder Ctrl+Shift+C (Windows) wechseln Sie direkt in den Inspektionsmodus, ohne das vollständige Panel zu öffnen.
Elements-Panel — DOM-Inspektor
Das Elements-Panel zeigt den aktuellen, geparsten DOM-Baum – nicht den HTML-Quelltext. Es berücksichtigt Änderungen durch JavaScript. Bewegen Sie den Mauszeiger über Knoten, um sie auf der Seite hervorzuheben. Mit einem Doppelklick können Sie HTML direkt inline bearbeiten.
Styles- und Computed-Panels
Wenn ein Element ausgewählt ist, zeigt das Styles-Panel alle angewendeten CSS-Regeln, nach ihrer Spezifität geordnet. Durchgestrichene Regeln werden überschrieben. Das Computed-Panel zeigt die endgültig berechneten Werte für jede Eigenschaft.
Elementzustände erzwingen
Klicken Sie im Styles-Panel auf die Schaltfläche :hov, um einen CSS-Zustand wie :hover, :focus, :active oder :visited zu erzwingen. So können Sie Hover-Stile untersuchen, ohne den Mauszeiger vollkommen ruhig halten zu müssen.
Box-Modell visualisieren
Das Computed-Panel zeigt ein interaktives Diagramm des Box-Modells mit Inhalt, Innenabstand, Rahmen und Außenabstand. Bewegen Sie den Mauszeiger über die einzelnen Bereiche, um ihre Werte anzuzeigen. Klicken Sie, um Werte für Außen- und Innenabstände live zu bearbeiten.
Konsolengrundlagen — Protokollieren und Code ausführen
Die Console zeigt Fehler, Warnungen und Logs an. Geben Sie einen beliebigen JavaScript-Ausdruck ein und drücken Sie die Eingabetaste, um ihn anhand der aktuellen Seite auszuwerten. Verwenden Sie die Console als interaktive REPL, um Codeausschnitte sofort zu testen.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Methoden der Console API
Neben console.log gibt es: console.warn() (gelbe Warnung), console.error() (rot), console.table() (stellt Arrays oder Objekte als Tabelle dar), console.group() / console.groupEnd() für gruppierte Ausgaben und console.time() zur Zeitmessung.
Überblick über das Network-Panel
Jede HTTP-Anfrage (HTML, JS, CSS, Bilder, XHR, Fetch) erscheint als eigene Zeile. Die Spalten zeigen Methode, Status, Größe und Zeit. Klicken Sie auf eine Zeile, um vollständige Details zur Anfrage und Antwort anzuzeigen.
Netzwerkanfragen filtern
Verwenden Sie die Filterleiste, um nach URL zu suchen oder nach Typ zu filtern: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. Der Filter XHR/Fetch ist besonders nützlich, wenn Sie API-Aufrufe aus JavaScript untersuchen.
Anfragen und Antworten untersuchen
Wählen Sie eine Netzwerkanfrage aus, um Folgendes anzuzeigen: Headers (Anfrage und Antwort), Preview (formatiertes JSON/HTML), Response (roher Inhalt) und Timing (Phasen der Verbindung). Im Tab Payload sehen Sie die Parameter des POST-Bodys.
Drosselung — Langsame Netzwerke simulieren
Klicken Sie auf das Dropdown-Menü für die Drosselung (Standardeinstellung: No throttling), um Slow 3G, Fast 3G oder Offline zu simulieren. Das Kontrollkästchen Disable cache verhindert, dass der Browser beim Testen auf zwischengespeicherte Ressourcen zurückgreift.
Kurzer Check
Wo in den Chrome DevTools können Sie alle auf ein ausgewähltes Element angewendeten CSS-Regeln einschließlich überschriebener Regeln sehen?
Zusammenfassung: Chrome-DevTools-Panels
Elements: Untersuchen und bearbeiten Sie den aktuellen DOM und CSS. Erzwingen Sie Pseudozustände, um Hover-Stile zu untersuchen. Console: Protokollieren, debuggen und JS live ausführen. Network: Überwachen Sie alle HTTP-Anfragen, untersuchen Sie Header und Antworten und drosseln Sie die Verbindung, um langsame Netzwerke zu simulieren.
Häufig gestellte Fragen
Ist die Lektion „Chrome DevTools: Elements, Console, Network“ kostenlos?
Ja — der vollständige Text von „Chrome DevTools: Elements, Console, Network“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Chrome DevTools: Elements, Console, Network“?
Navigieren Sie durch die Bereiche Elements, Console und Network, um Stile zu untersuchen, JavaScript-Fehler zu beheben und HTTP-Anfragen zu überwachen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Chrome DevTools: Elements, Console, Network“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Chrome DevTools: Elements, Console, Network
- VSCode: Erweiterungen, Emmet, Shortcuts
- Prettier- und ESLint-Einrichtung
- Browserkompatibilität und caniuse.com