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

Sofia Emelianova
Sofia Emelianova

本教程提供了一个练习机会:设置工作区 可以在您自己的项目中使用它借助 Workspace,您可以保存 通过 DevTools 存储计算机中存储的源代码。

概览

借助工作区,您可以将您在开发者工具中所做的更改保存到 。例如,假设:

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

启用工作区后,您在开发者工具中所做的 CSS 更改将保存到源代码中 。

限制

如果您使用的是现代框架,它可能会将源代码从 易于维护的格式经过优化,可以尽快投放。工作区为 在源代码的帮助下,我们通常能够将优化后的代码映射回您的原始源代码 地图

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

相关功能:本地替换

本地替换是开发者工具的另一个与工作区类似的功能。 使用本地替换项来模拟 Web 内容或请求标头,无需等待后端更改或 并且需要在整个网页上看到这些更改 但您无需将更改映射到网页的源代码。

第 1 步:设置

完成本教程后,即可亲身体验工作区。

设置演示

  1. 将此演示代码库克隆到计算机上的某个目录。例如,替换为 ~/Desktop
  2. ~/Desktop/devtools-workspace-demo 中启动本地 Web 服务器。下面是一些用于启动 Google Cloud 控制台的示例代码 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. 在本地托管的演示页面上打开开发者工具

  2. 转到来源 >工作区,并在您克隆的 devtools-workspace-demo 文件夹中设置一个工作区。您可以通过以下几种方式完成此操作:

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

    提示中的“允许”按钮。

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

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

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

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

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

  2. 关闭文本编辑器。

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

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

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

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

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

  5. 再次用文本编辑器打开 /devtools-workspace-demo/styles.css。现在,color 属性设置为 最喜欢的颜色。

  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 来确定其应呈现给浏览器用户的内容。
  • 因此,用户看到的网页的最终状态可能会与 浏览器抓取了。
  • 这使得开发者工具难以解析在 Elements 面板中进行的更改 因为 DOM 受 HTML、JavaScript 和 CSS 的影响。

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

在“来源”面板中更改 HTML

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

  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 的位置。但有时您需要 在进行更改的同时访问其他面板,例如Elements面板或Elements面板 。系统可以使来源面板与其他面板一起打开。

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

    通过命令菜单打开“快速源代码”标签页。

    该标签页显示的是 index.html 的内容,也就是最后一个 您在来源面板中修改的文件。快速源代码标签页可让您从以下位置找到编辑器: Sources(来源)面板,以便在打开其他面板的同时修改文件。

  4. Command + P (Mac) 或 Ctrl + 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. 重新加载。 重新加载页面。页面上的链接现在为斜体。

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

后续步骤

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

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