DevPanicZone Logo DevPanicZone! Cheatsheets.

Browser DevTools

Inspektor, Console, Debugger & mehr - dein Röntgenblick ins Web.

Was sind Browser DevTools?

Die Browser Developer Tools (kurz: DevTools) sind ein eingebautes Werkzeugset in jedem modernen Browser. Sie sind quasi dein "Röntgenblick" ins Web - damit siehst du, wie Webseiten aufgebaut sind, kannst live Code ändern, Fehler finden und die Performance analysieren.

Ehrlich gesagt: Ohne DevTools wäre Webentwicklung wie im Dunkeln programmieren. Sie sind dein wichtigstes Tool überhaupt!

Warum DevTools so wichtig sind
  • Debugging: Finde Fehler in HTML, CSS und JavaScript
  • Live-Editing: Teste Änderungen direkt im Browser, bevor du sie im Code umsetzt
  • Performance: Analysiere, warum deine Seite langsam lädt
  • Lernen: Schau dir an, wie andere Websites gebaut sind
  • Responsive Testing: Prüfe, wie deine Seite auf verschiedenen Geräten aussieht

DevTools öffnen

Es gibt mehrere Wege, die DevTools zu öffnen:

plain text 
F12                    → DevTools öffnen/schließen
Strg + Shift + I       → DevTools öffnen (Windows/Linux)
Cmd + Option + I       → DevTools öffnen (Mac)
Strg + Shift + C       → Element-Inspektor aktivieren (Windows/Linux)
Cmd + Option + C       → Element-Inspektor aktivieren (Mac)
Strg + Shift + J       → Console öffnen (Windows/Linux)
Cmd + Option + J       → Console öffnen (Mac)

Alternative: Rechtsklick auf ein Element → "Untersuchen" / "Inspect"

Elements / Inspektor

Der Elements-Tab (bei Firefox: "Inspektor") zeigt dir die komplette HTML-Struktur und CSS-Styles deiner Seite. Das ist der Tab, den du vermutlich am häufigsten verwendest.

Was du hier machen kannst

Wichtig: Alle Änderungen sind temporär und verschwinden beim Neuladen!

HTML-Struktur untersuchen
  • Sieh den kompletten DOM-Baum (Document Object Model)
  • Klappe Elemente auf und zu, um die Struktur zu verstehen
  • Hovere über Elemente im Code → sie werden auf der Seite markiert
  • Hovere über Elemente auf der Seite → der Code wird markiert
Live-Editing
  • Doppelklick auf Text im HTML → direkt bearbeiten
  • Doppelklick auf Attributwerte → ändern
  • Rechtsklick auf Element → "Edit as HTML" → komplettes HTML bearbeiten
  • Rechtsklick → "Delete Element" → Element entfernen (temporär!)
CSS-Styles untersuchen und ändern
  • Rechts siehst du alle CSS-Regeln für das ausgewählte Element
  • Sortiert nach Spezifität (oben = höchste Priorität)
  • Durchgestrichene Regeln wurden überschrieben
  • Klick in ein Feld → Werte direkt ändern
  • Checkbox an/aus → Style aktivieren/deaktivieren
  • element.style → Inline-Styles (höchste Priorität)

Praktische Features

plain text 
Im Styles-Panel unten siehst du das Box Model:
┌─────────────────────────────┐
│        Margin (orange)      │
│  ┌───────────────────────┐  │
│  │   Border (gelb)       │  │
│  │  ┌─────────────────┐  │  │
│  │  │ Padding (grün)  │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  Content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

Hovere dort über die Zahlen → sieht die Bereiche auf der Seite
Computed Styles

Im "Computed" Tab siehst du die finalen, berechneten CSS-Werte:

  • Alle Styles, die wirklich auf das Element angewendet werden
  • Inklusive Browser-Default-Styles
  • Klick auf einen Wert → zeigt, woher er kommt

