工作區教學課程 (來源工具 工作區索引標籤)

使用下列步驟將開發工具當做 IDE 使用，例如在 來源 工具的 [ 工作區 ] 索引標籤中編輯網頁、將來源檔案的變更儲存在磁碟上。

您可以閱讀或遵循這些步驟，說明如何在開發工具中設定和使用工作區。 設定工作區後，使用 DevTools 對工作區中的檔案所做的變更會儲存在本機電腦上。

步驟 1：將 Edge Demos 存放庫複製到本機磁碟機

首先，您設定包含網頁來源檔案的本機目錄，例如 Workspaces 示範網頁。

將 MicrosoftEdge/Demos 存放庫複製到本機磁碟機，包括 /workspaces/ Demo 資料夾，如下所示：

  1. 如果尚未完成， 請下載 git 並安裝它。

  2. 在新的視窗或索引標籤中移至 MicrosoftEdge/Demos 存放庫。

  3. 按一下 [程式碼 ] 下拉式按鈕，然後按一下 [ 將 URL 複製到剪貼簿 ] 按鈕。

    URL 隨即會複製到剪貼簿： https://github.com/MicrosoftEdge/Demos.git

    或者，如果您已安裝 GitHub Desktop，請按一下 [ 使用 GitHub Desktop 開啟 ] 以複製存放庫，並略過下面的命令提示字元步驟。

    或者，您可以使用 Visual Studio Code 的 [原始檔控制] 窗格來複製存放庫，並略過下方的命令提示字元步驟。

  4. 開啟命令提示字元，例如 git bash。

  5. 輸入您從 GitHub 存放庫複製的 URL 字串，將存放庫複製到本機磁碟機。 如果您使用 git bash 命令提示字元：

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

如需複製存放庫的詳細資訊，請參閱：

繼續下一節。

步驟 2：在網頁來源檔案目錄中啟動 localhost 伺服器

  1. 如果尚未完成，請從 Node.js安裝最新版本的 Node.js 和 npm。

    另請參閱:

  2. 移至命令提示字元，例如 git bash 殼層或 Microsoft Visual Studio Code 中的終端機窗格。

  3. 變更至 Demos 存放庫目錄的 workspaces 目錄：

    cd ~/GitHub/Demos/workspaces
pwd

    與 「來源」 工具的 [工作區 ] 索引標籤搭配使用的目錄可以具有任何名稱。 這個示範目錄名為 /workspaces/。

  4. 建立名為 “test” 的工作分支並切換到該分支， (以避免變更 “main” 分支中的演示文件) ：

    git checkout -b test

    這相當於：

    git branch test
git switch test

  5. 執行下列其中一個命令，以啟動網頁伺服器：

    # Node.js option
npx http-server

    如需詳細資訊和選項，請參閱安裝適用於 Visual Studio Code 的開發工具延伸模組中的啟動伺服器 (npx http-server) 。

    # Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer

    # Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server

  6. 在 Microsoft Edge 中開啟索引標籤，然後移至網站的本機託管版本。 您通常會透過前往以下localhost:8080位置存取它：

    DevTools 工作區示範

    另一個常見的對等 URL 是 http://0.0.0.0:8080。 Python 伺服器選項的預設連接埠號碼為 8000。 確切的 連接埠號碼 可能不同。

    DevTools 工作區示範網頁隨即開啟。

    (最新示範中的連結可能會顯示「使用工作區編輯檔案」或「編輯並儲存工作區中的檔案 (來源工具工作區索引標籤) ) 」。

另請參閱:

繼續下一節。

步驟 3：在 [來源] 工具中新增工作區資料夾

