在工作區中編輯和儲存檔案

Kayce Basques

Sofia Emelianova

本教學課程將教您設定工作區，讓您在自己的專案中使用。Workspace 可讓您將在 DevTools 中所做的變更儲存至儲存在電腦上的原始碼。

注意：開始本教學課程前，您應具備下列技能：

• 使用 HTML、CSS 和 JavaScript 建構網頁。
• 使用開發人員工具對 CSS 進行基本變更。
• 執行本機 HTTP 網路伺服器。

總覽

工作區可讓您將在 DevTools 中所做的變更，儲存至電腦上相同檔案的本機副本。舉例來說：

• 你在電腦上有網站的原始碼。
• 您會從原始碼目錄執行本機網路伺服器，以便在 localhost:8080 上存取網站。
• 您已在 Google Chrome 中開啟 localhost:8080，並使用開發人員工具變更網站的 CSS。

啟用工作區後，您在 DevTools 中所做的 CSS 變更會儲存至電腦上的原始碼。

限制

如果您使用的是新式架構，它可能會將原始碼從易於維護的格式轉換為經過最佳化，以便盡可能快速執行的格式。Workspace 通常可透過來源對應，將最佳化程式碼對應回原始原始碼。

開發人員工具社群致力於支援來源對應在各種架構和工具中提供的功能。如果您在使用所選架構的工作區時遇到問題，或是在進行一些自訂設定後才讓工作區運作，請在郵寄清單中發起討論串，或是在 Stack Overflow 上提出問題，與其他 DevTools 社群成員分享您的知識。

相關功能：本機覆寫

本機覆寫值是另一項與工作區類似的開發人員工具功能。使用本機覆寫值模擬網頁內容或要求標頭，不必等待後端變更，或是您想嘗試網頁變更，並需要在網頁載入時查看這些變更，但不想將變更對應至網頁的原始碼。

步驟 1：設定

完成本教學課程，即可實際操作工作區。

設定示範

1. 將這個示範存放區複製到電腦上的某個目錄。例如 ~/Desktop。

2. 在 ~/Desktop/devtools-workspace-demo 中啟動本機網路伺服器。以下是啟動 SimpleHTTPServer 的程式碼範例，但您可以使用任何偏好的伺服器。

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   在本教學課程的其餘部分，這個目錄會稱為 /devtools-workspace-demo。

3. 在 Google Chrome 中開啟分頁，然後前往當地代管的網站版本。您應該可以透過 localhost:8000 等網址存取該檔案。具體的通訊埠編號可能有所不同。

   

設定開發人員工具

1. 在本機代管的示範頁面上開啟開發人員工具。

2. 依序前往「來源」 >「工作區」，然後在您複製的 devtools-workspace-demo 資料夾中設定工作區。您可以透過以下幾種方式執行此操作：

   • 將資料夾拖曳至「來源」中的「編輯器」。
   • 按一下「選取資料夾」連結，然後選取資料夾。
   • 按一下 「新增資料夾」，然後選取資料夾。

3. 在頂端提示中，按一下「允許」，授予開發人員工具讀取及寫入目錄的權限。

   

「工作區」分頁中的 index.html、script.js 和 styles.css 旁邊現在會顯示綠色圓點。這些綠色圓點表示開發人員工具已在網頁的網路資源與 devtools-workspace-demo 中的檔案之間建立對應關係。

步驟 2：將 CSS 變更儲存至磁碟

1. 在文字編輯器中開啟 /devtools-workspace-demo/styles.css。請注意，h1 元素的 color 屬性已設為 fuchsia。

   

2. 關閉文字編輯器。

3. 回到 DevTools，按一下「Elements」分頁標籤。

4. 將 <h1> 元素的 color 屬性值變更為您偏好的顏色。方法如下：

   1. 按一下「DOM Tree」中的 <h1> 元素。
   2. 在「Styles」窗格中找出 h1 { color: fuchsia } CSS 規則，然後將顏色變更為您偏好的顏色。在本範例中，顏色設為綠色。

   

   在「樣式」窗格中，styles.css:1 旁邊的綠色圓點 表示您所做的任何變更都會對應至 /devtools-workspace-demo/styles.css。