Typische Anwendungsfälle

Warum sieht mein Element nicht so aus, wie ich will?
  1. Element im Inspektor auswählen
  2. Im Styles-Panel schauen, welche Regeln greifen
  3. Durchgestrichene Regeln? → Werden überschrieben
  4. Klick auf die Datei-Angabe rechts → springt zur CSS-Zeile
  5. Teste Änderungen live, bevor du sie im Code machst
Wie hat jemand anderes das gemacht?
  1. Rechtsklick auf interessantes Element → "Untersuchen"
  2. Schau dir HTML-Struktur und CSS an
  3. Kopiere interessante Techniken für eigene Projekte

💡 Tipp: So lernt man super viel! Einfach coole Websites inspizieren.

Console

Die Console ist dein direkter Draht zu JavaScript. Hier siehst du Fehlermeldungen, kannst Code ausführen und mit console.log() debuggen.

Was die Console kann

Logging & Debugging

javascript 
// Verschiedene Log-Typen
console.log('Normale Info');
console.info('Info-Nachricht');
console.warn('Warnung!');
console.error('Fehler!');
console.debug('Debug-Info');

// Objekte und Arrays loggen
console.log({ name: 'Bianca', rolle: 'Developer' });
console.table([{id: 1, name: 'HTML'}, {id: 2, name: 'CSS'}]);

// Gruppierung für bessere Übersicht
console.group('Meine Gruppe');
console.log('Nachricht 1');
console.log('Nachricht 2');
console.groupEnd();

// Zeitmessung
console.time('Ladezeit');
// ... Code hier ...
console.timeEnd('Ladezeit'); // Zeigt Millisekunden an

JavaScript direkt ausführen

Du kannst direkt in der Console JavaScript-Code eingeben und ausführen:

javascript 
// Einfache Berechnungen
2 + 2  // Enter drücken → 4

// Variablen erstellen
let name = 'DevPanicZone';
console.log(name);

// DOM manipulieren
document.querySelector('h1').style.color = 'red';

// Funktionen testen
function greet(name) {
    return `Hallo ${name}!`;
}
greet('Bianca');

Praktische Console-Helfer

javascript 
// $ = document.querySelector (nur in DevTools!)
$('h1')  // Findet erstes h1

// $$ = document.querySelectorAll
$$('.info-box')  // Findet alle .info-box Elemente

// $_ = Letztes Ergebnis
2 + 2    // → 4
$_ * 2   // → 8

// Elemente direkt auswählen
inspect($('h1'))  // Springt zu h1 im Elements-Tab

// Alle Event Listener eines Elements sehen
getEventListeners($('button'))

// Console leeren
clear()  // oder Ctrl+L / Cmd+K

Bonus: Custom Begrüßungstext in der Console

Du möchtest einen coolen Begrüßungstext anzeigen, wenn jemand die Console öffnet? So geht's!

Basis-Begrüßung

javascript 
// In deine main.js oder eine eigene console-greeting.js
console.log('🚀 Willkommen bei DevPanicZone!');
console.log('Du schaust dir den Code an? Sehr gut! 👀');
console.log('Fragen? Schreib mir: hello@devpaniczone.de');

Mit Styling

javascript 
// Styled Console Messages
console.log(
    '%c🎨 DevPanicZone ',
    'background: #ff6b6b; color: white; font-size: 20px; padding: 10px; border-radius: 5px; font-weight: bold;'
);

console.log(
    '%cHey Neugierige/r! 👋',
    'color: #4ecdc4; font-size: 16px; font-weight: bold;'
);

console.log(
    '%cDu schaust dir meinen Code an? Das gefällt mir! ✨',
    'color: #95e1d3; font-size: 14px;'
);

console.log(
    '%cInteresse an Web Development? → devpaniczone.de/tutorials',
    'color: #f38181; font-size: 12px;'
);

ASCII Art Begrüßung

