使用DevTools Workspaces保存更改

优质

小牛编辑

156浏览

2023-12-01

在Chrome DevTools中设置持久化编写，以便您可以立即查看更改并将这些更改保存到磁盘。

Chrome DevTools允许您更改网页上的元素和样式，并实时查看更改效果。默认情况下，刷新浏览器，更改就会消失，除非您已经手动将其复制并粘贴到外部编辑器中，并保存。

Workspaces(工作区)允许您将这些更改保存到磁盘，而不必离开Chrome DevTools。将从本地Web服务器提供的资源映射到磁盘上的文件，并查看对这些文件所做的更改。

添加本地源文件到 Workspaces(工作区)

要使一个本地文件夹中的源文件在Sources(源文件)面板中可编辑，你需要进行如下设置：

通常情况下，本地文件夹应该包含将要保存到WEB服务器的原始源文件。如果您不想通过Workspaces(工作区)更改这些原始文件，你可以制作文件夹的副本并将其指定为Workspaces(工作区)文件夹。

您已将本地文件夹映射到工作区，但提供给浏览器仍然是网络文件夹的内容。要在浏览器中自动执行持久化更改，需要将文件夹中的本地文件映射到一个 URL 上：

此后，Chrome会加载映射的工作区内容，而不是网络内容。这样你可以直接在本地文件中编辑、预览、保存，而无需在Chrome和外部编辑器之间重复切换。

Workspaces(工作区)虽然很强大，有一些限制你应该注意。

只有在 Elements(元素)面板中改变的样式会被保存。对DOM的更改不会被保存。
只能保存在外部CSS文件中定义的样式。对element.style或内联样式的更改不会被保存。（如果你有内联样式，它们可以在Sources(源文件)面板上更改。）
如果您将CSS资源映射到本地文件，则 Elements(元素)面板中的样式更改会立即保存，而不需要显式按Ctrl+S或Cmd+S(Mac)保存。
如果您正在从远程服务器而不是本地服务器映射文件，当您刷新页面时，Chrome从远程服务器重新加载页面。您的更改仍会保存到磁盘，如果继续在工作区中进行编辑，则会重新应用。
您必须在浏览器中使用映射文件的完整路径。即您的索引文件必须在URL中包含.html，以便查看执行版本。

除了编辑现有文件之外，你还可以在用于工作区的本地映射目录中添加和删除文件。

要添加一个文件：

要删除一个文件：

在对文件进行实质性更改之前，有必要复制原始文件来备份。

要备份一个文件：

当你在Workspaces(工作区)中直接创建或者删除文件时，Sources(源文件)窗格中的目录会自动刷新并且显示目录中文件的变化。如果没有显示出来，你可以右键点击一个文件夹然后选择 Refresh 来刷新。

如果在外部编辑器中并行打开并且修改文件，并希望这些修改显示在DevTools中的时候，刷新是非常有用的。通常DevTools会自动捕获这样的更改，但如果你不敢确定，只需刷新文件夹即可。

要在DevTools中搜索已经加载的文件，请按Ctrl+O或Cmd+O（Mac），可以打开搜索对话框。您在工作区中也可以这么做，但同时会搜索到远程加载的文件和工作区中的本地文件。

要跨文件搜索字符串：

打开search(搜索)抽屉式窗格：单击Show Drawer(显示抽屉式窗格)按钮()，然后单击Search(搜索)选项卡;或按Ctrl+Shift+F或Cmd+Opt+F(Mac)。
在搜索字段中键入字符串，然后按Enter键。
如果字符串是正则表达式或需要不区分大小写，请勾选相应的复选框。

搜索结果显示在抽屉式窗格中，按文件名列出，文件名后面会显示每个文件中的匹配数。使用展开（）和折叠（）箭头可展开或折叠给定文件的结果。