“来源”面板概览

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用 Chrome DevTools 的 Sources 面板可以：

查看文件

使用 Page 窗格可以查看该网页已加载的所有资源。

“Page”窗格。

Page 窗格的组织结构：

  • 顶层（如上方屏幕截图中的 top）表示 HTML 框架。您可在以下位置找到top： 所访问的每个网页。top 表示主文档帧。
  • 第二个级别（例如上方屏幕截图中的 developers.google.com）代表一个来源。
  • 第三级、第四级等等，表示加载的目录和资源 从该源访问。例如，在上面的屏幕截图中，资源的完整路径 devsite-googler-button 为 developers.google.com/_static/19aa27122b/css/devsite-googler-button。

在 Page 窗格中点击某个文件，即可在 Editor 窗格中查看其内容。您可以查看任意类型 文件。对于图片，您会看到图片的预览。

在“编辑器”窗格中查看文件。

编辑 CSS 和 JavaScript

使用编辑器窗格修改 CSS 和 JavaScript。DevTools 会更新页面以运行您的新代码。

编辑器也可以帮助您进行调试。例如，它会在语法错误和其他问题（例如失败的 CSS @import 和 url() 语句，以及包含无效网址的 HTML href 属性）旁边添加下划线并显示内嵌错误提示。

内嵌语法错误提示。

如果您修改了元素的 background-color，则会发现更改已生效 。

在“编辑器”窗格中修改 CSS。

要使 JavaScript 更改生效，请按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）。开发者工具不会重新运行脚本，因此只有您在函数内做出的 JavaScript 更改才会生效。例如，请注意 console.log('A') 不会运行，而 console.log('B') 会运行。

在编辑器窗格中修改 JavaScript。

如果开发者工具在进行更改后重新运行整个脚本，则系统会将文本 A 记录到 控制台。

当您重新加载页面时，DevTools 会擦除您的 CSS 和 JavaScript 更改。请参阅设置 Workspace，了解如何将更改保存到文件系统中。

创建、保存和运行代码段

代码段是可在任何网页上运行的脚本。假设您反复输入 控制台中的以下代码，以便将 jQuery 库插入到网页中，让您 可以从控制台运行 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);

不过，您可以将这段代码保存在代码段中，只需点击几下按钮，即可随时运行 您需要它。DevTools 会将代码段保存到您的文件系统。例如，检查一个代码段 用于将 jQuery 库插入到页面中。

用于将 jQuery 库插入网页的代码段。

如需运行代码段，请执行以下操作：

  • 在 Snippets 窗格中打开文件，然后点击底部操作栏中的 Run 图标 “Run”按钮。。
  • 打开命令菜单，删除 > 字符，输入 !，然后输入您的 代码段，然后按 Enter 键。

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

调试 JavaScript

与其使用 console.log() 推断 JavaScript 出错的地方，不如考虑使用 Chrome 开发者工具调试工具。总体思路是设置一个断点， 故意停止的位置，然后单步调试代码的执行， 。

在断点处暂停。

在单步调试代码时，您可以查看和更改当前定义的所有 属性和变量）、在控制台中运行 JavaScript 等。

如需了解在开发者工具中调试的基础知识，请参阅 JavaScript 调试入门。

仅专注于您的代码

借助 Chrome 开发者工具，您可以过滤掉框架和构建工具（您在构建 Web 应用时利用）生成的干扰数据，从而专注于自己编写的代码。

为了向您提供现代 Web 调试体验，开发者工具会执行以下操作：

此外，如果框架支持，那么调试程序中的调用堆栈和控制台中的堆栈轨迹会显示异步操作的完整历史记录。

如需了解详情，请参阅：

设置工作区

默认情况下，如果您在 Sources 面板中修改文件，重新加载后这些更改会丢失 页面。借助工作区，您可以将在开发者工具中所做的更改保存到文件中 系统。从本质上讲，这让您可以将开发者工具用作代码编辑器。

如需开始使用，请参阅使用工作区修改文件。