[Edit files with Workspaces](https://developer.chrome.com/docs/devtools/workspaces/)

本教程提供設定和使用工作區的實踐練習，以便您可以在自己的專案中使用工作區。 工作區使您能夠將在 DevTools 中所做的更改儲存到儲存在計算機上的原始碼中。

# Overview

工作區使您能夠將在 Devtools 中所做的更改儲存到計算機上同一檔案的本地副本。 例如，假設：

(1) 您的桌面上有站點的原始碼。
(2) 您正在從原始碼目錄執行本地 Web 伺服器，以便可以透過 localhost:8080 訪問該站點。
(3) 您已經在 Google Chrome 中開啟了 localhost:8080，並且您正在使用 DevTools 來更改站點的 CSS。

啟用工作區後，您在 DevTools 中所做的 CSS 更改將儲存到桌面上的原始碼中。

# Limitations

如果您使用的是現代框架，它可能會將您的原始碼從易於維護的格式轉換為經過最佳化以儘快執行的格式。 Workspaces 通常能夠在源對映的幫助下將最佳化後的程式碼對映回原始原始碼。 但是框架之間在如何使用源對映方面存在很多差異。 Devtools 根本無法支援所有的變化。

比如，Workspaces 不支援 Create React App.

# Related feature: Local Overrides

Local Overrides 是另一個類似於 Workspaces 的 DevTools 功能。 當您想對頁面的更改進行試驗，並且需要跨頁面載入檢視這些更改時，請使用本地覆蓋，但您不關心將更改對映到頁面的原始碼。

![](https://img-blog.csdnimg.cn/img_convert/2b26e135634ac706bce66a726300551b.png)

只有當前被載入到 Chrome 開發者工具的 web 應用對應的資料夾顏色改變了：
![](https://img-blog.csdnimg.cn/img_convert/8492535554c32bf1fb791d7dad3e0534.png)

直接在 Chrome 開發者工具裡修改 index.html:

![](https://img-blog.csdnimg.cn/img_convert/c1a73430f3c9696e4c0cad6cbe8802bf.png)

加上 from Jerry 的字串：
![](https://img-blog.csdnimg.cn/img_convert/e3f40540afa07e4e985d8182165e370d.png)

重新整理之後，這個更改也被持久化了：
![](https://img-blog.csdnimg.cn/img_convert/9f93a653588c8538e8c42ecfe5282672.png)

注意，如果直接在開發者工具 elements 標籤頁裡修改 DOM，則修改不會持久化到 HTML 檔案裡。

原因如下：

您在 Elements 皮膚上看到的節點樹表示頁面的 DOM。
為了顯示頁面，瀏覽器透過網路獲取 HTML，解析 HTML，然後將其轉換為 DOM 節點樹。
如果頁面有任何 JavaScript，該 JavaScript 可能會新增、刪除或更改 DOM 節點。CSS 也可以透過 content 屬性更改 DOM。
瀏覽器最終使用 DOM 來確定它應該向瀏覽器使用者呈現什麼內容。
因此，使用者看到的頁面的最終狀態可能與瀏覽器獲取的 HTML 有很大不同。

這使得 DevTools 難以確定應儲存在 Elements 皮膚中所做更改的位置，因為 DOM 受 HTML、JavaScript 和 CSS 的影響。

簡而言之，the DOM Tree !== HTML.

我們在 Sources 標籤頁，即可修改 HTML 和 JavaScript 檔案並持久化。

Chrome 開發者工具 workspace 的概念

相關文章