javascript 
// ASCII Art in Console
console.log(`
╔══════════════════════════════════════════╗
║                                          ║
║       D E V P A N I C Z O N E  🚀        ║
║                                          ║
║       Don't DevPanic. Cheat. 😎          ║
║                                          ║
╚══════════════════════════════════════════╝

Hey! Schön, dass du hier bist! 👋

💡 Was du hier siehst:
   → Sauberer, semantischer Code
   → Responsive Design
   → Performance-optimiert
   → Made with ☕ und viel Geduld
`);

console.log('%c⚡ Pro-Tipp: Drück Escape um diese Messages zu minimieren', 
    'color: #999; font-size: 11px; font-style: italic;');
Warnung vor Scamming - Wichtig für Live-Sites! 
// Wichtig für öffentliche Websites!
console.log(
    '%c⚠️ STOP!',
    'color: red; font-size: 40px; font-weight: bold;'
);

console.log(
    '%cWenn dich jemand gebeten hat, hier etwas einzufügen, ist das vermutlich ein Betrugsversuch!',
    'color: red; font-size: 16px; font-weight: bold;'
);

console.log(
    '%cDas könnte dazu führen, dass Angreifer Zugriff auf deinen Account bekommen.',
    'color: orange; font-size: 14px;'
);

console.log('Weitere Infos: https://de.wikipedia.org/wiki/Self-XSS');
Mehr zu Console Security
Wo die Begrüßung einfügen?

Du hast mehrere Optionen:

  • In main.js: Füge den Code am Anfang deiner main.js ein
  • Eigene Datei: Erstelle console-greeting.js und binde sie im HTML ein:
    <script src="/assets/js/console-greeting.js"></script>
  • Direkt im HTML: Im <head> oder vor </body> in einem <script>-Tag

Console-Filter nutzen

Oben in der Console kannst du filtern nach:

  • Errors: Nur Fehler anzeigen
  • Warnings: Nur Warnungen
  • Info/Verbose: Detaillierte Logs
  • Text-Suche: Nach bestimmten Nachrichten suchen

Sources / Debugger

Im Sources-Tab (bei Firefox: "Debugger") siehst du alle Dateien deiner Website und kannst JavaScript im Detail debuggen.

Was du hier findest

Datei-Übersicht
  • Links: Kompletter Datei-Baum deiner Website
  • Alle HTML, CSS, JavaScript-Dateien
  • Auch externe Ressourcen (CDNs, Bibliotheken)
  • Klick auf eine Datei → zeigt den Inhalt

Breakpoints setzen

Breakpoints sind dein wichtigstes Debugging-Tool. Sie pausieren die Code-Ausführung an einer bestimmten Stelle.

So setzt du Breakpoints

  1. Öffne deine JavaScript-Datei im Sources-Tab
  2. Klick auf die Zeilennummer links → blauer Marker erscheint
  3. Lade die Seite neu oder führe die Funktion aus
  4. Code pausiert an dieser Stelle
  5. Jetzt kannst du Variablen untersuchen und Schritt für Schritt durchgehen

Debugging-Controls

Wenn der Code pausiert ist, hast du folgende Buttons:

  • ▶️ Resume: Code weiterlaufen lassen bis zum nächsten Breakpoint
  • ⤵️ Step Over: Nächste Zeile ausführen (Funktionen werden übersprungen)
  • ⬇️ Step Into: In eine Funktion hineinspringen
  • ⬆️ Step Out: Aus aktueller Funktion herausspringen
  • ⏭️ Step: Zeile für Zeile durchgehen

Wichtige Status-Codes

Javascript 
// debugger Statement im Code
function calculateTotal(items) {
    debugger; // Code pausiert hier automatisch
    let total = 0;
    items.forEach(item => {
        total += item.price;
    });
    return total;
}

// Conditional Breakpoint im Code
if (shouldDebug) {
    debugger;
}

Watch & Scope

