在工作区中编辑和保存文件

Sofia Emelianova
Sofia Emelianova

本教程提供了一个机会,让您通过设置工作区来进行练习,以便在自己的项目中使用它。借助 Workspace,您可以将在 DevTools 中所做的更改保存到存储在计算机上的源代码中。

概览

借助工作区,您可以将在 DevTools 中进行的更改保存到计算机上同一文件的本地副本。例如,假设:

  • 您已在桌面设备上拥有网站的源代码。
  • 您将从源代码目录运行本地 Web 服务器,以便在 localhost:8080 访问该网站。
  • 您已在 Google Chrome 中打开了 localhost:8080,并使用开发者工具更改网站的 CSS。

启用工作区后,您在 DevTools 中所做的 CSS 更改会保存到桌面上的源代码中。

限制

如果您使用的是现代框架,它可能会将源代码从易于维护的格式转换为经过优化可尽快运行的格式。借助源代码映射,工作区通常能够将优化后的代码映射回原始源代码。

开发者工具社区致力于在各种框架和工具中支持源映射提供的功能。如果您在使用工作区与所选框架搭配使用时遇到问题,或者在进行一些自定义配置后使其正常运行,请在邮寄名单中发起会话在 Stack Overflow 上提问,以便与其他开发者工具社区成员分享您的知识。

相关功能:本地替换

本地替换项是与工作区类似的另一项开发者工具功能。您可以使用本地替换项来模拟 Web 内容或请求标头,而无需等待后端更改,或者您想要对网页进行更改进行实验,并且需要跨网页加载查看这些更改,但您并不关心将更改映射到网页的源代码。

第 1 步:设置

完成本教程,即可动手体验 Workspace。

设置演示

  1. 将此演示代码库克隆到计算机上的某个目录。例如,替换为 ~/Desktop
  2. ~/Desktop/devtools-workspace-demo 中启动本地 Web 服务器。下面是用于启动 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

  3. 在 Google Chrome 中打开一个标签页,然后前往本地托管的网站版本。您应该能够通过网址(例如 localhost:8000)访问它。确切的端口号可能有所不同。

    在 Chrome 中打开的本地托管演示页面。

设置开发者工具

  1. 在本地托管的演示页面上打开 DevTools

  2. 依次前往 Sources(来源)> Workspace(工作区),然后在您克隆的 devtools-workspace-demo 文件夹中设置工作区。您可以通过以下几种方式完成此操作:

    • 将该文件夹拖放到编辑器中的 Sources(来源)。
    • 点击选择文件夹链接,然后选择文件夹。
    • 点击 添加 Add folder(添加文件夹),然后选择相应文件夹。依次选择“来源”和“工作区”标签页。
  3. 在顶部的提示中,点击允许,以向开发者工具授予对该目录的读写权限。

    提示中的“允许”按钮。

Workspace 标签页中,现在 index.htmlscript.jsstyles.css 旁边有一个绿点。这些绿点表示 DevTools 已在网页的网络资源与 devtools-workspace-demo 中的文件之间建立了映射。

“Workspace”标签页现在会显示本地文件与网络文件之间的映射。

第 2 步:将 CSS 更改保存到磁盘

  1. 在文本编辑器中打开 /devtools-workspace-demo/styles.css。请注意如何将 h1 元素的 color 属性设置为 fuchsia

    在文本编辑器中查看 Styles.css。

  2. 关闭文本编辑器。

  3. 返回开发者工具,点击 Elements 标签页。

  4. <h1> 元素的 color 属性的值更改为您喜欢的颜色。为此,请执行以下操作:

    1. 点击 DOM 树中的 <h1> 元素。
    2. Styles 窗格中,找到 h1 { color: fuchsia } CSS 规则,然后将颜色更改为您喜欢的颜色。在此示例中,颜色设置为绿色。

    将 h1 元素的 color 属性设置为绿色。

    如果样式窗格中 styles.css:1 旁边显示绿点 绿点。,则表示您所做的任何更改都会映射到 /devtools-workspace-demo/styles.css

  5. 再次在文本编辑器中打开 /devtools-workspace-demo/styles.csscolor 属性现在已设置为您的首选颜色。

  6. 重新加载。 重新加载页面。<h1> 元素的颜色仍设为您喜欢的颜色。这之所以有效,是因为您进行更改后开发者工具将更改保存到磁盘。然后,当您重新加载页面时,本地服务器会从磁盘传送该文件的修改后的副本。

