Edit files with Workspaces

本教程提供設(shè)置和使用工作區(qū)的實踐練習(xí)，以便您可以在自己的項目中使用工作區(qū)。 工作區(qū)使您能夠?qū)⒃?DevTools 中所做的更改保存到存儲在計算機上的源代碼中。

Overview

工作區(qū)使您能夠?qū)⒃?Devtools 中所做的更改保存到計算機上同一文件的本地副本。 例如，假設(shè)：

(1) 您的桌面上有站點的源代碼。
(2) 您正在從源代碼目錄運行本地 Web 服務(wù)器，以便可以通過 localhost:8080 訪問該站點。
(3) 您已經(jīng)在 Google Chrome 中打開了 localhost:8080，并且您正在使用 DevTools 來更改站點的 CSS。

啟用工作區(qū)后，您在 DevTools 中所做的 CSS 更改將保存到桌面上的源代碼中。

Limitations

如果您使用的是現(xiàn)代框架，它可能會將您的源代碼從易于維護的格式轉(zhuǎn)換為經(jīng)過優(yōu)化以盡快運行的格式。 Workspaces 通常能夠在源映射的幫助下將優(yōu)化后的代碼映射回原始源代碼。 但是框架之間在如何使用源映射方面存在很多差異。 Devtools 根本無法支持所有的變化。

比如，Workspaces 不支持 Create React App.

Related feature: Local Overrides

Local Overrides 是另一個類似于 Workspaces 的 DevTools 功能。 當(dāng)您想對頁面的更改進行試驗，并且需要跨頁面加載查看這些更改時，請使用本地覆蓋，但您不關(guān)心將更改映射到頁面的源代碼。

只有當(dāng)前被加載到 Chrome 開發(fā)者工具的 web 應(yīng)用對應(yīng)的文件夾顏色改變了：

直接在 Chrome 開發(fā)者工具里修改 index.html:

加上 from Jerry 的字符串：

刷新之后，這個更改也被持久化了：

注意，如果直接在開發(fā)者工具 elements 標(biāo)簽頁里修改 DOM，則修改不會持久化到 HTML 文件里。

原因如下：

您在 Elements 面板上看到的節(jié)點樹表示頁面的 DOM。
為了顯示頁面，瀏覽器通過網(wǎng)絡(luò)獲取 HTML，解析 HTML，然后將其轉(zhuǎn)換為 DOM 節(jié)點樹。
如果頁面有任何 JavaScript，該 JavaScript 可能會添加、刪除或更改 DOM 節(jié)點。CSS 也可以通過 content 屬性更改 DOM。
瀏覽器最終使用 DOM 來確定它應(yīng)該向瀏覽器用戶呈現(xiàn)什么內(nèi)容。
因此，用戶看到的頁面的最終狀態(tài)可能與瀏覽器獲取的 HTML 有很大不同。

這使得 DevTools 難以確定應(yīng)保存在 Elements 面板中所做更改的位置，因為 DOM 受 HTML、JavaScript 和 CSS 的影響。

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

我們在 Sources 標(biāo)簽頁，即可修改 HTML 和 JavaScript 文件并持久化。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Chrome 开发者工具 workspace 的概念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。