必要條件步驟 1：選單列步驟 2：儀表板步驟 3：環境視窗步驟 4：編輯器、標籤和窗格步驟 5：主控台步驟 6：開啟檔案區段步驟 7：裝訂邊步驟 8：狀態列步驟 9：大綱視窗步驟 10：執行視窗步驟 11：即時運算標籤步驟 12：程序清單步驟 13：偏好設定步驟 14：終端機步驟 15：除錯器視窗結論

導覽 AWS Cloud9 IDE

本主題提供 AWS Cloud9 整合式開發環境（）的基本導覽IDE。若要充分利用此導覽，請依序遵循以下顯示的步驟。

主題

必要條件
步驟 1：選單列
步驟 2：儀表板
步驟 3：環境視窗
步驟 4：編輯器、標籤和窗格
步驟 5：主控台
步驟 6：開啟檔案區段
步驟 7：裝訂邊
步驟 8：狀態列
步驟 9：大綱視窗
步驟 10：執行視窗
步驟 11：即時運算標籤
步驟 12：程序清單
步驟 13：偏好設定
步驟 14：終端機
步驟 15：除錯器視窗
結論

必要條件

若要進行此導覽，您必須擁有 AWS 帳戶和開放 AWS Cloud9 開發環境。若要了解如何執行這些作業，您可以遵循 AWS Cloud9入門中的步驟。或者，您可以探索個別的相關主題，例如設定 AWS Cloud9 和在中使用環境 AWS Cloud9。

警告

擁有 AWS Cloud9 開發環境可能會導致 AWS 您的帳戶產生費用。EC2 如果您使用EC2環境，這些包括 Amazon 的可能費用。如需詳細資訊，請參閱 Amazon EC2 Pricing 。

功能表列 位於的頂端，IDE包含使用檔案和程式碼以及變更IDE設定的一般命令。您也可以從選單列預覽和執行程式碼。

您可以選擇選單列邊緣的箭頭來隱藏選單列，如下所示。

您可以從選單列稍早所在的位置中間選擇箭頭來再次顯示選單列，如下所示。

將您的結果與下列項目比較。

您可以使用 IDE來處理本教學課程接下來幾個章節中的一組檔案。若要設定這些檔案，請選擇 File (檔案)、New File (新增檔案)。

接下來，將下列文字複製到 Untitled1 編輯器標籤。


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.

若要儲存檔案，請選擇 File (檔案)、Save (儲存)。將檔案命名為 fish.txt，然後選擇 Save (儲存)。

重複這些說明，將第二個檔案儲存為 cat.txt，其中包含下列內容。


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.

在中，通常有多種方法可以執行任務IDE。例如，若要使用選擇邊緣箭頭以外的方法來隱藏選單列，您可以選擇 View (檢視)、Menu Bar (選單列)。若要使用選擇 File, New File(檔案、新增檔案) 以外的方法來建立新檔案，您可以按下 Alt-N (適用於 Windows/Linux) 或 Control-N (適用於 MacOS)。為縮減此教學的長度，我們只描述一種工作方式來作業。隨著您對感到更自在IDE，請隨時嘗試並找出最適合您的方式。

步驟 2：儀表板

「儀表板」可讓您快速存取您的每個環境。您可以從儀表板中建立、開啟和變更環境的設定。

若要開啟儀表板，請在選單列上選擇 AWS Cloud9、Go To Your Dashboard (移至儀表板)。

若要檢視環境的設定，請在my-demo-environment卡片內選擇標題。若要返回儀表板，請使用 Web 瀏覽器的返回按鈕或名為 Environments (環境) 的頁面導覽路徑。

若要針對您的環境開啟 IDE ，請選擇my-demo-environment卡片內部的開啟IDE。

注意

再次IDE顯示可能需要一些時間。

步驟 3：環境視窗

Environment (環境) 視窗顯示您在環境中的資料夾和檔案清單。您也可以顯示不同類型的檔案，例如隱藏檔。

若要顯示或隱藏 Environment (環境) 視窗，請選擇 Environment (環境) 按鈕。