5. 再次在文字編輯器中開啟 /devtools-workspace-demo/styles.css。color 屬性現在已設為您偏好的顏色。

6. 重新載入頁面。<h1> 元素的顏色仍設為您偏好的顏色。這是因為您進行變更時，DevTools 會將變更儲存至磁碟。接著，當您重新載入頁面時，本機伺服器會從磁碟提供已修改的檔案副本。

步驟 3：將 HTML 變更儲存至磁碟

嘗試透過「元素」面板變更 HTML

警告：您要嘗試的工作流程無法運作。您現在嘗試這個方法，日後就不必浪費時間試著找出無法運作的原因。

1. 開啟「元素」分頁。

2. 按兩下 h1 元素的文字內容 (即 Workspaces Demo)，並將其替換為 I ❤️ Cake。

   

3. 在文字編輯器中開啟 /devtools-workspace-demo/index.html。剛才所做的變更並未出現。

4. 重新載入頁面。網頁會恢復原始標題。

選用：為何無法運作

注意：本節說明「嘗試透過 Elements 面板變更 HTML」的工作流程為何無法運作。如果您不想知道原因，可以略過這一節。

• 您在「Elements」面板中看到的節點樹狀結構代表網頁的 DOM。
• 為了顯示網頁，瀏覽器會透過網路擷取 HTML、剖析 HTML，然後將 HTML 轉換為 DOM 節點的樹狀結構。
• 如果網頁含有任何 JavaScript，該 JavaScript 可能會新增、刪除或變更 DOM 節點。CSS 也可以透過 content 屬性變更 DOM。
• 瀏覽器最後會使用 DOM 判斷應向瀏覽器使用者顯示哪些內容。
• 因此，使用者看到的網頁最終狀態可能與瀏覽器擷取的 HTML 大相逕庭。
• 由於 DOM 會受到 HTML、JavaScript 和 CSS 的影響，因此 DevTools 很難判斷應在何處儲存「Elements」面板中的變更。

簡單來說，就是 DOM 樹狀結構 !== HTML。

透過「來源」面板變更 HTML

如要儲存網頁 HTML 的變更，請在「Sources」面板中進行。

1. 依序前往「來源」 >「頁面」。
2. 按一下「(索引)」。網頁的 HTML 程式碼會隨即開啟。
3. 以 <h1>I ❤️ Cake</h1> 取代 <h1>Workspaces Demo</h1>。
4. 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 即可儲存變更。

5. 重新載入頁面。<h1> 元素仍會顯示新文字。

   

6. 開啟 /devtools-workspace-demo/index.html。<h1> 元素包含新文字。

步驟 4：將 JavaScript 變更儲存至磁碟

您也可以在「Sources」面板中變更 JavaScript。但有時候，你需要存取其他面板 (例如「元素」面板或「控制台」面板)，才能對網站進行變更。您可以透過以下方法，讓「來源」面板與其他面板一併開啟。

1. 開啟「元素」分頁。
2. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)。指令選單隨即開啟。

3. 輸入 QS，然後選取「顯示快速來源」。開發人員工具視窗底部現在會顯示「快速來源」分頁。

   

   這個分頁會顯示 index.html 的內容，這是您在「Sources」面板中上次編輯的檔案。「快速來源」分頁會提供「來源」面板中的編輯器，讓您在開啟其他面板的同時編輯檔案。

4. 按下 Command + P 鍵 (Mac) 或 Control + P 鍵 (Windows、Linux、ChromeOS) 即可開啟「Open File」對話方塊。

5. 輸入 script，然後選取 devtools-workspace-demo/script.js。

   

6. 請注意示範影片中的 Edit and save files in a workspace 連結。並定期進行樣式設定。

7. 在「快速原始碼」分頁中，將下列程式碼新增至 script.js 底部。

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

8. 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 即可儲存變更。

9. 重新載入頁面。頁面上的連結現在已改為斜體。

後續步驟

成功：恭喜！您現在已瞭解如何將在本機代管網站上開發人員工具中所做的變更儲存至來源。

您可以在工作區中設定多個資料夾。所有這類資料夾都會列在 的「Settings」 >「Workspace」 中。

接下來，我們將說明如何使用開發人員工具變更 CSS 和偵錯 JavaScript。