Sources 面板概览

使用 Chrome DevTools Sources 面板可以:

查看文件

使用 Network 窗格可以查看页面已加载的所有资源。

Network 窗格
图 1. Network 窗格

Network 窗格的组织结构:

  • 顶层(如图 1 中的 top)表示 HTML 帧。 您在访问的每个页面上都可找到 toptop 表示主文档帧。
  • 第二层(如图 1 中的 developers.google.com)表示来源
  • 第三层、第四层等等,表示从该来源加载的目录和资源。 例如,在图 1 中,资源 devsite-googler-button 的完整路径是 developers.google.com/_static/f6e16de9fa/css/devsite-googler-button

Network 窗格中点击文件可以在 Editor 窗格中查看其内容。 您可以查看任何类型的文件。 如果是图像文件,您可以查看图像的预览版本。

在 Editor 窗格中查看文件
图 2. 在 Editor 窗格中查看 jquery-bundle.js 的内容

编辑 CSS 和 JavaScript

使用 Editor 窗格编辑 CSS 和 JavaScript。 DevTools 会更新页面以运行您的新代码。 例如,如果编辑某元素的 background-color,更改将立即生效。

在 Editor 窗格中编辑 CSS
图 3. 在 Editor 窗格中编辑 CSS,以将元素的背景颜色从蓝色更改为红色

CSS 更改操作会立即生效,且不需要保存。 要让 JavaScript 更改操作生效,需按 Command+S (Mac) 或 Control+S(Windows、Linux)。 DevTools 不能重新运行脚本,因此只有在函数内作出的 JavaScript 更改才会生效。 例如,注意在图 4 中,console.log('A') 没有运行,而 console.log('B') 运行。 如果 DevTools 在作出更改后重新运行整个脚本,则系统会将文本 A 记录到 Console 中。

在 Editor 窗格中编辑 JavaScript
图 5. 在 Editor 窗格中编辑 JavaScript

重新加载页面后,DevTools 会清空您的 CSS 和 JavaScript 更改内容。 如需了解如何将更改内容保存到文件系统中,请参阅设置工作区

创建、保存和运行代码段

代码段是可在任何页面上运行的脚本。 假设为将 jQuery 库插入页面中,您在 Console 中反复输入以下代码,以便从 Console 运行 jQuery 命令:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

不过,您可以在 Snippet 中保存此代码,并在需要时通过点击几个按钮运行该代码。 DevTools 可将此代码段保存到您的文件系统中。

将 jQuery 库插入页面的代码段。
图 6. 将 jQuery 库插入页面的代码片段

运行代码段

  • 通过 Snippets 窗格打开文件,然后点击 Run Run 按钮
  • 打开 Command Menu、删除 > 字符、输入 !、输入您代码段的名称,然后按 Enter 键。

如需了解详情,请参阅从任何页面运行代码段

调试 JavaScript

与其使用 console.log() 推断 JavaScript 出错的地方,不如考虑使用 Chrome DevTools 调试工具。 其总体思路是在代码中有意停止执行代码的位置设置断点,然后一次一行地单步调试执行代码。 在单步调试代码时,您可以查看和更改当前定义的所有属性和变量的值,在 Console 中运行 JavaScript 等等。

如需了解在 DevTools 中调试的基础知识,请参阅 JavaScript 调试入门

调试 JavaScript
图 7. 调试 JavaScript

设置工作区

默认情况下,在 Sources 面板中编辑文件后,这些更改内容会在重新加载页面时丢失。 您可以通过 Workspaces,将您在 DevTools 中作出的更改保存到您的文件系统中。 这样,您基本上可将 DevTools 用作代码编辑器。

如需入门信息,请参阅使用 DevTools 的工作区设置持久化

反馈

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.