若要顯示或隱藏 Environment (環境) 視窗和 Environment (環境) 按鈕，請選擇選單列上的 Window (視窗)、Environment (環境)。

若要顯示或隱藏檔案，請在 Environment (環境) 視窗中選擇齒輪圖示，然後選擇 Show Hidden Files (顯示隱藏的檔案)。

步驟 4：編輯器、標籤和窗格

編輯器可讓您執行寫入程式碼、執行終端機工作階段和變更IDE設定等操作。每個執行個體 (開啟檔案、終止工作階段等等) 都由「標籤」表示。標籤可以分組成「窗格」。標籤顯示在其窗格的邊緣。

若要顯示或隱藏標籤，請選擇選單列上的 View (檢視)、Tab Buttons (標籤按鈕)。

若要開啟新標籤，請選擇標籤列邊緣的 + 圖示。然後選擇一項可用的命令，例如 New File (新增檔案)，如下所示。

若要顯示兩個窗格，請從標籤列邊緣選擇看起來像是下拉式選單的圖示。然後選擇 Split Pane in Two Rows (將窗格分割為兩列)，如下所示。

若要返回單一窗格，請再次選擇下拉式選單圖示，然後選擇單一方形圖示，如下所示。

步驟 5：主控台

主控台是建立和管理標籤的替代位置。根據預設，它包含 Terminal (終端機) 標籤，但也可以包含其他類型的標籤。

若要顯示或隱藏主控台，請選擇選單列上的 View (檢視)、Console (主控台)。

若要擴展或縮小主控台，請選擇主控台邊緣的調整大小圖示，如下所示。

步驟 6：開啟檔案區段

Open Files (開啟檔案) 區段顯示編輯器中目前已開啟之所有檔案的清單。Open Files (開啟檔案) 是 Environment (環境) 視窗的一部分。

若要開啟或隱藏 Open Files (開啟檔案) 區段，請選擇選單列上的 View (檢視)、Open Files (開啟檔案)。

若要在開啟的檔案之間切換，請從清單中選擇關注的檔案。

步驟 7：裝訂邊

裝訂邊位於編輯器中每個檔案的邊緣，在使用檔案時會顯示行號和關聯的符號等內容。

若要顯示或隱藏裝訂邊，請選擇選單列上的 View (檢視)、Gutter (裝訂邊)。

步驟 8：狀態列

狀態列位於編輯器中每個檔案的邊緣，顯示行數和字元數、檔案類型偏好設定、空格和標籤設定以及相關的編輯器設定。

若要顯示或隱藏狀態列，請選擇選單列上的 View (檢視)、Status Bar (狀態列)。

若要移至特定行號，請選擇含有關注檔案的標籤。然後，在狀態列中選擇行號和字元號碼 (看起來像是 7:45)。請輸入行號 (如 4)，然後按下 Enter，如下所示。

若要變更檔案類型偏好設定，請在狀態列中選擇不同的檔案類型。例如，為 cat.txt 選擇 Ruby 以查看語法色彩變更。若要返回純文字色彩，請選擇 Plain Text (純文字)，如下所示。

步驟 9：大綱視窗

您可以使用 Outline (大綱) 視窗快速移至特定檔案的位置。

若要顯示或隱藏 Outline (大綱) 視窗和 Outline (大綱) 按鈕，請在選單列上選擇 Window (視窗)、Outline (大綱)。

若要查看 Outline (大綱) 視窗的運作方式，請建立一個名為 hello.rb 的檔案。將以下程式碼複製到檔案，然後儲存進行。


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)

若要顯示或隱藏 Outline (大綱) 視窗的內容，請選擇 Outline (大綱) 按鈕。

在 Outline (大綱) 視窗中選擇 say_hello(i)，然後選擇 say_goodbye(i)，如下所示。

步驟 10：執行視窗

您可以使用 Go (執行) 視窗在編輯器中開啟檔案、移至符號的定義、執行命令，或移至編輯器之作用中檔案中的命令列。

若要顯示 Go (執行) 視窗的內容，請選擇 Go (執行) 按鈕 (放大鏡圖示)。

若要顯示或隱藏 Go (執行) 視窗和 Go (執行) 按鈕，請在選單列上選擇 Window (視窗)、Go (執行)。