接下來，在開發工具中定義工作區：

  1. 以滑鼠右鍵按一下本機裝載的 DevTools 工作區示範 網頁，然後選取 [檢查]。 或者，在 Windows Linux) (按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。

    DevTools 隨即開啟。

  2. 按一下索引標籤) 的 [ 來源 ] ([來源] 工具圖示 。

  3. 在左側) (的 [導覽器] 窗格中，按一下與 [頁面] 索引標籤) 分組的 [工作區] 索引標籤 (：

    工作區索引標籤

  4. 按一下 [新增資料夾 ] 按鈕。

    [ 選取資料夾] 對話方塊隨即開啟。

  5. 移至您建立的複製 /Demos/workspace/ 目錄。 例如，在 [資料夾： ] 文字方塊中，輸入路徑，例如 C:\Users\localAccount\GitHub\Demos\workspaces\。

  6. 按一下 [選取資料夾 ] 按鈕。

    DevTools 會提示您是否要授與 DevTools 目錄的完整 /workspaces/ 存取權。

  7. 按一下 [ 允許 ] 按鈕，以授與 DevTools 讀取及寫入目錄的權限。

    在 [工作區 ] 索引標籤中，頁面圖示具有綠色「對應」點，用於 index.html、 script.js、 styles.css和 。 綠色的「對應」點表示 DevTools 已在從網頁伺服器接收之頁面的網路資源與目錄中的 /Demos/workspace/ 本機來源檔案之間建立對應：

    [工作區] 索引標籤有一個綠色的「對應」點，表示從伺服器接收的資源與本機來源檔案之間的對應

繼續下一節。

步驟 4：透過 [元素] 工具將 CSS 變更儲存到磁碟 ([樣式] 索引標籤)

接下來，編輯 CSS 並儲存對來源檔案的變更。 我們在這裡使用 「元素」 工具的 「樣式 」選項卡，並輔以其使用者介面控件，儘管我們可以直接在 「來源」 工具的 「工作區 」標籤的檔案編輯器中編輯 CSS 檔案。

若要使用 [ 元素 ] 工具的 [ 樣式 ] 索引標籤，在 CSS 檔案中進行變更並將它儲存到磁碟：

  1. 在 [來源 ] 工具的 [ 工作區 ] 索引標籤中， (與 [頁面 ] 索引標籤) 分組，選取 styles.css 以在編輯器窗格中將其開啟。 color元素的h1屬性設定為fuchsia：

    在文字編輯器中檢視styles.css

  2. 選取 元素 (元素 工具圖示) 工具;然後在 DOM 樹狀結構中展開 <body> 元素;然後選取元素 <h1> 。

    [ 樣式 ] 窗格會顯示套用至元素的 <h1> CSS 規則。 旁邊的 [對應檔案] 圖示 ([對應檔案] 圖示) styles.css:1 是具有綠色「對應」點的頁面。 綠色的「對應」點表示您對此 CSS 規則所做的任何變更都會對應至 styles.css 目錄 /Demos/workspace/ 中：

    [對應檔案] 圖示，這是含有雙向箭號的頁面

  3. 將元素的<h1>屬性值color變更為橘色。 若要這樣做，請選取 <h1>DOM 樹狀結構中的元素。 在 的 CSS 規則 h1中，按一下 fuchsia，開始輸入 橘色，然後從色彩清單中選取橘 色 ：

    變更 styles.css 中的色彩屬性

  4. 選取 [來源] 工具，以滑鼠右鍵按一下 styles.css，然後選取 [ 在包含資料夾中開啟]。

    檔案總管或 Finder 隨即開啟。

  5. 在文字編輯器中開啟目錄中的/Demos/workspace/複本styles.css，例如 Visual Studio Code。 color屬性現在已設定為新的色彩，在本範例中為橘色。 變更不僅發生在從網頁伺服器傳回的檔案複本中;此變更也會在工作區目錄中的 /Demos/workspace/ 對應檔案中進行。

  6. 重新整理頁面。

元素的 <h1> 色彩仍會設定為新色彩。 變更會在重新整理時維持，因為當您進行變更時，DevTools 會將變更儲存到磁碟。 當您重新整理頁面時，您的本機伺服器會從磁碟提供修改過的檔案複本。

提示： 您也可以按一下 fucshia 色票來開啟 [色彩選擇器] 以挑選新色彩，以變更色彩。 所挑選色彩的 HEX 值就是色彩名稱。

繼續下一節。

步驟 5：透過來源工具將 HTML 變更儲存到磁碟 (工作區索引標籤)

接下來，編輯 HTML 並儲存對來源檔案的變更。 若要儲存對網頁 HTML 檔案的變更，請在 [來源 ] 工具的 [工作區 ] 索引標籤中新增原始程式碼資料夾，然後在 [來源 ] 工具中編輯 HTML。 (僅透過在 「元素」 工具中變更 DOM 樹狀結構中的 HTML 來變更來源檔案。)

[開發工具 工作區 ] 索引標籤類似於使用編輯器來編輯 HTML 來源檔案，但可讓您直接在開發工具內編輯 HTML 來源檔案。

  1. 繼續上述內容，在 DevTools 中，按一下 [ 來源 ] ([ 來源] 工具圖示。) 索引標籤。

  2. 在左側的 [導覽器] 窗格中，在與 [頁面] 索引標籤) 分組的 [工作區] 索引標籤 (中，選取 index.html。

    在 [來源] 工具中開啟的 [index.html] 索引標籤。

  3. 在標籤中 <h1> ，將 “DevTools Workspaces Demo” 取代為 “I Love Cake”。

    旁邊 index.html會出現一個星號。

  4. Windows (按 Ctrl+S，Linux) 按 macOS) (按 Command+S。

    您的變更會儲存，星號也會消失。

    您在檔案清單中進行了變更，而不是在 元素 工具的 DOM 樹狀結構中進行變更。

  5. 重新整理頁面。 轉譯頁面中的標題會變更為 「I Love Cake」，因為該字串已儲存在 index.html 對應 /Demos/workspace/ 目錄中：

    從 [來源] 工具變更 HTML

  6. 在 [來源 ] 工具中，以滑鼠右鍵按一下 index.html，然後選取 [ 在包含資料夾中開啟]。

    檔案總管或 Finder 隨即開啟。

  7. 在文字編輯器中開啟目錄中的/Demos/workspace/複本index.html，例如 Visual Studio Code。

    該 <h1> 元素包含新的文字「我喜歡蛋糕」，因為您使用 [來源 ] 工具的編輯器進行變更來編輯 index.html ，然後儲存變更，並且該檔案已對應在工作區 ([ 工作區 ] 索引標籤) 中，由檔案圖示上的綠色「對應」點指示。

    許多開發人員不會直接撰寫 HTML，而是使用以下方法：

    • 伺服器端語言，例如 Java、Python 或 PHP。
    • 網站產生器，例如 Eleventy。
    • 使用 JavaScript 程式碼的用戶端架構。
    • HTML 以外的標記語言，例如 Markdown。

    這意味著在實踐中，很少有開發人員在“工作區”選項卡中更改 HTML 文件。大部分開發人員會使用不同類型的來源檔案來產生 HTML 檔案，例如React元件 JS 來源檔案，然後重建並重新載入 (，這可能會自動) 發生。

  8. 長按或以滑鼠右鍵按一下 Microsoft Edge 中的 [重新整理 ] 按鈕，然後選取 [ 硬重新整理] (Ctrl+Shift+R) 。

    在 [工作區 ] 索引標籤中，所有 HTML、CSS 和 JS 檔案上都會出現綠色「對應」點。

繼續下一節。

步驟 6：將 JavaScript 變更儲存到磁碟

接下來，您將編輯工作區示範的 JavaScript 檔案，並儲存對來源檔案的變更。 若要將編輯儲存至 JavaScript 來源檔案，您可以在 [來源] 工具的 [工作區] 索引標籤中新增原始程式碼資料夾之後，像使用 IDE 一樣使用 DevTools。 然後，您可以在 來源 工具的編輯器中編輯並儲存 JavaScript 檔案。

在轉譯的示範網頁中，若要設定 [在工作區中編輯並儲存檔案] ([來源] 工具 [工作區] 索引標籤 的樣式) 以斜體字顯示超連結：

  1. 在開發工具中，選取 [來源] 工具，然後選取與 [頁面] 索引標籤分組的 [工作區] 索引標籤。

  2. 在 「工作區 」索引標籤中，選取 script.js。

    script.js 在 [來源 ] 工具的 [編輯器] 窗格內的索引標籤中開啟。

  3. 在編輯器窗格中，將下列程式碼新增至 script.js底部：

    document.querySelector('a').style = 'font-style:italic';

    索引標籤上 script.js 會出現星號。

  4. Windows (按 Ctrl+S，Linux) 按 macOS) (按 Command+S。

    script.js 儲存，且星號會從索引標籤中 script.js 移除。

  5. 重新整理頁面。

  6. 如果 HTML、JS 或 CSS 檔案上不再有綠色「對應」點，請長按或以滑鼠右鍵按一下 Microsoft Edge 中的 [重新整理 ] 按鈕，然後選取 [ 硬重新整理] (Ctrl+Shift+R) 。

    頁面上的超連結) [ 使用工作區編輯檔案] (或 [ 在工作區 (來源] 工具中編輯並儲存檔案 [工作區] 索引標籤 現在) 為斜體：

    頁面上的連結現在會以斜體顯示

繼續下一節。

步驟 7：使用開發工具新增 .js 檔案

  1. 在 [來源 ] 工具的 [ 工作區 ] 索引標籤中，以滑鼠右鍵按一下 /workspaces/ 資料夾，然後選取 [ 新增檔案 ] 功能表項目。

    系統新增名為下列檔案 NewFile ：

    透過 [工作區] 索引標籤新增的新檔案

  2. 以滑鼠右鍵按一下 NewFile[工作區 ] 索引標籤，然後選取 [重新命名]。

  3. 將檔案重新命名為 test.js。

  4. 在 test.js中，新增這一行： console.log('hello from test.js');

  5. 在 [來源] 工具的 [ 工作區 ] 索引標籤中，選取 index.html。

  6. 在 中，在此行index.html<script src="./script.js" defer></script>下方新增該行：<script src="./test.js" defer></script>

  7. Windows (按 Ctrl+S，Linux) 按 macOS) (按 Command+S。

    index.html 將儲存。

  8. 長按或以滑鼠右鍵按一下 Microsoft Edge 中的 [重新整理 ] 按鈕，然後選取 [ 硬重新整理] (Ctrl+Shift+R) 。

    在 [工作區 ] 索引標籤中，所有 HTML、CSS 和 JS 檔案上都會出現綠色「對應」點：

    在 HTML 檔案中新增 JS 檔案的參照，並在所有網頁檔案上新增綠色「對應」點

本教學課程到此完成。

如果您想要還原在資料夾中的 /workspace/ 編輯，可以在命令提示字元中使用 Git 命令，或使用 GitHub Desktop，來還原最新分支中的變更，例如 “main” 或 “test”。

另請參閱

注意事項

本頁面的部分內容是根據 Google 建立和分享 的作品進行修改，並根據知識 共享署名 4.0 國際授權條款中所述的條款使用。 原始頁面可在 此處 找到，由 Kayce Basques 撰寫。

Creative Commons 授權 本作品已根據 知識共享署名 4.0 國際許可證獲得許可。

  • 上次更新時間：