Chrome DevTools verstehen und verwenden

In einer idealen Welt macht ein Webentwickler keine Fehler und schreibt den effizientesten Code und das beste HTML/CSS direkt im ersten Versuch. Bis wir diese Welt entdeckt haben, müssen allerdings die meisten von uns (mal mehr mal weniger) unseren mühevoll geschriebenen JavaScript-Code auf Fehler untersuchen und unsere HTML-Strukturen und CSS-Styles optimieren und korrigieren. Zum Glück gibt es ein Hilfsmittel, von dem wahrscheinlich jeder schon mindestens einmal gehört und die meisten auch schon verwendet haben: die Chrome Developer Tools (DevTools). 

In diesem Kurs lernst du, die DevTools effektiv zu nutzen, um deine Webanwendungen zu debuggen und zu optimieren. Die Chrome DevTools bieten eine Vielzahl von Funktionen, die dir dabei helfen können, Fehler zu finden, die Performance deiner Website zu verbessern und die Benutzerfreundlichkeit und das Aussehen zu optimieren. Sehr viele Funktionen lassen auch mehr oder weniger 1 zu 1 auf die Edge DevTools übertragen und viele Konzepte sind so oder so ähnlich auch in den Entwicklerwerkzeugen von Firefox und Safari verfügbar, so dass du den Kurs auch nutzen kannst, um die Konzepte hinter dem Debugging von Webanwendungen/Webseiten allgemein zu verstehen und somit mit diesem Wissen auch die DevTools der anderen Browser verwenden kannst. 

Kursinhalte:

• Einführung in die Chrome DevTools:

  • Was sind die Chrome DevTools?

  • Wie öffnest du die Chrome DevTools?

  • Überblick über die wichtigsten Funktionen

  • Navigation in den DevTools

• Debugging von HTML und CSS:

  • Untersuchung des DOM-Baums

  • Bearbeiten von HTML und CSS im Live-Modus

  • Debuggen von CSS-Styling

  • Beheben von Layout-Problemen

• Debugging von JavaScript:

  • Laden und Ausführen von JavaScript-Dateien

  • Setzen von Breakpoints und Haltepunkten

  • Schrittweises Durchlaufen von JavaScript-Code

  • Untersuchung von Variablen und Objekten

  • Navigieren im CallStack

• Verwendung der Konsole

  • Konsole öffnen und zur Analyse von Logs nutzen

  • JavaScript-Code in der Konsole ausführen

  • Konsole nutzen, um Elemente auf der Webseite zu manipulieren

  • Logausgaben nutzen, um Code zu analysieren und zu optimieren

• Optimierung der Performance:

  • Analyse von Netzwerkrequests und dabei entstehenden Fehlern

  • Analyse der Seitenladezeit

  • Überwachung der Speichernutzung

  • Identifizierung von Speicherlecks

  • Optimierung der JavaScript-Leistung

  • Analyse der Anwendungsperformance

• Fortgeschrittene Techniken:

  • Das Application-Panel zur Untersuchung von Webanwendungen und Webspeicher (LocalStorage, Indexed DB, Cache, Manifest, Service Worker) verwenden.

  • React-Erweiterung für die DevTools installieren und nutzen

  • Settings zur optimalen Einrichtung der DevTools nutzen