本頁面由 Cloud Translation API 翻譯而成。

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

Kayce Basques

Sofia Emelianova

本教學課程藉由設定工作區來練習，以便在自己的專案中使用。Workspace 可讓您將在開發人員工具中所做的變更儲存至電腦儲存的原始碼。

總覽

Workspace 可讓您將在開發人員工具中所做的變更儲存至電腦上相同檔案的本機副本。舉例來說，假設：

電腦中已安裝了網站的原始碼。
您正在從原始碼目錄執行本機網路伺服器，因此網站可以透過 localhost:8080 存取。
您已經在 Google Chrome 中開啟 localhost:8080，並使用開發人員工具變更網站的 CSS。

啟用工作區後，您在開發人員工具中進行的 CSS 變更會儲存至電腦的原始碼。

限制

如果您使用現代架構，該架構可能會將原始碼從您易於維護的格式轉換為盡可能快速執行的格式。您可以運用來源對應，將最佳化的程式碼對應到原本的原始碼。

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

相關功能：本機覆寫

本機覆寫是另一個與工作區相似的開發人員工具功能。使用本機覆寫功能即可模擬網頁內容或要求標頭，無須等待後端變更，或想測試網頁變更，同時在頁面載入期間查看這些變更，但您並不關心將變更對應至網頁原始碼。

步驟 1：設定

完成這個教學課程，即可實際體驗工作區。

設定示範模式

將這個示範存放區複製到電腦上的某個目錄。例如 ~/Desktop。
在 ~/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。
在 Google Chrome 中開啟分頁，然後前往本機代管的網站版本。您應該可以透過 localhost:8000 等網址存取該系統。確切的通訊埠編號可能不同。

設定開發人員工具

在本機託管的示範頁面中開啟開發人員工具。
依序前往「來源」 >「工作區」，然後在您複製的 devtools-workspace-demo 資料夾中設定工作區。您可以選擇下列其中一種操作方式：
- 將資料夾拖曳至「Sources」中的「Editor」。
- 按一下「選取資料夾」連結，然後選取資料夾。
- 按一下「Add folder」(新增資料夾)，然後選取資料夾。
在頂端的提示中，按一下「允許」，授權 DevTools 讀取及寫入目錄。

在「Workspace」分頁中，index.html、script.js 和 styles.css 旁邊現在有一個綠點。這些綠色圓點表示開發人員工具已為網頁的網路資源和 devtools-workspace-demo 中的檔案建立對應關係。

「工作區」分頁現在會顯示本機檔案與網路檔案之間的對應關係。

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

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

$在文字編輯器中查看 style.css。$
關閉文字編輯器。
返回開發人員工具，然後按一下「Elements」分頁標籤。
將 <h1> 元素的 color 屬性值變更為您偏好的顏色。方法如下：
1. 按一下「DOM 樹狀結構」中的 <h1> 元素。
2. 在「Styles」(樣式) 窗格中，找到 h1 { color: fuchsia } CSS 規則，並將顏色變更為您偏好的顏色。在這個範例中，顏色會設定為綠色。
在「Styles」窗格中，styles.css:1 旁邊的綠點代表您所做的任何變更都會對應至 /devtools-workspace-demo/styles.css。
再次使用文字編輯器開啟 /devtools-workspace-demo/styles.css。color 屬性現已設為常用顏色。
重新載入頁面。系統仍會將 <h1> 元素的顏色設為您偏好的顏色。這是因為在您進行變更，且開發人員工具已將變更儲存至磁碟。當您重新載入頁面時，本機伺服器會從磁碟提供修改後的檔案副本。

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

嘗試在「元素」面板中變更 HTML

開啟「Elements」分頁。
按兩下 h1 元素的文字內容 (顯示為 Workspaces Demo)，然後將其替換為 I ❤️ Cake。
在文字編輯器中開啟 /devtools-workspace-demo/index.html。你剛才所做的變更不會消失。
重新載入頁面。網頁會恢復為原始標題。

選用：為什麼無法運作

「Elements」面板顯示的節點樹狀結構，代表網頁的 DOM。
瀏覽器會透過網路擷取 HTML 並剖析 HTML，然後將網頁轉換成 DOM 節點樹狀結構。
如果網頁有任何 JavaScript，該 JavaScript 可能會新增、刪除或變更 DOM 節點。CSS 也可以透過 content 屬性變更 DOM。
瀏覽器最終會使用 DOM 來判斷瀏覽器應向使用者顯示哪些內容。
因此，使用者看到的網頁最終狀態，可能會與瀏覽器擷取的 HTML 截然不同。
DOM 會受 HTML、JavaScript 和 CSS 影響，因此開發人員工具無法得知在「元素」面板中所做的變更應儲存的位置。

簡單來說，「DOM 樹狀結構」!== HTML。

透過「來源」面板變更 HTML

如要儲存對網頁的 HTML 所做的變更，請在「來源」面板中進行操作。

依序前往「來源」 >「網頁」。
按一下「(索引)」。該網頁的 HTML 隨即開啟。
以 <h1>I ❤️ Cake</h1> 取代 <h1>Workspaces Demo</h1>。
按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 來儲存變更。
重新載入頁面。<h1> 元素仍會顯示新文字。
開啟 /devtools-workspace-demo/index.html。<h1> 元素包含新文字。

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

「來源」面板也是用來變更 JavaScript 的地方。不過，對網站進行變更時，有時需要使用其他面板，例如「Elements」面板或「Console」面板。可以和其他面板一起開啟「Sources」面板。

開啟「Elements」分頁。
按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)。指令選單隨即會開啟。
輸入 QS，然後選取「Show Quick Source」。開發人員工具視窗底部會顯示「Quick Source」分頁。

該分頁顯示的是 index.html 的內容，也就是您最近一次在「Sources」面板中編輯的檔案。「Quick Source」分頁提供「Sources」面板的編輯器，可讓您在開啟其他面板時編輯檔案。
按下 Command + P 鍵 (Mac) 或 Control + P 鍵 (Windows、Linux、ChromeOS) 開啟「開啟檔案」對話方塊。
輸入 script，然後選取「devtools-workspace-demo/script.js」devtools-workspace-demo/script.js。
請注意示範中的 Edit and save files in a workspace 連結。採用定期設計
在「Quick Source」分頁中，將下列程式碼新增至 script.js 底部。
```
document.querySelector('a').style = 'font-style:italic';
```
按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 來儲存變更。
重新載入頁面。頁面上的連結現在以斜體顯示。

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

後續步驟

您可以在工作區中設定多個資料夾。這類資料夾全都列在「設定」 >「工作區」中。

接下來，請瞭解如何使用開發人員工具變更 CSS 和對 JavaScript 偵錯。