“来源”面板概览

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

您可以使用 Sources（来源）面板查看和修改网站的资源，例如样式表、JavaScript 文件和图片。

概览

借助来源面板，您可以执行以下操作：

打开“来源”面板

如需打开“来源”面板，请按以下步骤操作：

  1. 打开开发者工具。
  2. 按以下键打开命令菜单：
    • macOS：Command+Shift+P
    • Windows、Linux、ChromeOS：Control+Shift+P
  3. 开始输入 sources，选择显示“来源”面板，然后按 Enter 键。

或者，在右上角，依次选择 more_vert 更多选项 > 更多工具 > 来源。

查看文件

点击网页标签页，查看网页已加载的所有资源。

“网页”标签页。

页面标签页的结构如下：

  • 顶层（例如上图中的 top）表示 HTML 框架。您会在访问的每个页面上看到 top。top 表示主文档框架。
  • 第二级（例如上面屏幕截图中的 developers.google.com）表示来源。
  • 第三级、第四级等表示从相应来源加载的目录和资源。例如，在上面的屏幕截图中，资源 devsite-googler-button 的完整路径为 developers.google.com/_static/19aa27122b/css/devsite-googler-button。

点击页面标签页中的文件，即可在编辑器标签页中查看其内容。您可以查看任何类型的文件。对于图片，您会看到图片预览。

在“编辑器”标签页中查看文件。

修改 CSS 和 JavaScript

点击编辑器标签页，以修改 CSS 和 JavaScript。开发者工具会更新页面以运行新代码。

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

内嵌语法错误提示。

如果您修改元素的 background-color，您会看到更改立即生效。

在“编辑器”标签页中修改 CSS。

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

在“编辑器”标签页中修改 JavaScript。

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

当您重新加载页面时，开发者工具会清除您的 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);

您可以将此代码保存在代码段中，并在需要时点击几个按钮即可运行。开发者工具会将代码段保存到您的文件系统中。例如，检查将 jQuery 库插入网页的代码段。

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

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

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

如需了解详情，请参阅在任意网页上运行代码段。

调试 JavaScript

与其使用 console.log() 来推断 JavaScript 出错的位置，不如考虑改用 Chrome 开发者工具调试工具。一般思路是设置一个断点（即代码中有意设置的停止位置），然后逐行逐步执行代码。

在断点处暂停。

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

如需了解有关在 DevTools 中进行调试的基础知识，请参阅开始调试 JavaScript。

只需专注于代码

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

为了让您获得现代化的 Web 调试体验，开发者工具会执行以下操作：

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

如需了解详情，请参阅以下资源：

设置工作区

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

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