本教程提供了一个练习机会:设置工作区 可以在您自己的项目中使用它借助 Workspace,您可以保存 通过 DevTools 存储计算机中存储的源代码。
概览
借助工作区,您可以将您在开发者工具中所做的更改保存到 。例如,假设:
- 您在桌面设备上拥有自己网站的源代码。
- 您正在从源代码目录运行本地 Web 服务器,因此该网站可以访问
时间:
localhost:8080
。 - 您已在 Google Chrome 中打开了
localhost:8080
,并使用开发者工具更改网站的 CSS。
启用工作区后,您在开发者工具中所做的 CSS 更改将保存到源代码中 。
限制
如果您使用的是现代框架,它可能会将源代码从 易于维护的格式经过优化,可以尽快投放。工作区为 在源代码的帮助下,我们通常能够将优化后的代码映射回您的原始源代码 地图。
开发者工具社区致力于在各种框架和工具中支持源映射提供的功能。 如果您在使用包含您所选框架的工作区时遇到问题,或者问题能够正常运行 完成一些自定义配置后,在邮寄名单中发起会话或提问 Stack Overflow 上,与开发者工具社区的其他成员分享您的知识。
相关功能:本地替换
本地替换是开发者工具的另一个与工作区类似的功能。 使用本地替换项来模拟 Web 内容或请求标头,无需等待后端更改或 并且需要在整个网页上看到这些更改 但您无需将更改映射到网页的源代码。
第 1 步:设置
完成本教程后,即可亲身体验工作区。
设置演示
- 将此演示代码库克隆到计算机上的某个目录。例如,替换为
~/Desktop
。 在
~/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
。在 Google Chrome 中打开一个标签页,然后转到网站的本地托管版本。您应该能够 可通过
localhost:8000
等网址进行访问。确切的端口号可能有所不同。
设置开发者工具
在本地托管的演示页面上打开开发者工具。
转到来源 >工作区,并在您克隆的
devtools-workspace-demo
文件夹中设置一个工作区。您可以通过以下几种方式完成此操作:- 将该文件夹拖放到编辑器中的 Sources(来源)。
- 点击选择文件夹链接,然后选择相应文件夹。
- 点击
Add folder(添加文件夹),然后选择相应文件夹。
在顶部提示中,点击 Allow 以向开发者工具授予目录的读取和写入权限。
在 Workspace 标签页中,现在 index.html
、script.js
和 styles.css
旁边有一个绿点。这些绿点表示开发者工具已在页面的网络资源与 devtools-workspace-demo
中的文件之间建立了映射。
第 2 步:将 CSS 更改保存到磁盘
在文本编辑器中打开
/devtools-workspace-demo/styles.css
。请注意h1
的color
属性 元素设置为fuchsia
。关闭文本编辑器。
返回开发者工具,点击 Elements 标签页。
将
<h1>
元素的color
属性的值更改为您喜欢的颜色。为此,请执行以下操作:- 点击 DOM 树中的
<h1>
元素。 - 在 Styles 窗格中,找到
h1 { color: fuchsia }
CSS 规则,然后将颜色更改为您喜欢的颜色。在此示例中,颜色设置为绿色。
Styles 窗格中
styles.css:1
旁边的绿点表示您所做的任何更改都会映射到
/devtools-workspace-demo/styles.css
。- 点击 DOM 树中的
再次用文本编辑器打开
/devtools-workspace-demo/styles.css
。现在,color
属性设置为 最喜欢的颜色。重新加载页面。
<h1>
元素的颜色仍设置为您最喜欢的颜色。这行 因为在您做出更改并且开发者工具将更改保存到磁盘时。然后,当您重新加载 则您的本地服务器会从磁盘传送文件的修改副本。
第 3 步:将 HTML 更改保存到磁盘
请尝试在“元素”面板中更改 HTML
- 打开 Elements 标签页。
双击
h1
元素的文本内容(即Workspaces Demo
),并将其替换掉 与I ❤️ Cake
共享。在文本编辑器中打开
/devtools-workspace-demo/index.html
。系统不会显示您刚刚所做的更改。重新加载页面。页面会还原为其原始标题。
可选:无法正常使用的原因
- 您在 Elements 面板上看到的节点树表示页面的 DOM。
- 为了显示网页,浏览器需要通过网络提取 HTML,解析 HTML,然后将其转换 转换为 DOM 节点树。
- 如果网页包含任何 JavaScript,该 JavaScript 可以添加、删除或更改 DOM 节点。CSS 可以
也可以通过
content
属性更改 DOM。 - 浏览器最终使用 DOM 来确定其应呈现给浏览器用户的内容。
- 因此,用户看到的网页的最终状态可能会与 浏览器抓取了。
- 这使得开发者工具难以解析在 Elements 面板中进行的更改 因为 DOM 受 HTML、JavaScript 和 CSS 的影响。
简而言之,DOM 树 !==
HTML。
在“来源”面板中更改 HTML
如果您想保存对网页 HTML 所做的更改,请在来源面板中执行相关操作。
- 转到来源 >页面。
- 点击 (index)。系统会打开该网页的 HTML 代码。
- 将
<h1>Workspaces Demo</h1>
替换为<h1>I ❤️ Cake</h1>
。 - 按 Command+S (Mac) 或 Ctrl+S(Windows、Linux、ChromeOS)以保存更改。
重新加载页面。
<h1>
元素仍在显示新文本。打开
/devtools-workspace-demo/index.html
。<h1>
元素包含新文本。
第 4 步:将 JavaScript 更改保存到磁盘
Sources 面板也是用于更改 JavaScript 的位置。但有时您需要 在进行更改的同时访问其他面板,例如Elements面板或Elements面板 。系统可以使来源面板与其他面板一起打开。
- 打开 Elements 标签页。
- 按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)。命令菜单 会打开。
输入
QS
,然后选择显示快速源代码。在开发者工具窗口的底部,现在有 一个快速来源标签页。该标签页显示的是
index.html
的内容,也就是最后一个 您在来源面板中修改的文件。快速源代码标签页可让您从以下位置找到编辑器: Sources(来源)面板,以便在打开其他面板的同时修改文件。按 Command + P (Mac) 或 Ctrl + P(Windows、Linux、ChromeOS)以打开打开文件对话框。
输入
script
,然后选择 devtools-workspace-demo/script.js。请注意演示中的
Edit and save files in a workspace
链接。样式定期更新。将以下代码添加到 Quick Source 标签页中 script.js 的底部。
document.querySelector('a').style = 'font-style:italic';
按 Command+S (Mac) 或 Ctrl+S(Windows、Linux、ChromeOS)以保存更改。
重新加载页面。页面上的链接现在为斜体。
后续步骤
您可以在一个工作区中设置多个文件夹。所有此类文件夹都列在 设置 >Workspace。
接下来,了解如何使用开发者工具更改 CSS 和调试 JavaScript。