Chrome DevTools verstehen und verwenden

Entwicklerfehler gehören dazu: Lerne, deine Webanwendungen mit Chrome DevTools zu debuggen und zu optimieren.

Als Webentwickler ist es normal, dass Code nicht immer perfekt ist. Fehler in HTML, CSS und JavaScript sind unvermeidlich. Aber keine Sorge, es gibt ein mächtiges Werkzeug, um diese zu finden und deine Webseiten zu verbessern: die Chrome DevTools.

Dieser Kurs vermittelt dir die Fähigkeiten, die du brauchst, um die Chrome DevTools effektiv zu nutzen und deine Webanwendungen zu debuggen und zu optimieren. Du lernst, wie du Fehler findest, die Performance deiner Website steigerst und die Benutzerfreundlichkeit verbesserst. Viele der hier gezeigten Techniken sind auch in den Entwicklerwerkzeugen anderer Browser wie Edge, Firefox und Safari anwendbar. Du erhältst ein solides Verständnis der Grundlagen des Web-Debugging, das du auf verschiedene Browser übertragen kannst.

Kursinhalte:

• Einführung in die Chrome DevTools:

  • Was sind Chrome DevTools und warum sind sie wichtig?
  • Wie öffne ich die Chrome DevTools?
  • Überblick über die wichtigsten Funktionen und Bereiche.
  • Effiziente Navigation innerhalb der DevTools.

• Debugging von HTML und CSS:

  • Detaillierte Untersuchung des DOM-Baums (Document Object Model).
  • Live-Bearbeitung von HTML und CSS zur sofortigen Ergebniskontrolle.
  • Debugging von CSS-Styling: Identifizierung und Behebung von Styling-Problemen.
  • Beheben von Layout-Problemen und Anpassung des Designs.

• Debugging von

  • Effizientes Laden und Ausführen von JavaScript-Dateien.
  • Setzen von Breakpoints und Haltepunkten zur gezielten Code-Analyse.
  • Schrittweises Durchlaufen von JavaScript-Code zur Fehlerfindung.
  • Untersuchung von Variablen und Objekten zur Überprüfung von Daten.
  • Navigieren im CallStack zur Verfolgung der Funktionsaufrufe.
  • Nutzung der Konsole: Öffnen und Analysieren von Logs.
  • Ausführen von JavaScript-Code direkt in der Konsole.
  • Manipulation von Webseite-Elementen über die Konsole.
  • Analyse von Logausgaben zur Code-Optimierung.

• Performance-Optimierung:

  • Analyse von Netzwerkrequests und Identifizierung von Performance-Engpässen.
  • Messung der Seitenladezeit und Optimierung für schnellere Ladezeiten.
  • Überwachung der Speichernutzung und Identifizierung von Speicherlecks.
  • Optimierung der JavaScript-Leistung zur Verbesserung der Reaktionsfähigkeit.
  • Analyse der Anwendungsperformance und Identifizierung von Optimierungspotenzialen.

• Fortgeschrittene Techniken:

  • Nutzung des Application-Panels zur Untersuchung von Webanwendungen und Webspeicher (LocalStorage, Indexed DB, Cache, Manifest, Service Worker).
  • Installation und Nutzung der React-Erweiterung für die DevTools.
  • Optimale Einrichtung der DevTools durch Anpassung der Einstellungen.

Mit diesem Kurs wirst du in der Lage sein, die Chrome DevTools zu meistern und deine Webentwicklungsprozesse zu verbessern.