第 3 步:将 HTML 更改保存到磁盘

尝试从“元素”面板更改 HTML

  1. 打开 Elements 标签页。
  2. 双击 h1 元素的文本内容(显示“Workspaces Demo”),将其替换为 I ❤️ Cake

    正在尝试通过 Elements 面板的 DOM 树更改 HTML。

  3. 在文本编辑器中打开 /devtools-workspace-demo/index.html。系统不会显示您刚刚所做的更改。

  4. 重新加载。 重新加载页面。网页会恢复为原始标题。

可选:无法正常使用的原因

  • 您在 Elements 面板上看到的节点树表示页面的 DOM
  • 为了显示网页,浏览器会通过网络提取 HTML,解析 HTML,然后将其转换为 DOM 节点树。
  • 如果网页包含任何 JavaScript,该 JavaScript 可以添加、删除或更改 DOM 节点。CSS 也可以通过 content 属性更改 DOM。
  • 浏览器最终会使用 DOM 来确定应向浏览器用户呈现哪些内容。
  • 因此,用户看到的网页的最终状态可能与浏览器提取的 HTML 大不相同。
  • 这使得 DevTools 难以确定应在何处保存在 Elements 面板中进行的更改,因为 DOM 会受到 HTML、JavaScript 和 CSS 的影响。

简而言之,DOM 树 !== HTML。

在“来源”面板中更改 HTML

如果您想保存对网页 HTML 所做的更改,请在 Sources 面板中执行此操作。

  1. 依次选择来源 > 网页
  2. 点击 (index)。系统会打开该网页的 HTML 代码。
  3. <h1>Workspaces Demo</h1> 替换为 <h1>I ❤️ Cake</h1>
  4. Command+S (Mac) 或 Ctrl+S(Windows、Linux、ChromeOS)以保存更改。
  5. 重新加载。 重新加载页面。<h1> 元素仍在显示新文本。

    在“Sources”面板中更改 HTML。

  6. 打开 /devtools-workspace-demo/index.html<h1> 元素包含新文本。

第 4 步:将 JavaScript 更改保存到磁盘

您还可以在 Sources 面板中更改 JavaScript。不过,在更改网站时,您有时需要访问其他面板,例如元素面板或控制台面板。可以使来源面板与其他面板一起打开。

  1. 打开元素标签页。
  2. Command+Shift+P(Mac)或 Control+Shift+P(Windows、Linux、ChromeOS)。命令菜单随即会打开。
  3. 输入 QS,然后选择显示快速源代码。现在,开发者工具窗口的底部有一个 Quick Source 标签页。

    通过 Command Menu 打开“快捷来源”标签页。

    该标签页显示的是 index.html 的内容,这是您上次在 Sources 面板中编辑的文件。快速来源标签页会显示 Sources 面板中的编辑器,以便您在打开其他面板时编辑文件。

  4. Command+P(Mac)或 Control+P(Windows、Linux、ChromeOS)打开打开文件对话框。

  5. 输入 script,然后选择 devtools-workspace-demo/script.js

    通过“打开文件”对话框打开脚本。

  6. 请注意演示中的 Edit and save files in a workspace 链接。样式定期更新。

  7. Quick Source(快捷来源)标签页中,将以下代码添加到 script.js 的底部。

    document.querySelector('a').style = 'font-style:italic';
    
  8. Command+S (Mac) 或 Ctrl+S(Windows、Linux、ChromeOS)以保存更改。

  9. 重新加载。 重新加载页面。页面上的链接现在为斜体。

页面上的链接现在为斜体。

后续步骤

您可以在工作区中设置多个文件夹。 设置 > 工作区中列出了所有此类文件夹。

接下来,了解如何使用开发者工具更改 CSS调试 JavaScript