步驟 2：基本導覽 IDE - AWS Cloud9
準備好您的環境撰寫程式碼執行您的程式碼除錯您的程式碼下一步驟

AWS Cloud9 不再提供給新客戶。的現有客戶 AWS Cloud9 可繼續正常使用此服務。了解更多」

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

步驟 2：基本導覽 IDE

(上一個步驟：步驟 1：建立環境)

本教學課程的這一部分將介紹一些可用 AWS Cloud9 IDE來建立和測試應用程式的方法。

  • 您可以使用 editor (編輯器) 視窗來建立和編輯程式碼。

  • 您可以使用 terminal (終端機) 視窗或 Run Configuration (執行組態) 視窗來執行程式碼，無需進行偵錯。

  • 您可以使用 Debugger (除錯器) 視窗來除錯您的程式碼。

使用 JavaScript 和 Node.js 引擎執行這三項工作。如需使用其他程式設計語言的說明，請參閱 AWS Cloud9 教學課程。

準備好您的環境

您需要運行和調試 JavaScript 代碼的大多數工具已經為您安裝。不過，在本教學中，您需要一個額外的 Node.js 套件。安裝方式如下。

  1. 在頂端的功能表列上 AWS Cloud9 IDE，選擇 [視窗]、[新增終端機] 或使用現有的終端機視窗。

  2. 在終端機視窗 (位於的底部的其中一個索引標籤) 中IDE，輸入以下內容。

    npm install readline-sync

    確認結果類似如下：如果同時顯示 npm WARN 訊息，可以忽略。

    + readline-sync@1.4.10
added 1 package from 1 contributor and audited 5 packages in 0.565s
found 0 vulnerabilities

撰寫程式碼

從撰寫一些程式碼開始。

  1. 在選單列上，選擇 File (檔案)、New File (新增檔案)。

  2. 將以下內容添加 JavaScript 到新文件中。

    var readline = require('readline-sync');
var i = 10;
var input;

console.log("Hello Cloud9!");
console.log("i is " + i);

do {
    input = readline.question("Enter a number (or 'q' to quit): ");
    if (input === 'q') {
        console.log('OK, exiting.')
    }
    else{
        i += Number(input);
        console.log("i is now " + i);
    }
} while (input != 'q');

console.log("Goodbye!");

  3. 選擇 File (檔案)、Save (儲存)，然後儲存檔案為 hello-cloud9.js。

執行您的程式碼

接著，您可以執行程式碼。

視您使用的程式設計語言而定，執行程式碼的方式可能有很多種。本教程使用 JavaScript，您可以使用終端窗口或運行配置窗口運行。

使用 Run Configuration (執行組態) 視窗執行程式碼

  1. 在選單列上，選擇 Run (執行)、Run Configurations (執行組態)、New Run Configuration (新增執行組態)。

  2. 在新的 [執行組態] 視窗 (的底部的其中一個索引標籤IDE) 中，在 [命令] 欄位hello-cloud9.js中輸入，然後選擇 [執行]。

  3. 請確定 Run Configuration (執行組態) 提示為作用中，然後在提示時輸入數字來與應用程式互動。

  4. 在 Run Configuration (執行組態) 視窗中檢視您程式碼的輸出。它應類似以下內容。

在執行組態中執行程式碼。
使用終端機視窗執行程式碼

  1. 移至您先前使用的終端機視窗 (或開啟新的終端視窗)。

  2. 在終端機視窗中，於終端機提示下輸入 ls，然後確認您的程式碼檔案位於檔案清單中。

  3. 在提示字元中輸入 node hello-cloud9.js 以啟動應用程式。

  4. 在提示字元中輸入數字，以與應用程式互動。

  5. 在終端機視窗中檢視程式碼的輸出。它應類似以下內容。

在執行組態中執行程式碼。

除錯您的程式碼

最後，您可以使用 Debugger (除錯器) 視窗偵錯您的程式碼。

  1. 選擇第 10 行旁的邊界，將中斷點新增至第 10 行的程式碼 (if (input === 'q'))。該行號旁會顯示紅色圓圈，如下所示。

    將中斷點新增至程式碼。

  2. 選擇右側的偵錯工具按鈕，以開啟偵錯工具視窗IDE。或者，選擇選單列上的 Window (視窗)、Debugger (除錯器)。

    然後在 Debugger (除錯器) 視窗中的 Watch Expressions (監看表達式) 區段選擇 Type an expression here (在此輸入表達式)，以便監看 input 變數。

    除錯器視窗，設定監看

  3. 前往您先前用來執行程式碼的 Run Configuration (執行組態) 視窗。選擇執行。

    或者，您可以開啟新的 Run Configuration (執行組態) 視窗，並開始執行程式碼。從選單欄選擇 Run (執行)、Run With (執行工具)、Node.js 以執行此動作。

  4. 在 Run Configuration (執行組態) 提示字元中輸入數字，並查看程式碼在第 10 行暫停。Debugger (除錯器) 視窗會顯示您在 Watch Expressions (監看運算式) 中輸入的值。

    程式會在中斷點停止

  5. 在 Debugger (除錯器) 視窗中，選擇 Resume (繼續)。這是在上一個螢幕截取畫面中反白顯示的藍色箭頭圖示。

  6. 選擇 Run Configuration (執行組態) 視窗中的 Stop (停止) 以停止除錯器。

    停止除錯器。

下一步驟

步驟 3：清理