Während der Code pausiert ist, siehst du rechts:

  • Scope: Alle verfügbaren Variablen im aktuellen Kontext
  • Watch: Füge eigene Ausdrücke hinzu, die du beobachten willst
  • Call Stack: Die komplette Aufruf-Kette (welche Funktion hat welche aufgerufen)

Network / Netzwerkanalyse

Der Network-Tab zeigt dir alles, was deine Seite lädt: HTML, CSS, JavaScript, Bilder, Fonts, API-Calls - einfach alles!

Was du hier siehst

Request-Liste

Jede Zeile ist eine Ressource, die geladen wurde:

  • Name: Dateiname oder URL
  • Status: HTTP-Status (200 = OK, 404 = Not Found, etc.)
  • Type: Dateityp (document, stylesheet, script, image, etc.)
  • Size: Dateigröße
  • Time: Ladezeit
  • Waterfall: Zeitstrahl wann was geladen wurde
Wichtige Status-Codes
🟢 200 OK              → Alles gut, Ressource geladen
🟢 304 Not Modified    → Aus Cache geladen (gut!)
🔵 301/302 Redirect    → Umleitung zu anderer URL
🟡 404 Not Found       → Datei existiert nicht
🔴 500 Server Error    → Problem auf dem Server
🔴 403 Forbidden       → Zugriff verweigert

Praktische Features

Request-Details ansehen

Klick auf einen Request → siehst du Details:

  • Headers: HTTP-Header (Request + Response)
  • Preview: Vorschau der Daten
  • Response: Rohe Antwort vom Server
  • Timing: Detaillierte Ladezeiten
⚡ Performance prüfen
  • Oben siehst du die Gesamt-Ladezeit
  • Sortiere nach Size → finde große Dateien
  • Sortiere nach Time → finde langsame Requests
  • Waterfall-Ansicht → siehst, was blockiert

API-Calls filtern (Fetch/XHR)

Wenn du mit APIs arbeitest und nur die Daten-Requests sehen willst (keine Bilder, CSS, etc.):

  1. Klick oben im Network-Tab auf "Fetch/XHR"
  2. Jetzt siehst du nur noch API-Aufrufe (AJAX, fetch())
  3. Super für Backend-Debugging – welche Daten werden gesendet/empfangen?

Netzwerk-Bedingungen simulieren

Teste, wie deine Seite bei langsamer Verbindung lädt:

Throttling (Drosselung)

Dropdown oben im Network-Tab:

  • No throttling (normal)
  • Fast 3G (simuliert 3G)
  • Slow 3G (simuliert langsames 3G)
  • Offline (keine Verbindung)
  • Custom (eigene Werte)

Typische Anwendungsfälle

Warum lädt meine Seite so langsam?

  1. Network-Tab öffnen und Seite neu laden
  2. Nach Size sortieren → große Dateien finden
  3. Nach Time sortieren → langsame Requests identifizieren
  4. Waterfall ansehen → blockierende Ressourcen finden
  5. Große Bilder komprimieren, unnötige Requests entfernen

Warum wird meine Datei nicht geladen (404)?

  1. Suche nach roten Einträgen (404 Status)
  2. Klick auf den Request
  3. Prüfe den Pfad - ist er korrekt?
  4. Häufige Fehler: Tippfehler, falscher Pfad, Groß-/Kleinschreibung

Performance

Der Performance-Tab (oder "Leistung") zeigt dir im Detail, was beim Laden und Ausführen deiner Seite passiert - Frame für Frame.

Recording starten

So machst du ein Performance-Recording
1. Performance-Tab öffnen
2. Klick auf Record (roter Punkt) oder Strg+E
3. Interagiere mit deiner Seite (scrollen, klicken, etc.)
4. Klick auf Stop
5. Analyse wird generiert
Was du hier siehst
  • Screenshots: Visuelle Timeline wie die Seite aufgebaut wird
  • FPS-Graph: Frames per Second (sollte bei 60 fps liegen)
  • CPU-Auslastung: Wo die CPU-Zeit hingeht
  • Network: Wann welche Dateien geladen wurden
  • Frames: Einzelne Render-Frames

