Overview

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 FunktionenNavigation in den DevToolsDebugging von HTML und CSS:Untersuchung des DOM-BaumsBearbeiten von HTML und CSS im Live-ModusDebuggen von CSS-StylingBeheben von Layout-ProblemenDebugging von JavaScript:Laden und Ausführen von JavaScript-DateienSetzen von Breakpoints und HaltepunktenSchrittweises Durchlaufen von JavaScript-CodeUntersuchung von Variablen und ObjektenNavigieren im CallStackVerwendung der KonsoleKonsole öffnen und zur Analyse von Logs nutzenJavaScript-Code in der Konsole ausführenKonsole nutzen, um Elemente auf der Webseite zu manipulierenLogausgaben nutzen, um Code zu analysieren und zu optimierenOptimierung der Performance:Analyse von Netzwerkrequests und dabei entstehenden FehlernAnalyse der SeitenladezeitÜberwachung der SpeichernutzungIdentifizierung von SpeicherlecksOptimierung der JavaScript-LeistungAnalyse der AnwendungsperformanceFortgeschrittene 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 nutzenSettings zur optimalen Einrichtung der DevTools nutzen

Skills

Reviews