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

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

Kayce Basques

Sofia Emelianova

本教學課程將透過建立工作區的方式練習就能在自己的專案中使用Workspace 可讓您儲存在利用開發人員工具找出儲存於電腦上的原始碼。

總覽

Workspace 可讓您將在開發人員工具中所做的變更儲存至相同檔案的本機副本：您也能選擇重設 VM 這類似於按下電腦的重設按鈕舉例來說，假設：

您在電腦上有網站原始碼，
你是從原始碼目錄執行本機網路伺服器，因此網站可供存取通知時間：localhost:8080。
你在 Google Chrome 中開啟 localhost:8080，代表你使用開發人員工具變更網站的例如 CSS、CSS、CSS 和 JS。

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

限制

如果您使用現代架構，則可能會轉換原始碼，您可以輕鬆維護這個格式，並盡可能加快執行速度。工作區為通常都能運用原始碼地圖。

開發人員工具社群致力於支援各種架構和工具的來源對應功能。如果您透過自選架構使用工作區時遇到問題，或是啟動了工作區完成自訂設定後，在郵寄清單中建立討論串或提出問題，與開發人員工具社群的其他成員分享知識。

相關功能：本機覆寫

本機覆寫是另一項與工作區類似的開發人員工具功能，使用本機覆寫功能模擬網頁內容或要求標頭，不必等待後端變更。想對網頁進行實驗而且需要在不同頁面上查看變更但是您並不在意將變更對應至網頁的原始碼。

步驟 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 資料夾中設定工作區。上傳方式分為以下幾種：
- 將資料夾拖曳至「來源」中的「編輯器」。
- 按一下「選取資料夾」連結，然後選取資料夾。
- 按一下「Add folder」(新增資料夾)，然後選取所需資料夾。
在頂端的提示中，按一下「Allow」，授權開發人員工具讀取及寫入目錄。

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

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

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

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

$在文字編輯器中查看 style.css。$
關閉文字編輯器。
返回開發人員工具，然後按一下「Elements」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> 元素的顏色仍會設為您最喜歡的顏色。這項功能可以正常運作因為當您進行變更後，開發人員工具就儲存了磁碟的變更當您重新載入 Chrome 瀏覽器時本機伺服器提供磁碟中的已修改檔案副本。

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

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

開啟「Elements」(元素)Elements 分頁。
按兩下 h1 元素的文字內容 (也就是 Workspaces Demo 的文字內容)，然後將其取代搭配 I ❤️ Cake。
在文字編輯器中開啟 /devtools-workspace-demo/index.html。您剛才所做的變更並未生效。
請重新載入網頁。網頁會還原為原始標題。

選用：為什麼無法運作

「元素」Elements面板中顯示的節點樹狀結構代表網頁的 DOM。
為了顯示網頁，瀏覽器會在網路上擷取 HTML 並剖析 HTML，然後轉換成網頁轉換為 DOM 節點樹狀結構
如果網頁有任何 JavaScript，該 JavaScript 可能會新增、刪除或變更 DOM 節點。CSS 可以透過 content 屬性變更 DOM。
瀏覽器最終會使用 DOM 來判斷應向瀏覽器使用者顯示什麼內容。
因此，使用者看到的網頁最終狀態可能與瀏覽器擷取。
導致開發人員工具難以解決「Elements」Elements面板中變更的位置必須儲存，因為 DOM 會受到 HTML、JavaScript 和 CSS 影響。

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

從「來源」面板變更 HTML

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

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

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

「來源」面板也是變更 JavaScript 的地方。不過有時候您需要在進行變更時存取其他面板 (例如「元素」Elements面板或「控制台」Elements面板) 到你的網站你可以將「來源」面板與其他面板一起開啟。

開啟「Elements」(元素)Elements 分頁。
按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)。「Command」選單開啟後，
輸入 QS，然後選取「Show Quick Source」。開發人員工具視窗底部現在「快速來源」分頁。

這個分頁顯示 index.html 的內容，也就是最後的內容您在「來源」面板中編輯的檔案。「快速原始碼」分頁提供「來源」面板：讓您在開啟其他面板時也能編輯檔案。
按下 Command + P 鍵 (Mac) 或 Control + P 鍵 (Windows、Linux、ChromeOS)，開啟「開啟檔案」對話方塊。
輸入 script，然後選取 devtools-workspace-demo/script.js。
請注意示範中的 Edit and save files in a workspace 連結。保持時尚風格。
在「快速原始碼」分頁中，將以下程式碼新增至 script.js 的底部。
```
document.querySelector('a').style = 'font-style:italic';
```
按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 來儲存變更。
請重新載入網頁。網頁上的連結現在是斜體。

網頁上的連結現在是斜體。

後續步驟

您可以在工作區中設定多個資料夾。如要查看所有這類資料夾，請依序點選 [設定] >Workspace。

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