Wann ist Performance ein Problem?

  • FPS unter 60 → Ruckeln beim Scrollen/Animationen
  • Lange gelbe Balken → JavaScript blockiert zu lange
  • Viele rote Markierungen → Layout Thrashing
  • Lange Ladezeiten → zu viele/große Ressourcen
Tipp

Für die meisten Projekte reicht der Network-Tab. Performance-Profiling brauchst du erst bei komplexeren Apps oder wenn du merkst, dass was ruckelt.

Application / Speicher

Der Application-Tab zeigt dir alle gespeicherten Daten im Browser: Cookies, LocalStorage, Session Storage, Cache und mehr.

Was du hier findest

Cookies

Sieh alle Cookies der aktuellen Domain:

  • Name, Value, Domain, Path
  • Expires (Ablaufdatum)
  • HttpOnly, Secure, SameSite Flags
  • Doppelklick zum Bearbeiten
  • Rechtsklick zum Löschen
Local Storage & Session Storage 
// LocalStorage (bleibt auch nach Browser-Schließung)
localStorage.setItem('name', 'DevPanicZone');
localStorage.getItem('name'); // "DevPanicZone"
localStorage.removeItem('name');
localStorage.clear(); // alles löschen

// SessionStorage (nur für aktuelle Tab-Session)
sessionStorage.setItem('temp', 'data');
sessionStorage.getItem('temp');

Im Application-Tab siehst du alle gespeicherten Key-Value-Paare.

Cache Storage

Hier siehst du gecachte Ressourcen (vor allem bei Service Workers):

  • Welche Dateien sind offline verfügbar?
  • Wie groß ist der Cache?
  • Cache leeren für Testing

Storage komplett leeren

Für frisches Testing kannst du alles löschen:

  1. Application-Tab → "Storage" in der linken Sidebar
  2. "Clear site data" Button
  3. Wähle aus was gelöscht werden soll
  4. Bestätigen

Lighthouse

Lighthouse ist ein automatisches Audit-Tool, das deine Website bewertet und Verbesserungsvorschläge macht.

Was Lighthouse prüft

Die 5 Kategorien
  • Performance: Ladezeiten, First Contentful Paint, Time to Interactive
  • Accessibility: Barrierefreiheit (Kontraste, Alt-Texte, ARIA-Labels)
  • Best Practices: HTTPS, Console-Errors, deprecated APIs
  • SEO: Meta-Tags, robots.txt, strukturierte Daten
  • PWA: Progressive Web App Features (Service Worker, Manifest)
Lighthouse ausführen
1. Inhalt 
1. Lighthouse-Tab öffnen
2. "Analyze page load" klicken
3. Optional: Desktop oder Mobile wählen
4. Warten (dauert ca. 30-60 Sekunden) 
5. Report ansehen

Score verstehen

Jede Kategorie bekommt einen Score von 0-100:

  • 90-100: 🟢 Grün - Sehr gut!
  • 50-89: 🟡 Orange - Verbesserungsbedarf
  • 0-49: 🔴 Rot - Dringend überarbeiten

Realität: 100 Punkte zu erreichen ist schwer und oft auch nicht nötig. 90+ ist ein guter Wert für reale Projekte!

Praktische Tipps

  • Führe Lighthouse im Inkognito-Modus aus (keine Browser-Extensions, die stören könnten)
  • Mobile-Tests sind strenger als Desktop
  • Klick auf jeden Punkt → bekommst genaue Erklärungen und Lösungsvorschläge
  • Speichere Reports und vergleiche sie über Zeit

Responsive Design Mode

Teste, wie deine Website auf verschiedenen Geräten aussieht - ohne 20 echte Geräte zu haben!

