“来源”面板概览

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用 Chrome 开发者工具 Sources 面板可以执行以下操作：

查看文件

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

“Page”窗格。

Page 窗格的组织方式：

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

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

在 Editor 窗格中查看文件。

编辑 CSS 和 JavaScript

使用 Editor 窗格修改 CSS 和 JavaScript。DevTools 会更新页面以运行新代码。

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

内嵌语法错误提示。

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

在 Editor 窗格中修改 CSS。

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

在 Editor 窗格中修改 JavaScript。

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

当您重新加载页面时，开发者工具会清除您的 CSS 和 JavaScript 更改。请参阅设置工作区，了解如何保存对文件系统所做的更改。

创建、保存和运行代码段

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

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

将 jQuery 库插入页面的代码段。

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

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

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

调试 JavaScript

不妨考虑使用 Chrome 开发者工具调试工具，而不是使用 console.log() 来推断 JavaScript 出了问题。大致思路是，在代码中有意地设置断点，然后逐步执行代码的执行，一次一行。

在断点处暂停。

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

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

只专注于您的代码

Chrome 开发者工具可以滤除框架生成的噪声，让您可以在构建 Web 应用时充分利用构建工具，从而仅专注于自己编写的代码。

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

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

如需了解详情，请参阅：

设置工作区

默认情况下，当您在来源面板中修改文件时，这些更改会在重新加载页面时丢失。通过工作区，您可以将在开发者工具中所做的更改保存到文件系统。从本质上讲，这允许您将开发者工具用作代码编辑器。

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