設定工作區，儲存對來源檔案所做的變更

Kayce Basques

Sofia Emelianova

設定工作區，將在開發人員工具中所做的變更儲存回電腦上的來源檔案。您可以提供設定檔，自動將工作區資料夾連結至開發人員工具，也可以在「Sources」面板中手動新增工作區位置。

總覽

自動 (或手動) 連線至工作區資料夾後，您在開發人員工具中所做的變更，就會儲存至電腦上相同檔案的本機副本。舉例來說，假設：

• 電腦上有網站的原始碼。
• 您正在從原始碼目錄執行本機網路伺服器，因此可以透過 localhost:PORT 存取網站，而且該網站也會提供含有中繼資料的簡易 JSON 檔案 (詳情請見下文)。
• 您在 Google Chrome 中開啟 localhost:PORT，並使用開發人員工具變更網站的 CSS。

連結工作區資料夾後，您在「來源」面板中對 CSS、HTML 和 JavaScript 檔案所做的變更，都會儲存到電腦上的原始碼。不過，開發人員工具不會儲存您在「Elements」面板中對 DOM 所做的變更。

此外，開發人員工具通常能透過來源對應，將最佳化程式碼對應回原始碼。

為連線生成中繼資料

如要讓開發人員工具自動偵測工作區資料夾，請產生隨機的第 4 版 UUID，並放入下列 JSON 檔案：

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

然後將 JSON 檔案放在 path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json 中。

最後，執行本機 HTTP 伺服器，並確保也提供 JSON 檔案。

您也可以略過這個步驟，手動設定資料夾連結。

連結工作區資料夾

注意： 本步驟和下一個步驟會使用自動工作區資料夾示範來展示功能。

如要連結資料夾，請按照下列步驟操作：

1. 在 Chrome 中前往本機託管的網頁 (在本例中為 localhost:8000)，然後開啟開發人員工具。

2. 在「來源」 >「Workspace」中，按一下資料夾旁的「連結」。

   

3. 系統提示時，按一下「編輯檔案」，允許開發人員工具存取資料夾。

   

4. 連結後，您可以在「工作區」分頁中開啟資料夾。

   

「Workspace」分頁中的 HTML、CSS 和 JavaScript 檔案旁會顯示綠點。這些綠點表示開發人員工具已在網頁的網路資源和資料夾中的檔案之間建立對應關係。

將變更儲存回來源資料夾

您可以將變更儲存至連結工作區資料夾中的任何 CSS、HTML 和 JavaScript 檔案。

儲存 CSS 變更

提示： 連結工作區資料夾後，AI 輔助面板就能自動將 CSS 變更儲存至來源。

如要儲存 CSS 變更，請按照下列步驟操作：

1. 依序前往「來源」 >「工作區」，從已連結的工作區資料夾開啟 CSS 檔案。

2. 變更 CSS。

   注意： 變更會套用至線上網頁，但尚未套用至來源。

3. 儲存變更 (例如按下 Ctrl/Cmd + S 鍵)，然後在來源檔案中查看套用的變更。「Sources」面板中的檔案名稱旁會顯示綠色圓點。

   注意： 您不必重新載入頁面，即可套用及儲存 CSS 變更。

如要瞭解工作流程，請觀看影片：

儲存 HTML 變更

如要儲存 HTML 變更，請按照下列步驟操作：

1. 依序前往「Sources」 >「Workspaces」，從已連結的工作區資料夾開啟 HTML 檔案。

2. 變更 HTML。

   注意： 變更不會套用至實際網頁，也不會套用至來源。

3. 儲存變更 (例如按下 Ctrl/Cmd + S 鍵)，然後在來源檔案中查看套用的變更。「Sources」面板中的檔案名稱旁會顯示綠色圓點。

4. 重新載入頁面，即可看到變更生效。

如要瞭解工作流程，請觀看影片：

注意： 您可以透過「來源」面板套用及儲存 HTML 變更，但無法透過「元素」面板執行這項操作。

為什麼無法透過「元素」面板變更 HTML？

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

簡而言之，DOM 樹狀結構 !== HTML。

儲存 JavaScript 變更

如要儲存 JavaScript 變更，請按照下列步驟操作：

1. 在「來源」 >「工作區」中，開啟已連結工作區資料夾中的 JavaScript 檔案。

2. 變更 JavaScript。

   注意： 變更不會套用至實際網頁，也不會套用至來源。

3. 儲存變更 (例如按下 Ctrl/Cmd + S 鍵)，然後在來源檔案中查看套用的變更。「Sources」面板中的檔案名稱旁會顯示綠色圓點。

4. 如果本機 HTTP 伺服器會監聽原始碼檔案變更，並自動重新載入頁面，那麼在開發人員工具中儲存變更後，就會看到變更生效。否則，請重新部署本機伺服器。

如要瞭解工作流程，請觀看影片：

提示： 變更 JavaScript 時，有時需要存取其他面板，例如「元素」面板或「控制台」。如要這麼做，可以使用導覽匣和重新排序面板。

移除工作區資料夾連結

如要移除工作區資料夾連線，請依序前往「來源」 >「工作區」，在資料夾上按一下滑鼠右鍵，從下拉式選單中選取「從工作區移除」，然後點選「移除」。

注意： 在中繼資料 JSON 檔案中變更或刪除資料夾的 UUID，也會中斷資料夾連結。

手動連結工作區資料夾

1. 在本機託管網頁上開啟開發人員工具。

2. 依序點選「來源」>「Workspace」>「手動新增資料夾」。然後選取含有來源檔案的資料夾。

   

   注意： 您也可以將資料夾拖曳到「來源」面板。

3. 接著，按照「連結工作區資料夾」中的步驟 3 和 4 操作。

限制

如果您使用現代架構，它可能會將原始碼從易於維護的格式，轉換為經過最佳化、可盡快執行的格式。工作區資料夾連線通常可以透過來源對應，將最佳化程式碼對應回原始碼。

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

後續步驟

如要管理所有已設定的資料夾，請依序前往「 設定 > 工作區」。

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

另請參閱

本機覆寫是另一個與開發人員工具類似的功能，可模擬網路內容或要求標頭。這樣一來，您就能自由實驗網頁變更，不必等待後端跟上。使用本機覆寫功能時，變更會在載入網頁時保留，但不會對應至網頁的原始碼。