Device Toolbar aktivieren
Strg + Shift + M  (Windows/Linux)
Cmd + Shift + M   (Mac)

Oder: Klick auf Handy/Tablet-Icon oben links in DevTools

Was du einstellen kannst

Geräte-Presets

Dropdown oben: Vorgefertigte Geräte wie:

  • iPhone 12, 13, 14, 15, 16
  • Samsung Galaxy S20, S21
  • iPad, iPad Pro
  • Pixel, Nest Hub
  • Responsive (beliebige Größe)
Zusätzliche Optionen
  • Rotation: Portrait ↔ Landscape
  • Device Pixel Ratio: Retina/High-DPI simulieren
  • User Agent: Als anderes Gerät ausgeben
  • Touch: Touch-Events simulieren
  • Show media queries: Deine Breakpoints visualisieren

Eigene Geräte hinzufügen

  1. Klick auf "Edit" im Device-Dropdown
  2. "Add custom device"
  3. Name, Breite, Höhe, Pixel Ratio eintragen
  4. Speichern
Wichtig

Die Simulation ist gut, aber nicht perfekt. Echte Geräte können sich unterschiedlich verhalten. Teste wichtige Features auf echten Geräten!

Weitere nützliche Features

Color Picker

Klick auf eine Farbe im CSS → Color Picker öffnet sich:

  • Farbe visuell auswählen
  • Zwischen HEX, RGB, HSL wechseln
  • Kontrast-Ratio prüfen (für Accessibility)
  • Pipetten-Tool: Farbe von der Seite auswählen

Rulers & Guides

Zeige Lineale und Hilfslinien an:

Strg + Shift + P → "Show rulers"
Oder im Device-Toolbar: "Show rulers" Option

Screenshot machen

Nimm Screenshots direkt aus den DevTools:

  1. Strg + Shift + P (Command Menu öffnen)
  2. Tippe "screenshot"
  3. Wähle:
  • Capture screenshot: Aktueller Viewport
  • Capture full size screenshot: Komplette Seite
  • Capture node screenshot: Nur ausgewähltes Element

Command Menu (Geheimwaffe!)

Das Command Menu ist wie Spotlight/Suche für DevTools:

Strg + Shift + P (Windows/Linux)
Cmd + Shift + P (Mac)

Dann einfach tippen was du suchst:
→ "dark" → Dark Mode umschalten
→ "screenshot" → Screenshot machen
→ "cache" → Cache leeren
→ "javascript" → JavaScript deaktivieren
→ "coverage" → Code Coverage anzeigen
... und viel mehr!

Sensors simulieren

Im "Sensors" Tab kannst du simulieren:

  • Location: GPS-Position (für Geolocation-APIs)
  • Orientation: Gerät drehen/neigen
  • Touch: Touch-Events

Recorder (Chrome)

Zeichne User-Flows auf und spiele sie ab – perfekt für wiederholbare Tests:

  • Klick-Abläufe aufzeichnen
  • Als JSON exportieren
  • Performance während des Flows messen

Best Practices & Tipps

Do
  • DevTools immer offen haben beim Entwickeln - du siehst Fehler sofort
  • Console-Logs entfernen vor dem Live-Gang (oder über Build-Tools)
  • Network-Tab checken bevor du deployest - keine 404s, alles lädt?
  • Lighthouse regelmäßig laufen lassen - fang früh an zu optimieren
  • Mobile-Testing nicht vergessen - die meisten User sind mobil!
  • Breakpoints statt console.log für komplexes Debugging
  • DevTools-Einstellungen erkunden - es gibt SO viel zu entdecken!
Don't
  • Nicht zu viele Tabs offen lassen - kann Browser verlangsamen
  • Keine sensiblen Daten in Console loggen (Passwörter, Tokens)
  • Cache nicht immer deaktiviert lassen - beeinflusst Performance-Tests
  • Lighthouse nicht als absolut betrachten - es sind Vorschläge, keine Gesetze
  • Nicht nur auf Simulationen verlassen - echte Geräte testen ist wichtig
