Chrome Developer Tools (Tutorial)
Chrome Developer Tools zielführend anwenden (Tutorial)

Chrome Developer Tools zielführend anwenden (Tutorial)

Mit den Chrome Developer Tools kannst du deine Webseiten analysieren und bearbeiten, Performance-Analysen durchführen und deine Seiten für verschiedene Geräte und Bildschirmgrößen testen. Lerne in diesem Tutorial die wichtigsten Funktionen der DevTools kennen. Wie du in HTML, CSS und JavaScript Fehler aufdeckst, Möglichkeiten findest, um die Leistung und den Speicherverbrauch zu optimieren und die Layouts deiner Seiten zu verbessern – Trainer Stephan Haewß zeigt dir an praktischen Beispielen, wie du vorgehst!

  • Lerne die wichtigsten Funktionen der Chrome Developer Tools kennen
  • HTML, CSS, JavaScript-Code debuggen und optimieren
  • Codeabläufe nachvollziehen, Fehler aufdecken und beheben
  • CSS-Animationen, -Styling und -Layouts anpassen
  • Performance und Speicherverbrauch von Webseiten verbessern
  • Für fehlerfreie und schnelle Webseiten mit optimierten Layouts – ein über sechsstündiger Kurs von Trainer Stephan Haewß

Ein sauberer Code trägt wesentlich zur Sichtbarkeit deiner Webseiten bei. Lerne jetzt, wie du die Chrome DevTools nutzt, um deine Seiten zu analysieren und zu optimieren.

Details
  • Inhalt: 6 h Video-Training
  • Lizenz: private und kommerzielle Nutzungsrechte
Kategorien
Webdesign, CMS & Entwicklung
Mit Liebe erstellt von:
Stephan Haewß Stephan Haewß

Einleitung in den Kurs zu den Chrome Developer Tools

Styling, Layout, Aussehen über Elements-Tab

Script-Debugging über Sources und Console

Netzwerk-Analyse und -Optimierung

Performance- und Speicher-Optimierung

Application-Tab und weitere Tools

Einstellungen

DevTools anderer Browser

Details zum Inhalt

Optimiere deine Webseiten mit den Chrome Developer Tools

Eine fehlerfreie Webseite, die superschnell lädt und auf jeder Bildschirmgröße eine gute Figur macht?! Um das zu erreichen, musst du den Code deiner Seiten analysieren und optimieren. Die Chrome Developer Tools eignen sich dafür wunderbar. Mit ihnen deckst du in deinem HTML-, CSS- und JavaScript-Code Fehler auf. Zudem kannst du dir detailliert die Performance, Codeabläufe und den Speicherverbrauch ansehen. Nutze die Erkenntnisse, um deine Seiten zielführend zu bearbeiten und schlussendlich durch Debugging und Optimierung auch die Sichtbarkeit deiner Seiten zu erhöhen.

Wie du die Chrome Developer Tools zielführend anwendest, lernst du in diesem über sechsstündigen Tutorial von Software-Entwickler und Trainer Stephan Haewß. Starte mit den Grundlagen zu den Chrome DevTools und gehe bis hin zu fortgeschrittenen Techniken – für einen sauberen, leistungsstarken Auftritt deiner Seiten!

HTML, CSS, JavaScript – Debugging für saubere, schnelle Webseiten mit optimierten Layouts

Der Kurs beginnt mit einer Einführung in die Chrome Developer Tools, die direkt im Browser verfügbar sind. Du erfährst, was die DevTools sind und wie du sie grundlegend anwenden kannst. Anschließend beschäftigst du dich mit dem Elements-Tab, über den du das Styling, Layout und Aussehen deiner Seiten inspizieren und bearbeiten kannst. Mit den Bereichen Sources und Console führst du ein Script-Debugging durch. Darüber hinaus lernst du, wie du mithilfe der Chrome Developer Tools eine Netzwerk-Analyse sowie Performance- und Speicher-Optimierung erzielst. Abschließend verschaffst du dir einen Überblick über die DevTools anderer Browser. Im Gesamten eignet sich der Kurs somit für alle Webentwickler, die Webseiten unter Verwendung der DevTools von Chrome debuggen und optimieren möchten.

Chrome DevTools zielführend anwenden – die Inhalte des Tutorials im Überblick

  • Einführung in die Chrome DevTools: Der Kurs zeigt dir, wie du die DevTools öffnest, darin navigierst und die wichtigsten Funktionen zur Bearbeitung und Fehlerbehebung von HTML, CSS und JavaScript effizient nutzt.
  • Debugging von HTML und CSS: Wie du mit den Chrome DevTools den DOM-Baum einer Webseite untersuchst, HTML und CSS direkt im Live-Modus bearbeitest und so Layout-Probleme und CSS-Styling-Fehler sofort behebst – optimal für ein schnelles Testen und Anpassen des Designs, bevor Änderungen dauerhaft übernommen werden.
  • Debugging von JavaScript: Erfahre, wie du JavaScript-Dateien laden, Breakpoints setzen und den Code schrittweise durchlaufen lassen kannst. Variablen und Objekte lassen sich dabei in Echtzeit untersuchen, während der CallStack das Zurückverfolgen von Funktionsaufrufen erleichtert – ideal für eine präzise Fehlersuche.
  • Verwendung der Konsole: Die Konsole der Chrome Development Tools ermöglicht das Öffnen und Analysieren von Logs, das Ausführen von JavaScript-Code sowie das direkte Manipulieren von Webseiten-Elementen. Durch gezielte Logausgaben kannst du den Code gründlich analysieren und optimieren, was das Debugging und die Leistungssteigerung erheblich erleichtert.
  • Optimierung der Performance: Überprüfe die Netzwerk-Requests und Ladezeiten, überwache die Speichernutzung und identifiziere Speicherlecks. Durch gezielte Optimierung der JavaScript-Leistung und detaillierte Anwendungsperformance-Analysen lassen sich Ladegeschwindigkeit und Ressourcenmanagement effizient verbessern.
  • Fortgeschrittene Techniken: Das Application-Panel der Chrome DevTools ermöglicht dir den Zugriff auf Webspeicher wie LocalStorage, IndexedDB und Cache, ebenso wie die Verwaltung von Service Workern und Manifests. Außerdem können Erweiterungen, wie die React-DevTools, integriert werden, um reaktive Anwendungen besser zu debuggen. Anpassbare Einstellungen bieten zudem eine optimale Einrichtung der DevTools für individuelle Arbeitsanforderungen.