DevTools ist nicht nur für Programmierer
Sie haben wahrscheinlich schon von "Developer Tools" (DevTools) gehört und angenommen, das sei etwas nur für Programmierer. Aber die Wahrheit ist: Viele DevTools-Funktionen funktionieren ohne jegliches Programmierwissen. Stellen Sie sich diese Szenarien vor:- Sie öffnen eine Website und die Seite ist leer — Sie wollen wissen, ob die Seite down ist oder es an Ihrem Netzwerk liegt
- Sie füllen ein Formular aus, klicken auf Senden, und nichts passiert — Sie wollen wissen, ob der Button kaputt ist oder der Server es nie erhalten hat
- Sie sehen ein seltsames Layout auf einer Seite — Sie wollen wissen, ob es ein Browser-Problem oder ein Bug im Code der Seite ist
Schritt 1: Wie man DevTools öffnet
Chrome / Edge
Drei Wege, wählen Sie den bequemsten:F12 oder Ctrl + Shift + I (Mac: Cmd + Option + I)Firefox
F12 oder Ctrl + Shift + ISafari
Zuerst das Entwickler-Menü aktivieren: Safari → Einstellungen → Erweitert → "Entwicklermenü in der Menüleiste anzeigen" aktivierenCmd + Option + ISie müssen nur 3 Tabs kennen
DevTools hat ein Dutzend Tabs, aber Nicht-Entwickler brauchen nur diese drei:| Tab | Was es tut | Wofür Sie es nutzen können |
|---|---|---|
| Console | Zeigt die Fehler und Warnungen der Seite | Erkennen, ob der Code der Seite einen Fehler hat |
| Network | Zeigt alle Netzwerkanfragen | Erkennen, ob Bilder/APIs/Ressourcen nicht geladen wurden |
| Elements | Zeigt das HTML und CSS der Seite | Stile und Position eines Elements prüfen |
Der Console-Tab: Rote Fehlermeldungen lesen
Was ist die Console
Die Console ist der "Schwarze Kasten" der Seite. Wenn der Code der Seite einen Fehler hat, protokolliert der Browser ihn hier. Stellen Sie es sich wie eine Warnleuchte am Auto vor — Sie müssen nicht verstehen, wie der Motor funktioniert, aber Sie müssen wissen, welche Leuchte leuchtet.Rot = Fehler, Gelb = Warnung
- 🔴 Rote Meldung: Ein Fehler ist aufgetreten, beachten Sie es
- 🟡 Gelbe Meldung: Eine Warnung, möglicherweise ein Problem, aber nicht fatal
- 🔵 Blaue/weiße Meldung: Gewöhnliches Protokoll, ignorieren OK
Wie man eine Fehlermeldung liest
Nach dem Öffnen der Console sehen Sie möglicherweise roten Text wie diesen:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.jsx:47:18
| Teil | Bedeutung | Worauf Sie achten |
|---|---|---|
TypeError |
Typfehler | Fehlertyp |
Cannot read properties of undefined |
Versuchte, nicht vorhandene Daten zu lesen | Problembeschreibung (einfach übersetzen) |
ProductList.jsx:47:18 |
Wo es fehlschlug: Dateiname Zeile 47, Spalte 18 | Dem Entwickler sagen, wo zu fixen |
Häufige Fehlertypen (übersetzt)
| Englischer Fehler | Deutsche Bedeutung | Mögliche Ursache |
|---|---|---|
TypeError |
Typfehler | Falsches Datenformat; Code erwartete ein Objekt, bekam aber leer |
ReferenceError |
Referenzfehler | Code verwendete eine Variable oder Funktion, die nicht existiert |
SyntaxError |
Syntaxfehler | Falsche Codesyntax, die der Browser nicht parsen kann |
RangeError |
Bereichsfehler | Ein Wert überschritt den erlaubten Bereich |
Network Error |
Netzwerkfehler | Die Anfrage erreichte den Server nie |
404 Not Found |
Nicht gefunden | Die angeforderte Ressource existiert nicht |
500 Internal Server Error |
Interner Serverfehler | Ein Bug im Code des Servers |
Die 5 häufigsten Console-Probleme
1. Leere Seite + TypeError Seite lädt leer, Console zeigt roten TypeError. Meist ein JavaScript-Absturz verhinderte das Rendern. 2. Eine Funktion reagiert nicht + ReferenceError Button klicken, nichts passiert, Console zeigt roten ReferenceError. Meist der zugehörige Code nicht korrekt geladen. 3. Daten nicht angezeigt + TypeError: Cannot read properties of undefined Ein Listen- oder Tabellenbereich ist leer, Console hat diesen Fehler. Meist das Backend lieferte Daten in einem Format, das das Frontend nicht erwartete. 4. Teil der Seite leer + 404-Fehler Einige Bilder oder Komponenten werden nicht angezeigt, Console hat 404. Der Ressourcenpfad ist falsch oder die Datei wurde gelöscht. 5. Sehr langsames Laden + viele gelbe Warnungen Seite lädt langsam, Console hat viele gelbe Warnungen. Möglicherweise zu viele unnötige Ressourcen geladen oder ein Leistungsproblem.Der Network-Tab: Fehlgeschlagene Ressourcenlades
Was ist Network
Der Network-Tab zeichnet jede Netzwerkanfrage auf, die die Seite beim Laden macht — Bilder, CSS, JavaScript, API-Endpunkte, Font-Dateien, alles vom Server abgerufene.Wie man es nutzt
F5)Farbcodierung
| Farbe | Bedeutung |
|---|---|
| Rot | Anfrage fehlgeschlagen (4xx/5xx-Fehler) |
| Grau | Anfrage blockiert oder abgebrochen |
| Andere Farben | Anfrage erfolgreich |
Fokus: Statuscodes
Jede Anfrage hat einen Statuscode — der direkteste Hinweis auf das Problem:| Status | Bedeutung | Was Sie sehen |
|---|---|---|
| 200 | Erfolg | Alles normal |
| 301/302 | Weiterleitung | Zu einer anderen Adresse gesprungen |
| 400 | Ungültige Anfrage | Formulardatenformat falsch |
| 401 | Nicht autorisiert | Benötigt Login, ist aber nicht eingeloggt |
| 403 | Verboten | Keine Berechtigung für diese Ressource |
| 404 | Nicht gefunden | Bild/Seite/API existiert nicht |
| 500 | Interner Serverfehler | Ein Bug im Servercode |
| 502 | Gateway-Fehler | Server überlastet oder in Wartung |
| 503 | Dienst nicht verfügbar | Server kann Anfragen temporär nicht verarbeiten |
Durchgang: "Bild lädt nicht" mit Network diagnostizieren
Img klicken (nur Bilder)- 404 → Bildpfad falsch oder Bild gelöscht
- 500 → Server fehlerte beim Verarbeiten der Bildanfrage
- Keine entsprechende Anfrage → Bild-URL wurde nie angefragt (wahrscheinlich Frontend-Code-Problem)
Durchgang: "Formularabsendung passiert nichts" mit Network diagnostizieren
Der Elements-Tab: Elementstile prüfen
Was ist Elements
Der Elements-Tab zeigt die HTML-Struktur und CSS-Stile der Seite. Sie können ihn nutzen, um Attribute, Stile und Position eines Elements zu prüfen.Nützlichste Funktion: Element untersuchen
Was Nicht-Entwickler damit tun können
Prüfen, warum ein Bild falsch angezeigt wird:- Finden Sie den
<img>-Tag
- Prüfen Sie das
src-Attribut — ist die Bild-URL korrekt?
- Prüfen Sie
widthundheight— sind Dimensionen eingeschränkt?
- Finden Sie das Textelement
- Prüfen Sie die CSS-
overflow-Eigenschaft — ist sie aufhiddengesetzt?
- Prüfen Sie
white-spaceundtext-overflow— begrenzen sie den Zeilenumbruch?
- Finden Sie das Button-Element
- Prüfen Sie CSS-
z-index— wird es von einem anderen Element überdeckt?
- Prüfen Sie
pointer-events— ist Klicken deaktiviert?
- Prüfen Sie
displayundvisibility— ist es verborgen?
Hinweis: Bearbeitungen in Elements sind temporär
Jeder Stil, den Sie im Elements-Tab ändern, kehrt nach dem Aktualisieren der Seite zurück. Es dient nur dem Debuggen und ändert die Website nicht wirklich. Experimentieren Sie frei — Sie können nichts kaputt machen.5 Praxisbeispiele
Fall 1: Leere Seite
Symptom: Website öffnen, Seite ist leer Diagnose:TypeError sehenFall 2: Bild als kaputtes Symbol
Symptom: Ein Bild auf der Seite wird als kaputtes Symbol oder leerer Bereich angezeigt Diagnose:src-Attribut-URL prüfenFall 3: Formularabsendung passiert nichts
Symptom: Formular ausfüllen, Absenden klicken, keine Rückmeldung Diagnose:ReferenceError: submitForm is not defined sehenFall 4: Seite lädt sehr langsam
Symptom: Öffnen der Seite dauert 10+ Sekunden Diagnose:Fall 5: Mobiles Layout kaputt
Symptom: Auf Mobilgerät überlappen Buttons und Text Diagnose:Ctrl + Shift + M drücken, um in den Geräte-Emulationsmodus zu wechseln@media-Regel prüfen — feststellen, dass mobile Anpassung fehltGibt es einen einfacheren Weg?
Wenn das Öffnen von DevTools, das Suchen der Console, das Finden von Network und das Kopieren von Fehlermeldungen immer noch zu viel erscheint — es gibt einen einfacheren Weg. BugCapturer kann das alles automatisch für Sie erledigen. Wenn Sie mit BugCapturer einen Screenshot machen und Feedback senden, erfasst es automatisch:- Konsolenfehler: bis zu 10 Fehler-Level-Protokolle (mit Dateiname und Zeilennummer)
- Fehlgeschlagene Netzwerkanfragen: bis zu 5 Anfragen mit Status ≥ 400 (mit URL, Methode, Statuscode)
- Technische Umgebungsinformationen: URL, Browser, OS, Bildschirmauflösung, Viewport-Größe, DPR