chrome dev tools kursbild

Lerne in kürzester Zeit das professionelle Arbeiten mit den Chrome Developer Tools

... um so auf deinen Websites und Webanwendungen Fehler zu finden, die Performance zu steigern und die Benutzerfreundlichkeit sowie Optik systematisch zu optimieren.

Jetzt deinen Premium Account aktivieren

Laufzeit des Kurses

ca. 6,5 Stunden

Benötigte Vorkenntnisse

Keine Vorkenntnisse notwendig

Die Chrome Entwickler Tools bieten eine Vielzahl von Funktionen, die dir bei der Entwicklung deiner Website oder Webanwendung dabei helfen, Fehler zu finden, die Performance zu steigern und die Benutzerfreundlichkeit sowie die Optik zu optimieren.

Genauer gesagt wirst du lernen:

  • Alles wichtige über den Aufbau der Chrome Developer Tools
  • Das Script-Debugging über Sources und Console
  • Die Netzwerkanalyse und -Optimierung
  • Die Performance- und Speicheroptimierung und vieles mehr...

All diese Kenntnisse wirst du "hands-on" anhand mehrerer praktischer Übungen erwerben, die im Kurs in regelmäßigen Abständen eingestreut sind.

Wenn du deine Websites und Webanwendungen als zukünftig effizient debuggen und optimieren möchtest, dann ist dieser Kurs perfekt für dich geeignet.

Jetzt deinen Premium Account aktivieren

Inhaltsverzeichnis des Kurses

Modul 1: Einführung

chrome dev tools modul 1

In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs, damit du weißt, was auf dich zukommt. Zudem erhältst du einen ersten Überblick über die Funktionalitäten der Chrome Developer Tools.

Diese Lektionen erwarten dich:

  • [Video 1] Kursübersicht
  • [Video 2] Test-Web-App erstellen
  • [Video 3] Erster Überblick über die Funktionalitäten

Modul 2: Styling/Layout/Aussehen über Elements-Tab

chrome dev tools modul 2

In diesem Modul sehen wir uns das Thema Styling, Layout und Aussehen innerhalb des Elements-Tab an.

Diese Lektionen erwarten dich:

  • [Video 1] DOM-Struktur im Elements-Tab inspizieren
  • [Video 2] Style ändern
  • [Video 3] HTML, DOM bearbeiten
  • [Video 4] Mobile Ansicht Responsive Design testen
  • [Video 5] Praktische Übung: Seitenmenü reparieren
  • [Video 6] Praktische Übung: Layout/Overflow reparieren

Modul 3: Script-Debugging über Sources und Console

chrome dev tools modul 3

In diesem Modul lernst du, wie du Scripts mithilfe von Sources und der Console debuggen kannst.

Diese Lektionen erwarten dich:

  • [Video 1] Vorstellung: Script Debugging und ersten Breakpoint setzen
  • [Video 2] Praktische Übung: Debugging - Fehler beim Löschen aus Array finden
  • [Video 3] Praktische Übung: React-App debuggen
  • [Video 4] Bedingte Breakpoints
  • [Video 5] DOM-Breakpoints
  • [Video 6] Fetch-Breakpoints
  • [Video 7] Exception-Breakpoints
  • [Video 8] Praktische Übung: TypeScript-App debuggen
  • [Video 9] Overrides und Workspace
  • [Video 10] Debugging in Schritten und zu bestimmten Stellen
  • [Video 11] Console: Übersicht, einfache Codeausführung und Ausgaben
  • [Video 12] Zugriff auf DOM-Elemente der Console
  • [Video 13] Snippets und Zeitmessung in der Console
  • [Video 14] Gruppieren und Stylen der Log-Ausgaben
  • [Video 15] Weitere nützliche Console-Methoden

Modul 4: Netzwerkanalyse und -Optimierung

chrome dev tools modul 4

In diesem Modul sehen wir uns den Network-Tab im Detail an. 

Diese Lektionen erwarten dich:

  • [Video 1] Netzwerk: Überblick über die Funktionen
  • [Video 2] Netzwerk: Throttling, Headers und Vorschau

Modul 5: Performance- und Speicheroptimierung

chrome dev tools modul 5

In diesem Modul dreht sich alles um das Thema Performance- und Speicheroptimierung.

Diese Lektionen erwarten dich:

  • [Video 1] Profiler - Performance begutachten und optimieren
  • [Video 2] Mit dem Memory Profiler Speicherverbrauch optimieren

Modul 6: Application-Tab und weitere Tools

chrome dev tools modul 6

In diesem Modul lernst du den Umgang mit dem Application-Tab der Chrome Developer Tools im Detail kennen.

Diese Lektionen erwarten dich:

  • [Video 1] Nützliche Helfer und Rendering Tab
  • [Video 2] Animationen begutachten und justieren
  • [Video 3] Web-App-Ressourcen mit dem Application-Tab untersuchen
  • [Video 4] Extension React Dev Tools verwenden

Modul 7: Einstellungen

chrome dev tools modul 7

In diesem Modul lernst du die wichtigsten Einstellungen der Chrome Developer Tools kennen.

Diese Lektionen erwarten dich:

  • [Video 1] Die wichtigsten Einstellungen der Chrome Dev Tools

Modul 8: DevTools und andere Browser

chrome dev tools modul 8

In diesem Modul sehen wir uns abschließend die Developer Tools von anderen wichtigen Browsern an.

Diese Lektionen erwarten dich:

  • [Video 1] Die MS Edge-DevTools
  • [Video 2] Die Firefox-DevTools
  • [Video 3] Die Safari-DevTools
Jetzt deinen Premium Account aktivieren