在 Go (執行) 視窗開啟時，您可以：

輸入正斜線 (/)，隨後跟著部分或所有檔案名稱。在顯示的相符的檔案清單中，選擇要在編輯器中開啟的檔案。例如，輸入 /fish 清單 fish.txt，同時輸入 /.txt 清單 fish.txt 和 cat.txt。

注意
檔案搜尋範圍僅限於 Environment (環境) 視窗中的非隱藏檔案和非隱藏資料夾。
輸入 @ 符號 (@)，隨後跟著符號的名稱。在顯示的相符的符號清單中，選擇要在編輯器中前往的符號。例如，在編輯器中的 hello.rb 檔案在開啟和作用中狀態時，輸入 @hello 以列出 say_hello(i)，或輸入 @say 以同時列出 say_hello(i) 和 say_goodbye(i)。

注意
如果編輯器中作用中的檔案屬於受支援語言專案的一部分，那麼符號搜尋範圍僅限於目前的專案。否則，符號搜尋範圍只限於編輯器中的作用中檔案。如需詳細資訊，請參閱增強的 TypeScript 支援和功能。
輸入點 (.)，隨後跟著命令的名稱。在顯示的命令清單中，選擇命令來執行。例如，輸入 .closetab，然後按 Enter 關閉編輯器目前的標籤。如需可用命令的清單，請參閱的命令參考 AWS Cloud9 IDE。
Type 冒號 (:)，隨後跟著要前往之編輯器作用中檔案的行號數字。例如，編輯器之 hello.rb 檔案在開啟和作用中狀態時，輸入 :11 即可前往該檔案的第 11 行。

若要根據目前的鍵盤模式和作業系統查看上述個別動作的按鍵繫結關係，請在選單列的 Go (執行) 選單中查看個別可用的 Go To (前往) 命令。

步驟 11：即時運算標籤

立即索引標籤可讓您測試小程式碼片段 JavaScript。若要查看 Immediate (即時運算) 標籤的運作方式，請執行下列動作。

請在狀態列上選擇 Window (視窗)、New Immediate Window (新增即時運算視窗) 以開啟 Immediate (即時運算) 標籤。
在 Immediate (即時運算) 標籤中執行一些程式碼。若要嘗試，請將下列程式碼輸入視窗中，在輸入行 1 之後和行 2 之後各按下 Shift-Enter。在行 3 之後按下 Enter。(如果您在輸入行 1 或行 2 之後按下 Enter 而不是 Shift-Enter，程式碼會比您希望的還更早執行)。
```
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.
```

步驟 12：程序清單

Process List (程序清單) 顯示所有執行中的程序。您可以停止或甚至強制停止您不想再執行的程序。若要查看 Process List (程序清單) 視窗的運作方式，請執行下列動作。

請在選單列上選擇 Tools (工具)、Process List (程序清單) 來顯示 Process List (程序清單)。
尋找程序。請在 Process List (程序清單) 中輸入程序名稱。
停止或強制停止程序。在程序清單中選擇程序，然後選擇 Kill (終止) 或 Force Kill (強制終止)。

步驟 13：偏好設定

「偏好設定」包含下列設定。

僅限目前環境的設定，例如是否在編輯器中使用軟索引標籤、要忽略的檔案類型，以及語言的程式碼完成行為，例如 PHP和 Python。
您在每個環境中的使用者設定，例如色彩、字型和編輯器行為。
您的按鍵繫結關係，例如您希望使用哪些快速鍵組合來使用檔案和編輯器。
IDE的整體主題。

若要顯示偏好設定，請在選單列上選擇 AWS Cloud9、Preferences (偏好設定)。會顯示類似下列內容。

步驟 14：終端機

您可以在中執行一或多個終端機工作階段IDE。若要啟動終端機工作階段，請在選單列上選擇 Window (視窗)、New Terminal (新增終端機)。或者，選擇 Console (主控台) 標籤旁的「plus」圖示，然後選擇 New Terminal (新增終端機)。

您可以嘗試在終端機執行命令。例如，在終端機輸入 echo $PATH，然後按下 Enter 來列印 PATH 環境變數的值。

