“来源”面板概览

凯切·巴斯克斯
Kayce Basques
索菲亚·埃梅利安诺娃
Sofia Emelianova

使用 Chrome 开发者工具 Sources 面板可以:

查看文件

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

“Page”窗格。

Page 窗格的结构:

  • 顶层(如上方屏幕截图中的 top)表示 HTML 框架。您可以在所访问的每个网页上找到 toptop 表示主文档帧。
  • 第二级别(如上面屏幕截图中的 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 会更新页面以运行您的新代码。

Editor 还可以帮助您进行调试。例如,它会在语法错误和其他问题(例如失败的 CSS @importurl() 语句,以及 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

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

在断点处暂停。

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

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

只专注于您的代码

Chrome 开发者工具可以滤除构建 Web 应用时所用框架和构建工具产生的干扰,从而让您仅专注于自己编写的代码。

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

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

如需了解详情,请参阅:

设置工作区

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

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