Lern-Tipps
  1. Experimentiere! Die DevTools sind ein Playground - du kannst nichts kaputt machen (Änderungen verschwinden beim Reload)
  2. Schau dir coole Websites an: Inspiziere Seiten, die du toll findest. Wie haben die das gemacht?
  3. Nutze die Docs:
  4. Keyboard Shortcuts lernen: Macht dich viel schneller!
  5. Ein Feature pro Woche: Lerne jede Woche ein neues DevTools-Feature - nach ein paar Monaten bist du Profi!

Wichtige Tastenkombinationen

Allgemeine Shortcuts
╔═══════════════════════════════════════════════════════════╗
║  Aktion              │  Mac            │  Windows/Linux   ║
╠═══════════════════════════════════════════════════════════╣
║  DevTools öffnen     │  Cmd+Option+I   │  F12             ║
║  Console öffnen      │  Cmd+Option+J   │  Ctrl+Shift+J    ║
║  Inspektor           │  Cmd+Option+C   │  Ctrl+Shift+C    ║
║  Command Menu        │  Cmd+Shift+P    │  Ctrl+Shift+P    ║
║  Datei suchen        │  Cmd+P          │  Ctrl+P          ║
║  Text in Dateien     │  Cmd+Shift+F    │  Ctrl+Shift+F    ║
║  Nächster Tab        │  Cmd+]          │  Ctrl+]          ║
║  Vorheriger Tab      │  Cmd+[          │  Ctrl+[          ║
║  Console leeren      │  Cmd+K          │  Ctrl+L          ║
║  Responsive Mode     │  Cmd+Shift+M    │  Ctrl+Shift+M    ║
║  Hard Reload         │  Cmd+Shift+R    │  Ctrl+Shift+R    ║
║  Settings            │  ?+F1           │  F1              ║
╚═══════════════════════════════════════════════════════════╝
Elements/Inspektor
↑ / ↓        → Zwischen Elementen navigieren
← / →        → Element auf/zuklappen
H            → Element verstecken/zeigen
Delete       → Element löschen (temporär)
F2           → HTML als Text bearbeiten
Ctrl+Z       → Letzten Schritt rückgängig
Sources/Debugger
Ctrl+O       → Datei schnell öffnen
F8           → Resume/Pause
F10          → Step over
F11          → Step into
Shift+F11    → Step out
Ctrl+/       → Zeile kommentieren
Pro-Tipp

Drück ? in den DevTools, um alle Shortcuts zu sehen!

Zusammenfassung

Die Browser DevTools sind dein wichtigstes Werkzeug als Web-Developer. Sie helfen dir:

  • HTML & CSS zu verstehen - Inspiziere, experimentiere, lerne
  • Fehler zu finden - Console, Debugger, Breakpoints
  • Performance zu optimieren - Network, Lighthouse, Performance-Tab
  • Responsive zu testen - Device Toolbar, verschiedene Screens
  • Design zu verfeinern - Live CSS-Editing, Color Picker
  • Von anderen zu lernen - Inspiziere Websites, die du bewunderst

Mein Rat: Hab die DevTools immer offen beim Entwickeln. Nach einer Weile werden sie zur zweiten Natur und du fragst dich, wie du jemals ohne sie ausgekommen bist!

Nächste Schritte

  • Öffne DevTools auf dieser Seite und schau dich um
  • Ändere ein paar CSS-Werte live
  • Füge deiner Website einen Console-Begrüßungstext hinzu
  • Mach einen Lighthouse-Test auf einer deiner Seiten
  • Setze einen Breakpoint in deinem JavaScript und teste Debugging
  • Inspiziere eine Website, die du toll findest - wie haben die das gemacht?