Erstelle deine erste Test-Web-App mit Chrome Developer Tools

In dieser Anleitung wirst du lernen, wie du eine einfache Test-Web-App erstellen kannst, um die ersten Schritte im Umgang mit den Chrome Developer Tools zu erlernen. Wir werden von der Einrichtung des Projekts bis hin zur Ausführung der Anwendung gehen, damit du in der Lage bist, die leistungsstarken Funktionen der Entwicklertools zu nutzen. Egal, ob du bereits Erfahrung hast oder Neuling bist, ist diese Schritt-für-Schritt-Anleitung ideal für dich.

Wichtigste Erkenntnisse

• Du benötigst Node.js und NPM, um das Projekt einzurichten.
• Die Erstellung eines neuen Projekts ist einfach und schnell möglich.
• Die Nutzung von Chrome Developer Tools ermöglicht präzises Debugging deiner Anwendung.

Schritt-für-Schritt-Anleitung

Um deine Test-Web-App zu erstellen, folge diesen einfachen Schritten:

Schritt 1: Installation von Node.js und NPM

Bevor du ein Projekt erstellen kannst, musst du sicherstellen, dass du Node.js und NPM (Node Package Manager) installiert hast. Gehe dazu auf die Website nodejs.org und lade dir die Installer-Version herunter, die für dein Betriebssystem geeignet ist. Nach der Installation kannst du NPM im Terminal überprüfen, indem du den Befehl npm -v eingibst.

Schritt 2: Terminal öffnen und Verzeichnis erstellen

Öffne ein Terminal oder eine Eingabeaufforderung, um deine Test-App zu erstellen. Du musst ein Verzeichnis auswählen, in dem du die App erstellen möchtest. Navigiere in das gewünschte Verzeichnis und gib den folgenden Befehl ein, um ein Unterverzeichnis für das Projekt zu erstellen.

Schritt 3: Projekt mit NPM erstellen

Um ein neues Projekt zu erstellen, verwendest du den Befehl npm create. Du kannst dabei einen Namen für dein Projekt wählen. In unserem Beispiel verwenden wir "Def Tools Test". Gib einfach den Befehl npm create def-tools-test ein und drücke Enter. Es könnte sein, dass du gefragt wirst, ob du ein Paket installieren möchtest; bestätige dies einfach.

Schritt 4: Auswahl des Frameworks

Nach der Erstellung des Projekts wirst du gefragt, welches Framework du verwenden möchtest. Du kannst Optionen wie Vue.js, React oder einfach nur Vanilla JavaScript auswählen. Für diese Anleitung wählen wir Vanilla, um mit reinem JavaScript zu arbeiten.

Schritt 5: Auswahl zwischen TypeScript und JavaScript

Du hast auch die Möglichkeit, zwischen TypeScript und JavaScript zu wählen. Für dieses Tutorial verwenden wir JavaScript, um die Grundlagen leicht verständlich zu halten.

Schritt 6: Installation der Abhängigkeiten

Jetzt ist es an der Zeit, die nötigen Abhängigkeiten zu installieren. Gib im Terminal npm install ein, um die benötigten Module herunterzuladen und auf deinem Projekt zu installieren.

Schritt 7: Projektordner überprüfen

Nach der Installation kannst du dir den neu erstellten Projektordner anschauen. Verwende den Befehl ls, um dir die Dateien anzuzeigen, die installiert wurden.

Schritt 8: Entwicklungsserver starten

Um die Web-App auszuführen, musst du den Entwicklungsserver starten. Gib den Befehl npm run dev ein. Dadurch wird ein lokaler Server gestartet, der deine Anwendung bereitstellt.

Schritt 9: Anwendung im Browser öffnen

Nachdem der Server läuft, findest du eine URL in der Konsole (typischerweise http://localhost:3000). Wenn du bereits Chrome als deinen Standardbrowser hast, kannst du einfach auf den Link klicken. Alternativ kannst du die Adresse kopieren und in die Adresszeile von Chrome einfügen.

Schritt 10: Die Test-Web-App erkunden

Sobald die Anwendung geöffnet ist, siehst du die Benutzeroberfläche, die meist aus einem einfachen „Hello V“ und einem Counter-Button besteht. Wenn du auf den Button klickst, erhöht sich der Zähler. Dies gibt dir eine einfache, aber funktionale Test-App, um die DevTools zu erkunden.

Schritt 11: Nutzung der Chrome Developer Tools

Jetzt ist es an der Zeit, die Chrome Developer Tools zu öffnen. Du kannst die DevTools entweder über das Menü oder durch einen Rechtsklick und „Untersuchen“ öffnen. Während du durch deine Test-Web-App navigierst, kannst du verschiedene Elemente inspizieren, den Code debuggen und die Performance deiner App analysieren.

Zusammenfassung

In dieser Anleitung hast du gelernt, wie du eine einfache Test-Web-App erstellst, um die Vorteile der Chrome Developer Tools zu nutzen. Von der Installation von Node.js und NPM über die Erstellung des Projekts bis hin zur Nutzung der Entwicklertools hast du nun das Wissen, um eigene Anwendungen zu entwickeln und zu debuggen.