AWS Cloud9 ist für Neukunden nicht mehr verfügbar. Bestehende Kunden von AWS Cloud9 können den Dienst weiterhin wie gewohnt nutzen. [Weitere Informationen](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/) Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich. # Rundgang durch die AWS Cloud9 IDE Dieses Thema bietet einen grundlegenden Überblick über die AWS Cloud9 integrierte Entwicklungsumgebung (IDE). Um diese Einführung in vollem Umfang zu nutzen, führen Sie die nachfolgenden Schritte nacheinander aus. **Topics** + [Voraussetzungen](#tour-ide-prereqs) + [Schritt 1: Menüleiste](#tour-ide-menu-bar) + [Schritt 2: Dashboard](#tour-ide-dashboard) + [Schritt 3: Umgebungsfenster](#tour-ide-environment) + [Schritt 4: Editor, Registerkarten und Bereiche](#tour-ide-editor) + [Schritt 5: Konsole](#tour-ide-console) + [Schritt 6: Bereich „Open Files“ (Dateien öffnen)](#tour-ide-open-files) + [Schritt 7: Bundsteg](#tour-ide-gutter) + [Schritt 8: Statusleiste](#tour-ide-status-bar) + [Schritt 9: Überblickfenster](#tour-ide-outline) + [Schritt 10: Go-Fenster](#tour-ide-go) + [Schritt 11: Registerkarte „Immediate“ (Direkt)](#tour-ide-immediate) + [Schritt 12: Prozessliste](#tour-ide-process-list) + [Schritt 13: Präferenzen](#tour-ide-preferences) + [Schritt 14: Terminal](#tour-ide-terminal) + [Schritt 15: Debugger-Fenster](#tour-ide-debugger) + [Abschließende Anmerkungen](#tour-ide-cleanup) ## Voraussetzungen Um an dieser Tour teilnehmen zu können, benötigen Sie ein AWS Konto und eine offene AWS Cloud9 Entwicklungsumgebung. Um zu erfahren, wie Sie diese Aufgaben ausführen, befolgen Sie die Schritte unter [Erste Schritte mit AWS Cloud9](tutorials-basic.md). Alternativ können Sie separate verwandte Themen wie [Einrichten AWS Cloud9](setting-up.md) und [Arbeiten mit Umgebungen in AWS Cloud9](environments.md) erkunden. **Warnung** Wenn Sie über eine AWS Cloud9 Entwicklungsumgebung verfügen, kann dies zu Gebühren für Ihr AWS Konto führen. Dies umfasst mögliche Gebühren für Amazon EC2, wenn Sie eine EC2 Umgebung verwenden. Weitere Informationen finden Sie unter [Amazon EC2 – Preise](https://aws.amazon.com/ec2/pricing/). ## Schritt 1: Menüleiste Die *Menüleiste* am rechten oberen Rand der IDE enthält allgemeine Befehle für die Arbeit mit Dateien und Code und für das Ändern von IDE-Einstellungen. Sie können auch eine Vorschau anzeigen und Code aus der Menüleiste ausführen. ![\[Die Menüleiste in der AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-menu-bar.png) Sie können die Menüleiste ausblenden, indem Sie den Pfeil an der Ecke auswählen: ![\[Die Menüleiste in der AWS Cloud9 IDE ausblenden\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-hide-menu-bar.png) Sie können die Menüleiste erneut anzeigen, indem Sie den Pfeil in der Mitte auswählen bzw. dort, wo sich die Menüleiste zuvor befand: ![\[Die Menüleiste wird wieder in der AWS Cloud9 IDE angezeigt\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-show-menu-bar.png) Vergleichen Sie die Ergebnisse mit Folgendem. ![\[Menüleiste in der IDE ein- und AWS Cloud9 ausblenden\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-hide-show-menu-bar.gif) Sie können die IDE verwenden, um mit einer Reihe von Dateien in den folgenden Abschnitten in diesem Tutorial zu arbeiten. Zum Einrichten dieser Dateien wählen Sie **File (Datei)**, **New File (Neue Datei)**. Kopieren Sie dann den folgenden Text in die `Untitled1`-Editor-Registerkarte. ``` fish.txt -------- A fish is any member of a group of organisms that consist of all gill-bearing aquatic craniate animals that lack limbs with digits. They form a sister group to the tunicates, together forming the olfactores. Included in this definition are lampreys and cartilaginous and bony fish as well as various extinct related groups. ``` Um die Datei zu speichern, wählen Sie **File (Datei)**, **Save (Speichern)** aus. Benennen Sie die Datei `fish.txt` und wählen Sie dann **Save (Speichern)** aus. Wiederholen Sie diese Anweisungen und speichern Sie die zweite Datei als `cat.txt` mit dem folgenden Inhalt. ``` cat.txt ------- The domestic cat is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt. ``` Es gibt oft mehrere Möglichkeiten, wie wir Dinge in der IDE machen können. Zum Ausblenden der Menüleiste können Sie beispielsweise **View (Anzeigen)** **Menu Bar (Menüleiste)** anstatt den Pfeil an der Ecke auswählen. Zum Erstellen einer neuen Datei können Sie anstatt **File (Datei), New File (Neue Datei)** auszuwählen `Alt-N` (für Windows/Linux) oder `Control-N` (für MacOS) drücken. Um die Länge dieses Tutorial zu verringern, beschreiben wir nur eine Methode. Wie Sie besser mit der IDE vertraut sind, können Sie experimentieren und die Methode herausfinden, die für Sie am besten funktioniert. ## Schritt 2: Dashboard Das *Dashboard* bietet Ihnen schnellen Zugriff auf Ihre einzelnen Umgebungen. Über das Dashboard können Sie eine Umgebung erstellen, öffnen und deren Einstellungen ändern. Zum Öffnen des Dashboards wählen Sie auf der Menüleiste **AWS Cloud9** **Go To Your Dashboard (Zu Ihrem Dashboard wechseln)** aus. ![\[Das AWS Cloud9 Dashboard öffnen\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-go-dashboard.png) Um die Einstellungen für Ihre Umgebung anzuzeigen, wählen Sie den Titel auf der **my-demo-environment**Karte aus. Um zum Dashboard zurückzukehren, verwenden Sie die Zurück-Schaltfläche Ihres Webbrowsers oder den Navigations-Breadcrumb namens **Environments (Umgebungen)**. Um die IDE für Ihre Umgebung zu **öffnen, wählen Sie „IDE** innerhalb der **my-demo-environment**Karte öffnen“. **Anmerkung** Es kann einen Moment, bis die IDE wieder angezeigt wird. ## Schritt 3: Umgebungsfenster Das Fenster **Environment (Umgebung)** zeigt eine Liste der Ordner und Dateien in Umgebung. Sie können auch verschiedene Arten von Dateien anzeigen, wie z. B. ausgeblendete Dateien. Um das Fenster **Environment** ein- oder auszublenden,wählen Sie die Schaltfläche **Environment**. Zum Ein- oder Ausblenden des Fensters **Environment** (Umgebung) und der Schaltfläche **Environment** (Umgebung) wählen Sie **Window** (Fenster), **Environment** (Umgebung) auf der Menüleiste aus. ![\[Das Umgebungsfenster in der AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-environment-window.png) Um ausgeblendete Dateien ein- bzw. wieder auszublenden, wählen Sie das Zahnradsymbol im Fenster **Environment** und anschließend **Show Hidden Files (Ausgeblendete Dateien anzeigen)**. ![\[Anzeigen von ausgeblendeten Dateien mit dem Fenster „Environment“ (Umgebung)\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-show-hidden-files.png) ## Schritt 4: Editor, Registerkarten und Bereiche Im *Editor* können Sie Aufgaben wie das Schreiben von Code, Ausführen einer Terminalsitzung und Ändern der IDE-Einstellungen ausführen. Jede Instance einer geöffneten Datei, Terminalsitzung usw. wird durch eine *Registerkarte* dargestellt. Registerkarten können in *Bereiche* gruppiert werden. Registerkarten werden am Rand ihres Bereichs angezeigt. ![\[Tabs am Rand eines Fensters in der AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-tab-buttons.png) Um Registerkarten ein- oder auszublenden, wählen Sie **View (Anzeigen)**, **Tab Buttons (Registerkarten-Schaltflächen)** in der Menüleiste aus. Um eine neue Registerkarte zu öffnen, klicken Sie auf das **\$1**-Symbol am Rand der Reihe an Registerkarten. Wählen Sie dann einen der verfügbaren Befehle, z. B. **New File (Neue Datei)**. ![\[Neue Registerkarte mit auszuwählenden Befehlen, z. B. „New File“ (Neue Datei)\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-new-file.png) Zum Anzeigen von zwei Bereichen wählen Sie das Symbol, das wie ein Dropdown-Menü aussieht und sich am Rand der Reihe der Registerkarten befindet. Wählen Sie dann **Split Pane in Two Rows (Bereich in zwei Zeilen teilen)** aus. ![\[Anzeigen von zwei Bereichen durch Aufteilen eines Bereichs in zwei Zeilen\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-split-pane-two-rows.png) Um wieder einen einzelnen Bereich zu erhalten, wählen Sie erneut das Dropdown-Menüsymbol und klicken Sie auf das einzelne viereckige Symbol: ![\[Anzeigen eines einzelnen Bereichs\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-single-pane-view.png) ## Schritt 5: Konsole Die *Konsole* ist ein alternativer Ort für das Erstellen und Verwalten von Registerkarten. Standardmäßig enthält sie eine Terminal-Registerkarte, kann aber auch andere Arten von Registerkarten enthalten. ![\[AWS Cloud9 Konsole\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-console.png) Zum Ein- oder Ausblenden der Konsole wählen Sie **View (Anzeigen)**, **Console (Konsole)** in der Menüleiste aus. Um die Konsole zu erweitern oder zu verkleinern, wählen Sie das Symbol zum Ändern der Größe, das sich am Rand der Konsole befindet. ![\[Erweitern der Größe der Konsolenanzeige\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-console-resize.png) ## Schritt 6: Bereich „Open Files“ (Dateien öffnen) Im Bereich **Open Files (Dateien öffnen)** wird eine Liste aller Dateien angezeigt, die momentan im Editor geöffnet sind. **Open Files (Dateien öffnen)** ist Teil des Fensters **Environment (Umgebung)**. ![\[Bereich „Open Files“ (Dateien öffnen) im Fenster „Environment“ (Umgebung)\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-open-files.png) Zum Ein- oder Ausblenden des Bereichs **Open Files (Dateien öffnen)** wählen Sie **View (Anzeigen)** **Open Files (Dateien öffnen)** in der Menüleiste aus. Um zwischen offenen Dateien zu wechseln, wählen Sie die gewünschte Datei aus der Liste aus. ## Schritt 7: Bundsteg Der *Bundsteg* am Rand jeder Datei im Editor zeigt Dinge wie Zeilennummern und kontextbezogene Symbole bei der Arbeit mit Dateien an. ![\[Gutter in der IDE AWS Cloud9\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-gutter.png) Zum Ein- oder Ausblenden des Bundstegs wählen Sie **View (Anzeigen)**, **Gutter (Bundsteg)** in der Menüleiste aus. ## Schritt 8: Statusleiste Die *Statusleiste* am Rand jeder Datei im Editor zeigt Dinge wie Zeilen- und Zeichennummern, Dateityp-Präferenzen, Leerstellen- und Registerkarten-Einstellungen sowie dazugehörige Editor-Einstellungen. ![\[Statusleiste in der IDE AWS Cloud9\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-status-bar.png) Zum Ausblenden der Statusleiste wählen Sie **View (Anzeigen)**, **Status Bar (Statusleiste)** in der Menüleiste aus. Um zu einer bestimmten Zeilennummer zu wechseln, wählen Sie eine Registerkarte mit der gewünschten Datei aus. Wählen Sie dann in der Statusleiste die Zeilen- und Zeichennummer aus (normalerweise etwas wie **7:45**). Geben Sie eine Zeilennummer ein (z. B. `4`) und drücken Sie `Enter`: ![\[Mithilfe der AWS Cloud9 IDE-Statusleiste zu bestimmten Zeilennummern wechseln\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-go-to-line.png) ![\[Mithilfe der AWS Cloud9 IDE-Statusleiste zu bestimmten Zeilennummern wechseln\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-go-to-line.gif) Um die Dateityp-Präferenzen in der Statusleiste zu ändern, wählen Sie einen anderen Dateityp aus. Wählen Sie beispielsweise für **cat.txt** **Ruby** aus, um die Syntaxfarbe zu ändern. Um zu Nur-Text-Farben zurückzukehren, wählen Sie **Plain Text (Nur-Text)** aus: ![\[Ändern der Dateitypeinstellungen in der AWS Cloud9 IDE-Statusleiste\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-text-color.png) ![\[Änderung der Dateitypeinstellungen in der AWS Cloud9 IDE-Statusleiste\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-text-color.gif) ## Schritt 9: Überblickfenster Sie können das Fenster **Outline (Überblick)** verwenden, um schnell zu einem bestimmten Dateispeicherort zu gelangen. Zum Ein- oder Ausblenden des Fensters **Outline** (Überblick) und der Schaltfläche **Outline** (Überblick) wählen Sie **Window** (Fenster), **Outline** (Überblick) in der Menüleiste aus. Wenn Sie wissen möchten, wie das Fenster **Outline (Überblick)** funktioniert, erstellen Sie eine Datei mit dem Namen `hello.rb`. Kopieren Sie den folgenden Code in die Datei und speichern Sie sie. ``` def say_hello(i) puts "Hello!" puts "i is #{i}" end def say_goodbye(i) puts "i is now #{i}" puts "Goodbye!" end i = 1 say_hello(i) i += 1 say_goodbye(i) ``` Um den Inhalt des Fensters **Outline (Überblick)** ein- oder auszublenden, klicken Sie auf die Schaltfläche **Outline (Überblick)**. Wählen Sie dann im Fenster **Outline (Überblick)** **say\$1hello(i)** und anschließend **say\$1goodbye(i)** wie folgt aus. ![\[Gliederungsfenster in AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-outline.png) ![\[Gliederungsfenster in AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-outline.gif) ## Schritt 10: Go-Fenster Sie können das **Go-** Fenster verwenden, um eine Datei im Editor zu öffnen, um zur Definition eines Symbols zu gehen, um einen Befehl auszuführen oder um im Editor zu einer Zeile in der aktiven Datei zu gehen. ![\[Go-Fenster.\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-go-window-first.png) Um das **Go**-Fenster einzublenden, klicken Sie auf die Schaltfläche **Go** (das Lupensymbol). Zum Ein- oder Ausblenden des Fensters **Go** und der Schaltfläche **Go** wählen Sie **Window** (Fenster), **Go** in der Menüleiste aus. Wenn das **Go** -Fenster geöffnet ist, haben Sie folgende Möglichkeiten: + Geben Sie einen Schrägstrich (`/`) ein, gefolgt von einem Teil oder dem gesamten Dateinamen. Wählen Sie in der Liste der angezeigten übereinstimmenden Dateien eine Datei aus, um sie im Editor zu öffnen. Wenn Sie beispielsweise `/fish` eingeben, wird `fish.txt` aufgelistet, wenn Sie `/.txt` eingeben, wird `fish.txt` und `cat.txt` aufgelistet. **Anmerkung** Die Dateisuche ist nur auf nicht versteckte Dateien und Ordner im Fenster **Environment (Umgebung)** beschränkt. + Geben Sie ein et-Symbol (`@`) gefolgt vom Namen eines Symbols ein. Wählen Sie in der Liste der angezeigten übereinstimmenden Symbole ein Symbol aus, um es im Editor aufzurufen. Wenn beispielsweise die Datei `hello.rb` geöffnet und im Editor aktiv ist, geben Sie `@hello` ein, um `say_hello(i)` aufzulisten, oder geben Sie `@say` ein, um `say_hello(i)` und `say_goodbye(i)` aufzulisten. **Anmerkung** Wenn die aktive Datei im Editor Teil eines unterstützten Sprachprojekts ist, wird die Symbolsuche auf das aktuelle Projekt ausgedehnt. Andernfalls wird die Symbolsuche nur auf die aktive Datei im Editor beschränkt. Weitere Informationen finden Sie unter [Verbesserter TypeScript Support und erweiterte Funktionen](projects.md). + Geben Sie einen Punkt (`.`) gefolgt vom Namen eines Befehls ein. Wählen Sie aus der Liste der angezeigten Befehle einen Befehl aus, um ihn auszuführen. Wenn Sie beispielsweise `.closetab` eingeben und dann `Enter` drücken, wird die aktuelle Registerkarte im Editor geschlossen. Eine Liste der verfügbaren Befehle finden Sie unter [Befehlsreferenz für die AWS Cloud9 IDE](commands.md). + Geben Sie einen Doppelpunkt (`:`) gefolgt von einer Zahl ein, um zu dieser Zeilennummer in der aktiven Datei im Editor zu gelangen. Wenn beispielsweise die Datei `hello.rb` geöffnet und im Editor aktiv ist, geben Sie `:11` ein, um zu Zeile 11 in dieser Datei zu gelangen. ![\[Gehe zum Fenster in der AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-go-window.png) Um die Tastenbelegungen für jede dieser Aktionen basierend auf dem aktuellen Tastaturmodus und dem Betriebssystem anzuzeigen, lesen Sie die einzelnen verfügbaren **Go To (Gehe zu)**-Befehle im **Go**-Menü in der Menüleiste. ## Schritt 11: Registerkarte „Immediate“ (Direkt) Auf **der** Registerkarte „Direkt“ können Sie kleine Codefragmente testen. JavaScript Wenn Sie wissen möchten, wie die Registerkarte **Immediate** (Direkt) funktioniert, führen Sie die folgenden Schritte aus. 1. Öffnen Sie eine Registerkarte **Immediate (Direkt)**, indem Sie **Window (Fenster)**, **New Immediate Window (Neues direktes Fenster)** auf der Menüleiste auswählen. 1. Führen Sie in der Registerkarte **Immediate** (Direkt) Code aus. Um dies zu versuchen, geben Sie den folgenden Code in das Fenster ein und drücken Sie `Shift-Enter` nach der Eingabe von Zeile 1 und erneut nach der Eingabe von Zeile 2. Drücken Sie `Enter` nach Zeile 3. (Wenn Sie `Enter` anstatt `Shift-Enter` nach der Eingabe von Zeile 1 oder Zeile 2 drücken, wird der Code früher als beabsichtigt ausgeführt.) ``` for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line. console.log(i) // Press Shift-Enter after typing this line. } // Press Enter after typing this line. The numbers 0 to 10 will be printed. ``` ![\[Ausführen von Code in der Registerkarte „Immediate“ (Direkt)\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-immediate.png) ## Schritt 12: Prozessliste Die **Process List (Prozessliste)** zeigt alle laufenden Prozesse. Sie können Prozesse beenden oder sogar zwangsweise beenden, die Sie nicht mehr ausführen möchten. Wenn Sie wissen möchten, wie das Fenster **Process List** (Prozessliste) funktioniert, führen Sie die folgenden Schritte aus. 1. Zeigen Sie die **Process List (Prozessliste)** durch Auswahl von **Tools**, **Process List (Prozessliste)** auf der Menüleiste an. 1. Suchen Sie einen Prozess. Geben Sie in der **Process List (Prozessliste)** den Namen des Prozesses ein. 1. Beenden Sie einen Prozess stoppen oder erzwingen Sie die Beendigung. Wählen Sie den Prozess in der Liste der Prozesse aus und klicken Sie dann auf **Kill (Beenden)** oder **Force Kill (Beenden erzwingen)**. ![\[Prozessliste in der IDE AWS Cloud9\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-process-list.png) ## Schritt 13: Präferenzen Zu den *Preferences (Präferenzen)* gehören die folgenden Einstellungen. + Einstellungen nur für die aktuelle Umgebung, zum Beispiel ob im Editor weiche Registerkarten verwendet werden, welche Dateitypen ignoriert werden sowie Verhalten für Codevervollständigungen für Sprachen, wie PHP und Python. + Ihre Benutzereinstellungen für jede Ihrer Umgebungen, wie z. B. Farben, Schriftarten und Editorverhaltensweisen. + Ihre Tastenzuordnungen, z. B., welche Tastenkombinationen Sie für die Arbeit mit Dateien und dem Editor bevorzugen. + Das allgemeine Thema der IDE. Zum Anzeigen von Einstellungen wählen Sie **AWS Cloud9**, **Preferences** (Einstellungen) auf der Menüleiste aus. Es wird etwa Folgendes angezeigt. ![\[Einstellungen in der AWS Cloud9 IDE anzeigen\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-preferences.png) ## Schritt 14: Terminal Sie können eine oder mehrere *Terminal*sitzungen in der IDE ausführen. Um eine Terminalsitzung zu starten, wählen Sie in der Menüleiste **Window (Fenster)**, **New Terminal (Neues Terminal)**. Oder wählen Sie das "Plus"-Symbol neben den Konsolen-Registerkarten und dann **New Terminal (Neues Terminal**) aus. Sie können versuchen, einen Befehl im Terminal auszuführen. Geben Sie im Terminal beispielsweise `echo $PATH` ein und drücken Sie anschließend `PATH`, um den Wert der `Enter`-Umgebungsvariablen auszugeben. Sie können auch versuchen, zusätzliche Befehle auszuführen. Versuchen Sie beispielsweise Befehle wie Folgende: + ** `pwd` ** , um den Pfad in das aktuelle Verzeichnis zu drucken. + **`aws --version`**um Versionsinformationen über die zu drucken AWS CLI. + ** `ls -l` **, um Versionsinformationen über das aktuelle Verzeichnis zu drucken. ![\[Verwenden des Terminals in der AWS Cloud9 IDE\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-terminal.gif) ## Schritt 15: Debugger-Fenster Sie können das Fenster **Debugger** verwenden, um Ihren Code zu debuggen. Sie können beispielsweise Schritt für Schritt durch das Ausführen Ihres Codes gehen, die Werte der Variablen im Zeitverlauf anzeigen und den Aufruf-Stack erkunden. **Anmerkung** Dieses Verfahren ähnelt [Schritt 2: Grundlegende Einführung in die IDE](tutorials-basic.md#tutorial-tour-ide) aus einem der [grundlegenden IDE-Tutorials](tutorials-basic.md). Zum Ein- und Ausblenden des Fensters **Debugger** und der Schaltfläche **Debugger** wählen Sie **Window** (Fenster), **Debugger** in der Menüleiste aus. In diesem Tutorial können Sie mit dem **Debugger-Fenster** und etwas JavaScript Code experimentieren, indem Sie wie folgt vorgehen. 1. Überprüfen Sie die Node.js-Installation in Ihrer Umgebung, indem Sie den folgenden Befehl in einer Terminalsitzung ausführen: **`node --version`**. Wenn Node.js installiert ist, wird die Versionsnummer von Node.js in der Ausgabe angezeigt, und Sie können mit Schritt 3 dieses Verfahrens fortfahren („ JavaScript Code schreiben...“). 1. Wenn Sie Node.js installieren müssen, gehen Sie wie folgt vor. 1. Führen Sie nacheinander die folgenden beiden Befehle aus, um sicherzustellen, dass Ihre Umgebung über die neuesten Updates verfügt, und laden Sie dann Node Version Manager (nvm) herunter. (nvm ist ein einfaches Bash-Shell-Skript, das für die Installation und Verwaltung von Node.js nützlich ist. Weitere Informationen finden Sie unter [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md) unter GitHub.) Für Amazon Linux: ``` sudo yum -y update curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash ``` Für Ubuntu Server: ``` sudo apt update curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash ``` 1. Verwenden Sie einen Texteditor, um Ihre Shell-Profildatei zu aktualisieren (z. B. `~/.bashrc`), damit nvm geladen werden kann. Wählen Sie beispielsweise im Fenster **Environment (Umgebung)** der IDE das Zahnradsymbol und dann die Option **Show Home in Favorites (Startseite in Favoriten anzeigen)** aus. Wiederholen Sie diesen Schritt und wählen Sie auch die Option **Show Hidden Files (Ausgeblendete Dateien anzeigen)** aus. 1. Öffnen Sie die `~/.bashrc` Datei. 1. Geben oder fügen Sie den folgenden Code am Ende der Datei ein, um das Laden von nvm zu ermöglichen. Für Amazon Linux: ``` export NVM_DIR="/home/ec2-user/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm. ``` Für Ubuntu Server: ``` export NVM_DIR="/home/ubuntu/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm. ``` 1. Speichern Sie die Datei. 1. Schließen Sie diese Terminalsitzung und starten Sie eine neue. Führen Sie dann den folgenden Befehl aus, um die neueste Version von Node.js zu installieren. ``` nvm install node ``` 1. Schreiben Sie JavaScript Code zum Debuggen. Erstellen Sie beispielsweise eine Datei, fügen Sie den folgenden Code zur Datei hinzu und speichern Sie sie unter `hello.js`. ``` var i; i = 10; console.log("Hello!"); console.log("i is " + i); i += 1; console.log("i is now " + i); console.log("Goodbye!"); ``` 1. Fügen Sie einige Haltepunkte zum Code hinzu. Wählen Sie zum Beispiel im Bundsteg den Rand neben den Zeilen 6 und 10. Ein roter Kreis wird neben den einzelnen Zeilennummern angezeigt: ![\[Hinzufügen von Haltepunkten zu Code im Debugger-Fenster\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-breakpoints.png) 1. Jetzt sind Sie bereit, den Code zu debuggen JavaScript . Führen Sie hierzu die folgenden Schritte aus: 1. Um den Inhalt des **Debugger**-Fensters ein- oder auszublenden, wählen Sie die Schaltfläche **Debugger** aus, wie im nächsten Schritt dargestellt. 1. Sehen Sie sich den Wert der Variable mit der Bezeichnung `i` an, während der Code ausgeführt wird. Klicken Sie im Fenster **Debugger** für **Watch Expressions (Überwachungsausdrücke)** auf die Option **Type an expression here (Einen Ausdruck hier eingeben)**. Geben Sie den Buchstaben `i` ein und drücken Sie `Enter`: ![\[Debugger-Fenster\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-watch-expression.png) 1. Beginnen Sie mit dem Ausführen des Codes. Wählen Sie **Run (Ausführen)**, **Run With (Ausführen mit)**, **Node.js** wie folgt: ![\[Debugger-Fenster\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-run-with.png) 1. Der Code stoppt das Ausführen auf Zeile 6. Das Fenster **Debugger** zeigt den Wert von `i` unter **Watch Expressions (Überwachungsausdrücke)** an, der derzeit `10` ist. ![\[Debugger-Fenster\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-breakpoint-hit.png) 1. Wählen Sie im Fenster **Debugger** die Option **Fortsetzen** aus, welche das blaue Dateisymbol ist. ![\[Fortsetzen des Debuggings im Debugger-Fenster\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-resume.png) 1. Der Code stoppt das Ausführen auf Zeile 10. Das Fenster **Debugger** zeigt nun den neuen Wert für `i` an, der aktuell `11` ist. 1. Wählen Sie **Resume (Fortsetzen)** erneut. Der Code wird bis zum Ende ausgeführt. Die Ausgabe wird in die Registerkarte **hello.js** der Konsole gedruckt: ![\[hello.js-Registerkarte mit Debug-Ausgabe\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-debugger-output.png) Vergleichen Sie die Ergebnisse mit Folgendem. ![\[Verwenden des Debuggers\]](http://docs.aws.amazon.com/de_de/cloud9/latest/user-guide/images/ide-debugger.gif) ## Abschließende Anmerkungen **Warnung** Denken Sie daran, dass eine AWS Cloud9 Entwicklungsumgebung zu Gebühren für Ihr AWS Konto führen kann. Dies umfasst mögliche Gebühren für Amazon EC2, wenn Sie eine EC2 Umgebung verwenden. Weitere Informationen finden Sie unter [Amazon EC2 – Preise](https://aws.amazon.com/ec2/pricing/). Im übergeordneten Abschnitt (*[Arbeiten mit der IDE](ide.md)*) finden Sie weitere interessante Themen. Wenn Sie jedoch mit dem Besuch der AWS Cloud9 IDE fertig sind und die Umgebung nicht mehr benötigen, sollten Sie sie und die zugehörigen Ressourcen löschen, wie unter beschrieben[Löschen einer Umgebung](delete-environment.md).