您也可以嘗試執行額外的命令。例如，請嘗試如下命令。

pwd 列印目前目錄的路徑。
aws --version 列印有關的版本資訊 AWS CLI。
ls -l 列印關於目前目錄的資訊。

步驟 15：除錯器視窗

您可以使用 Debugger (除錯器) 視窗來除錯您的程式碼。例如，您可以逐一執行部分程式碼、隨時間觀察變數的值、探索呼叫堆疊。

注意

此程序類似於步驟 2：基本導覽 IDE任一基本IDE教學課程。

若要顯示或隱藏 Debugger (除錯器) 視窗和 Debugger (除錯器) 按鈕，請在選單列上選擇 Window (視窗)、Debugger (除錯器)。

在本教學課程中，您可以執行下列動作來實驗偵錯工具視窗和一些 JavaScript 程式碼。

透過在終端機工作階段執行下列命令，藉此在環境中檢查 Node.js 安裝：node --version。如果已安裝 Node.js，Node.js 版本編號會顯示在輸出中，您可以在此程序中跳到步驟 3 （"撰寫一些 JavaScript 程式碼..."）。
如果您需要安裝 Node.js，請執行下列動作。
1. 執行下列兩個命令，一次一個，以確保您的環境有最新的更新，然後下載 Node Version Manager （nvm）。（nvm 是簡單的 Bash shell 指令碼，對於安裝和管理 Node.js 版本很有用。如需詳細資訊，請參閱上的 Node Version Manager GitHub。）
  
  針對 Amazon Linux：
```
sudo yum -y update
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
```
  針對 Ubuntu Server：
```
sudo apt update
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
```
2. 使用文字編輯器來更新您的 shell 描述檔檔案 (例如，~/.bashrc) 以便能夠載入 nvm。例如，在 的環境視窗中IDE，選擇齒輪圖示，然後選擇在我的最愛中顯示首頁。重複此步驟並選擇 Show Hidden Files (顯示隱藏的檔案)。
3. 開啟 ~/.bashrc 檔案。
4. 在檔案尾端輸入或貼上下列程式碼，以啟用 nvm 載入。
  
  針對 Amazon Linux：
```
export NVM_DIR="/home/ec2-user/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.
```
  針對 Ubuntu Server：
```
export NVM_DIR="/home/ubuntu/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.
```
5. 儲存檔案。
6. 關閉該終端機工作階段，並開始新的工作階段。然後執行以下命令來安裝最新版的 Node.js。
```
nvm install node
```
撰寫一些 JavaScript 程式碼進行偵錯。例如，建立一個檔案並將下列程式碼新增至該檔案，然後將其儲存為 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!");
```
新增一些中斷點至程式碼。例如，在裝訂邊中選擇行 6 和行 10 旁的邊界。在這些行號旁會顯示紅色圓圈，如下所示。
現在您已準備好對 JavaScript 程式碼進行偵錯。若要進行這項試驗，請執行下列動作。
1. 若要顯示或隱藏 Debugger (除錯器) 視窗的內容，請選擇 Debugger (除錯器) 按鈕，如下一個步驟所示。
2. 在執行程式碼的同時，監看名為 i 之變數的值。在 Debugger (除錯器) 視窗中，為 Watch Expressions (監看運算式) 選擇 Type an expression here (在此處輸入運算式)。輸入字母 i，然後按下 Enter，如下所示。
3. 開始執行程式碼。選擇 Run (執行)、Run With (執行工具)、Node.js，如下所示。
4. 程式碼在行 6 暫停執行。Debugger (除錯器) 視窗會在 Watch Expressions (監看表達式) 中顯示 i 的值，此值目前為 10。
5. 在 Debugger (除錯器) 視窗中，請選擇 Resume (繼續)，即為藍色箭頭圖示，如下所示。
6. 程式碼在行 10 暫停執行。Debugger (除錯器) 視窗現在顯示 i 的新值，目前為 11。
7. 請再次選擇 Resume (繼續)。程式碼會執行到尾端。輸出將列印到主控台的 hello.js 標籤上，如下所示。