源工具概述

使用 " 源"工具查看、修改和调试前端 JavaScript 代码，并检查包含当前网页的资源。

详细内容：

• 导航器、编辑器和调试程序窗格
• 使用导航器窗格选择文件
  • 使用"页面"选项卡浏览构建当前网页的资源
    • "页面"选项卡中的图标
    • 按文件夹或文件夹对文件进行分组简单列表
  • 将本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到磁盘
  • 使用"覆盖"选项卡覆盖包含本地文件的服务器文件
  • 将"内容脚本"选项卡用于Microsoft Edge扩展
  • 使用"代码段"选项卡在任何网页上运行 JavaScript 代码段
  • 使用命令菜单打开文件
• 使用编辑器窗格查看或编辑文件
  • 编辑 JavaScript 文件
    • 保存和撤消
    • 查找和替换
    • 显示所做的更改
    • 函数中的更改生效
  • 使用非常打印重新格式化缩小的 JavaScript 文件
  • 将缩小代码映射到源代码以显示可读代码
  • 从源代码转换到编译的前端代码
  • 编辑 CSS
    • 使用“源”工具的“工作区”选项卡时，使用“元素”工具中的“样式”选项卡编辑 CSS
    • 在“源”工具的“页面”选项卡或“工作区”选项卡中编辑 CSS
  • 编辑 HTML 文件
  • 访问行号或函数
  • 快速源工具，用于在使用其他工具时显示源文件
• 使用调试器窗格调试 JavaScript 代码
  • 使用调试器的基本方法
  • 调试器监视和作用域比 console.log 的优点
  • 直接从Visual Studio Code调试
  • 有关调试的文章
• 另请参阅

导航器、编辑器和调试程序窗格

" 源 "工具具有三个窗格：

窗格	操作
导航器 窗格	在从服务器返回的资源之间导航以构建当前网页。 选择文件、图像和其他资源，并查看其路径。 （可选）设置本地 Workspace 以将更改直接保存到源文件。
编辑器 窗格	查看从服务器返回的 JavaScript、HTML、CSS 和其他文件。 对 JavaScript 或 CSS 进行实验性编辑。 在刷新页面之前，所做的更改将一直保留;如果使用 Workspaces 保存到本地文件，则页面刷新后将保留所做的更改。 使用 Workspaces 或 Overrides 时，也可以编辑 HTML 文件。
调试器 窗格	使用 JavaScript 调试器设置断点、暂停运行 JavaScript，并逐步执行代码，包括你进行的任何编辑，同时观察你指定的任何 JavaScript 表达式。 观察并手动更改当前代码行范围内变量的值。

下图显示了 导航器 窗格，其中突出显示了 DevTools 左上角的红色框，右上角突出显示了 编辑器 窗格，底部突出显示了 调试器 窗格。 最左侧是浏览器窗口的主要部分，显示呈现的网页灰显，因为调试程序暂停在断点上：

当 DevTools 宽时， 调试 器窗格放置在右侧，并包括 作用域 和 监视：

若要最大化"源"工具的大小，请取消停靠"DevTools"到单独的窗口，并可以选择将"DevTools"窗口移动到单独的监视器。 请参阅更改 DevTools 放置位置（取消停靠，停靠到底部，停靠到左侧）。

若要加载上面显示的调试演示网页，请参阅下面的使用 调试器的基本方法。

使用导航器窗格选择文件

使用 左侧 ( 导航器窗格) 导航从服务器返回的资源之间导航以构建当前网页。 选择文件、图像和其他资源，并查看其路径。

“导航器”窗格包含以下选项卡：

选项卡	描述	文档
页面	查看浏览器从服务器或文件系统下载的资源、检查其内容并调试代码。	使用"页面"选项卡浏览构建当前网页的资源
工作	在 DevTools 中查看和编辑本地文件，以在浏览器中将 DevTools 用作集成开发环境 (IDE) 。	将本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到磁盘
替代	尝试更改网页，并在刷新网页后保留更改，而无需将更改映射到网页的源代码。	使用"覆盖"选项卡覆盖包含本地文件的服务器文件
内容脚本	查看Microsoft Edge 扩展加载的内容脚本。	将"内容脚本"选项卡用于Microsoft Edge扩展
代码片段	创建并保存 JavaScript 代码片段，以便可以在任何网页上轻松运行 JavaScript 代码片段。	使用"代码段"选项卡在任何页面上运行 JavaScript 代码段

若要访问“导航器”窗格的任何隐藏选项卡，请单击“ 更多选项卡 () 按钮。

详细信息如下所示。 另请参阅以下： 使用命令菜单打开文件。

使用"页面"选项卡浏览构建当前网页的资源

“源”工具中的“页面”选项卡显示当前网页使用的资源，例如网页的 HTML 文档、JavaScript 文件、CSS 文件或图像。 “ 页面 ”选项卡中显示的资源在与下载资源所在的文件系统或服务器路径匹配的树中组织。

使用“ 页面 ”选项卡可以查看浏览器从服务器或文件系统下载的资源、检查其内容以及调试代码。

若要在“编辑器”窗格中显示文件，请在“页面”选项卡中选择一个文件。对于图像，将显示图像预览。

若要显示资源的 URL 或路径，请将鼠标悬停在资源上。

若要将文件加载到浏览器的新选项卡中，或显示其他操作，请右键单击文件名。

"页面"选项卡中的图标

" 页面 "选项卡使用下列图标：

• 窗口图标以及标签 top表示main文档框架，即 HTML 框架：
• 云图标表示源：
• 文件夹图标表示目录：
• 页面图标表示资源：

按文件夹或文件夹对文件进行分组简单列表

" 页面 "选项卡显示按服务器和目录分组的文件或资源，或作为简单列表。

若要更改资源的分组时间，请进行配置：

1. 在左侧) 的“导航器”窗格 (选项卡旁边，单击“ ... (更多选项) 按钮。 将显示菜单。
2. 选择或清除" 按文件夹分组" 选项。

将本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到磁盘

使用“源”工具中的“工作区”选项卡可以查看和编辑 DevTools 中的本地文件。 与本地 Web 服务器结合使用时 ，“工作区 ”选项卡非常有用，因为随后可以在 Edge 中加载本地网站，并在 DevTools 中编辑其源文件。

将文件夹添加到“ 工作区 ”选项卡时，该文件夹中的文件和子文件夹将显示在选项卡中，你可以打开文件来查看和编辑它们。

“ 工作区 ”选项卡不显示浏览器下载用于显示网页的资源;“ 工作区 ”选项卡仅显示你添加的本地文件夹中的文件夹和文件。

在整个 DevTools 中，一个绿色的“映射”点显示在一个文件中，DevTools 能够找到工作区文件和网页资源之间的映射。 例如，如果页面使用名为 的 styles.css 样式表，并且工作区有一个名为 styles.css的文件，DevTools 会将文件相互映射并显示绿色的“映射”点。

绿色的“映射”点表示将保存对网页资源所做的更改。 例如，在“元素”工具的“样式”选项卡中进行更改时，编辑网页样式表 (而不是) 的文件。 如果“ 样式 ”选项卡中显示的 CSS 文件名具有绿色的“映射”点，则表示该样式表已映射到工作区中的文件，并且所做的更改不会丢失。

默认情况下，在 源 工具中编辑文件时，刷新网页时将放弃更改。 Sources工具使用 Web 服务器返回的前端资源的副本。 修改服务器返回的这些前端文件时，更改不会保留，因为您未更改源文件。 您还需要在实际源代码中应用您的编辑，然后重新部署到服务器。

相比之下，使用 Workspace 时，刷新网页时，对前端代码所做的更改将保留。 对于 Workspace，当您编辑服务器返回的前端代码时，"源"工具还会将编辑应用于本地源代码。 然后，对于其他用户查看更改，只需将已更改的源文件重新部署到服务器。

如果服务器返回的 JavaScript 代码与本地 JavaScript 源代码相同，工作区可正常工作。 当工作流涉及源代码转换（如缩小或 TypeScript 编译）时，工作区不能正常工作。

另请参阅：

• 编辑和保存工作区中的文件 (源工具工作区选项卡)
• 从“源”工具的“工作区”选项卡打开演示文件夹

使用"覆盖"选项卡覆盖包含本地文件的服务器文件

使用“源”工具中的“替代”选项卡，可以使用本地文件替代来自 Web 服务器的任何响应。 “ 替代 ”选项卡可用于对任何网站上的单个文件（例如 CSS 文件）进行临时更改。 如果要尝试对网页进行更改，并且需要在刷新网页后保留更改，但不关心将更改映射到网页的源代码，请使用 替代 。

若要开始使用“替代”选项卡，请在文件系统上创建一个新文件夹，然后在“替代”选项卡中选择该文件夹。此后，在“元素”工具的“样式”选项卡或“源”工具的“页面”选项卡中所做的任何更改将保存在新文件夹中。 DevTools 使用本地文件来替代匹配的服务器响应。

另请参阅：

• 使用本地副本替代网页资源（“替代”选项卡）
• 将已处理的代码映射到原始源代码，以便进行调试
• 键盘快捷方式中的源工具键盘快捷方式

将"内容脚本"选项卡用于Microsoft Edge扩展

使用“导航器”窗格的“内容脚本”选项卡可以查看安装Microsoft Edge 扩展加载的任何内容脚本。

当调试器单步执行你无法识别的代码时，你可能希望将该代码添加到 “忽略列表”，以避免单步执行该代码。 请参阅 将内容脚本添加到忽略列表。

另请参阅：

• 内容脚本
• 示例：使用内容脚本的图片插入器

使用"代码段"选项卡在任何网页上运行 JavaScript 代码段

使用导航器窗格的代码片段选项卡创建和保存 JavaScript 代码片段，以便可以在任何网页上轻松运行这些代码片段。

例如，假设您经常在 控制台中输入以下代码，以将 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);

相反，您可以将此代码保存在 代码 段中，然后随时轻松地运行它。 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 时，DevTools 会将 代码片段 保存到文件系统。

有多种方法可以运行代码段：

• 在 导航器窗格中 ，选择" 代码 段"选项卡，然后选择代码段文件将其打开。 然后在“编辑器”窗格底部，单击“运行” (“) 按钮。
• 当 DevTools 具有焦点时，按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开 命令菜单，然后键入 ！。

代码段 类似于小书签。

另请参阅：

• 在任何网页上运行 JavaScript 的代码片段

使用命令菜单打开文件

若要打开文件，除了使用“源”工具中的“导航器”窗格外，还可以从 DevTools 中的任何位置使用命令菜单。

• 在 DevTools 中的任何位置，在 Windows/Linux 上按 Ctrl+P ，或在 macOS 上按 Command+P 。 此时会显示“命令菜单”，并列出“源”工具的“导航器”窗格选项卡中的所有资源。
• 或者，在“源”工具中“导航器”窗格的选项卡旁边，单击“更多选项 (...) ”按钮，然后选择“打开文件”。

若要显示和选取所有 .js 文件的列表，请键入 .js。

如果键入 ？， “命令菜单” 会显示多个命令，包括 ...打开文件。 如果按 Backspace 清除 命令菜单，将显示文件列表。

有关详细信息，请参阅 Run commands with the Microsoft Edge DevTools Command Menu。

使用编辑器窗格查看或编辑文件

使用“编辑器”窗格查看或编辑文件，包括 JavaScript、HTML、CSS 和图像文件。 “编辑器”窗格显示你在任一“导航器”窗格选项卡中选择的任何文件的内容：

• 页面
• 工作
• 替代
• 内容脚本
• 代码片段

例如，“编辑器”窗格可以显示：

• 代码段的内容。
• 未在前端代码中实际使用的 工作区 文件的内容 (因为 Workspace 允许编辑要) 的任何文件夹的内容。

" 编辑器 "窗格对各种文件类型的支持级别如下：

文件类型	支持的操作
JavaScript	查看、编辑和调试。
CSS	查看和编辑。
HTML	查看和编辑。
图片	“查看”。

默认情况下，刷新网页时将放弃编辑。 有关如何将更改保存到文件系统的信息，请参阅将 本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到磁盘，上面的。

以下子部分涵盖"编辑器"窗格：

• 编辑 JavaScript 文件
• 使用非常打印重新格式化缩小的 JavaScript 文件
• 将缩小代码映射到源代码以显示可读代码
• 从源代码转换到编译的前端代码
• 在“源”工具的“页面”选项卡或“工作区”选项卡中编辑 CSS
• 编辑 HTML 文件
• 访问行号或函数
• 快速源工具，用于在使用其他工具时显示源文件

另请参阅：

• 从“源”工具的“工作区”选项卡打开演示文件夹

编辑 JavaScript 文件

若要在 DevTools 中编辑 JavaScript 文件，请在源工具中使用编辑器窗格。

若要将文件加载到"编辑器"窗格中，请使用导航器窗格（左侧）中的"页"选项卡。 或者使用 命令菜单，如下所示：在 DevTools 的右上角，选择 “自定义并控制 DevTools (...”) 然后选择“ 打开文件”。

另请参阅：

• 从“源”工具的“工作区”选项卡打开演示文件夹

保存和撤消

若要使 JavaScript 更改生效，请按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。

如果更改文件，文件名旁边将出现一个星号。

• 若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。
• 若要撤消更改，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。

默认情况下，刷新网页时将放弃您的编辑。 有关如何在本地文件系统中保存更改的详细信息，请参阅 编辑和保存工作区中的文件 (源工具工作区选项卡) 。

查找和替换

若要在当前文件中查找文本，请选择“编辑器”窗格以使其具有焦点，然后在 Windows/Linux 上按 Ctrl+F，或在 macOS 上按 Command+F。

若要查找和替换文本，请选择“查找”文本框左侧的“替换 (A-B>) ”按钮。 查看可编辑文件时，将显示“替换 (A-B>) ”按钮。

显示所做的更改

定义工作区时，将保存对 JavaScript 所做的更改，并在 “更改” 工具中可见。

若要查看对文件所做的更改，请在“编辑器”窗格中右键单击，然后选择“本地修改”。

“ 快速视图 ”面板在 DevTools 底部打开，显示“ 更改 ”选项卡中的更改。

另请参阅：

• 使用更改工具跟踪对文件的更改
• 使用快速源工具显示或编辑源文件

函数中的更改生效

定义工作区时，JavaScript 函数正文中的更改将生效。

DevTools 不会重新运行脚本，因此唯一生效的 JavaScript 更改是你在函数内所做的更改。 例如，在下图中，我们向服务器返回的 JavaScript 添加了以下代码：

• 我们在任何函数 console.log('A') 之外添加了 语句。
• 我们在 函数 console.log('B') 中添加了 onClick 语句。 然后保存更改，在窗体中输入数字，然后选择窗体按钮以发送窗体。

提交表单后， console.log('A')位于全局范围的 不会运行，但在 console.log('B')函数内部 onClick 运行，输出 B 到 控制台：

使用非常打印重新格式化缩小的 JavaScript 文件

在“编辑器”窗格中打开缩小的文件时，系统会自动重新设置其格式。

若要将文件还原为原始缩小状态，”窗格底部 (格式) 的“漂亮的打印”按钮（显示为大括号）。

有关详细信息，请参阅使用非常打印 重新设置缩小的 JavaScript 文件。

将缩小代码映射到源代码以显示可读代码

来自预处理器的源映射会导致 DevTools 加载原始 JavaScript 源文件，以及服务器返回的缩小的已转换 JavaScript 文件。 然后，在设置断点并逐步执行代码时查看原始源文件。 同时，Microsoft Edge运行缩小代码。

在“编辑器”窗格中，如果右键单击 JavaScript 文件，然后选择“添加源映射”，将显示一个弹出框，其中包含“源地图 URL”文本框和“添加”按钮。

即使组合、缩小或编译前端代码，源映射方法也保持其可读和可调试性。 有关详细信息，请参阅将处理的代码映射到原始源代码，以便进行调试。

从源代码转换到编译的前端代码

如果使用转换 JavaScript 文件（如 React）的框架，则本地源 JavaScript 可能不同于服务器返回的前端 JavaScript。 此方案不支持工作区，但在此方案中支持源代码映射。

在开发环境中，服务器可能包括源地图和原始或 .ts.jsx 用于React。 源 工具 显示这些文件，但不允许编辑这些文件。 当你设置断点并使用调试器时，DevTools 将显示原始或文件，但实际上是分步调试 .ts.jsx JavaScript 文件缩小版本。

在此方案中， 源 工具可用于检查和逐步执行从服务器返回的转换的前端 JavaScript。 使用调试器定义 Watch 表达式，并使用控制台输入 JavaScript 表达式以操作范围内的数据。

编辑 CSS

在 DevTools 中，有两个位置可以编辑 CSS 规则及其属性：

• 在“元素”工具的“样式”选项卡中，通过用户界面控件编辑 CSS 属性。

• 在“源”工具的“页面”选项卡或“工作区”选项卡中，使用文本编辑器编辑 CSS 文件。

使用“源”工具的“工作区”选项卡时，使用“元素”工具中的“样式”选项卡编辑 CSS

另请参阅：

• 工作区功能与已转换源代码的限制

在“源”工具的“页面”选项卡或“工作区”选项卡中编辑 CSS

源工具中的“页面”或“工作区”选项卡支持直接编辑 CSS 文件。 例如，如果从教程 编辑和保存工作区中的 CSS 文件 (源工具工作区选项卡) 以匹配以下样式规则， H1 则呈现网页左上角的元素将变为绿色：

h1 {
  color: green;
}

CSS 更改会立即生效;无需手动保存更改。

另请参阅：

• 开始查看和更改 CSS。
• 在“样式”窗格中编辑 CSS 字体样式和设置
• 键盘快捷方式中的源工具键盘快捷方式
• 从“源”工具的“工作区”选项卡打开演示文件夹

编辑 HTML 文件

在 DevTools 中编辑 HTML 的方法有两种：

• 在 "元素 "工具中，通过用户界面控件一次处理一个 HTML 元素。
• 在 "源 "工具中，使用文本编辑器。

与 JavaScript 或 CSS 文件不同，无法在"源"工具中直接编辑 Web 服务器返回的 HTML 文件。 若要使用源工具编辑器编辑 HTML 文件，HTML 文件必须位于工作区或“替代”选项卡上。请参阅当前文章的以下小节：

• 将本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到磁盘
• 使用"覆盖"选项卡覆盖包含本地文件的服务器文件

若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。 编辑后的文件标有星号。

若要查找文本，请在 Windows/Linux 上按 Ctrl+F ，或在 macOS 上按 Command+F 。

若要撤消编辑，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。

若要在编辑 HTML 文件时查看其他命令，请在"编辑器"窗格中右键单击 HTML 文件。

另请参阅：

• 从“源”工具的“工作区”选项卡打开演示文件夹

访问行号或函数

若要转到编辑器窗格中打开的文件中的行号或符号 (（如函数名称) ），可以使用命令菜单，而不是滚动浏览文件。

1. 在 导航器 窗格中，选择省略号 （...）（更多选项），然后选择 打开文件。 此时会显示 “命令菜单 ”。
2. 键入下列字符之一：

Character	命令名称	用途
:	转到行	转到行号。
@	转到符号	转到函数。 键入 @时，“命令菜单”会列出在 JavaScript 文件中找到的函数，该文件在“编辑器”窗格中打开。

有关详细信息，请参阅 Run commands with the Microsoft Edge DevTools Command Menu。

快速源工具，用于在使用其他工具时显示源文件

在 DevTools 中查看源文件的主要位置是源工具。 但有时需要在查看或编辑源文件时访问其他工具，例如 元素 或 控制台。 使用 DevTools 底部的“快速视图”面板中的“快速源”工具。

若要使用 快速源工具：

1. 在 DevTools 顶部的活动 栏中 ，选择 “源 ”工具以外的工具，例如 “元素” 工具。

2. 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。 命令 菜单 随即打开。

3. 键入 “快速”，然后选择“ 显示快速源”。

   “ 快速视图 ”面板将在 DevTools 的底部打开，其中选择了 “快速源 工具”。 快速源工具在 DevTools 代码编辑器的精简版本中显示源工具中打开的相同文件。

4. 按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开“ 打开文件 ”对话框。

另请参阅：

• 使用快速源工具显示或编辑源文件
• 使用更改工具跟踪对文件的更改

使用调试器窗格调试 JavaScript 代码

使用 JavaScript 调试程序逐步调试服务器返回的 JavaScript 代码。 调试器包括 调试器 窗格，以及在 编辑器 窗格中的代码行上设置的断点。

借助调试器，你可以逐步调试代码，同时观察你指定的任何 JavaScript 表达式。 观察并手动更改变量值，并自动显示当前语句范围内哪些变量。

调试器支持标准调试操作，例如：

• 设置断点以暂停代码。
• 逐步执行代码。
• 查看和编辑属性和变量。
• 监视 JavaScript 表达式的值。
• 查看调用堆栈（到目前为止函数调用的序列）。

DevTools 中的调试器旨在外观、感觉和工作，如Visual Studio Code中的调试器Visual Studio。

以下小节包括调试：

• 使用调试器的基本方法
• 调试器监视和作用域比 console.log 的优点
• 直接从Visual Studio Code调试
• 有关调试的文章

使用调试器的基本方法

若要对 JavaScript 代码进行故障排除，可以在代码中插入 console.log() 语句。 另一种更强大的方法是使用 DevTools Microsoft Edge调试器。 熟悉调试器方法后，使用调试器实际上可以比 console.log() 更简单。

若要在网页上使用调试器，通常设置断点，然后从网页发送表单，如下所示：

1. 在新窗口或选项卡中打开演示：开始使用 Microsoft Edge DevTools 调试 JavaScript 网页。

2. 右键单击网页中的任意位置，然后选择“检查”。 或者，按 F12。 DevTools 窗口随即打开，位于演示网页旁边。

3. 在 DevTools 中，选择“源”选项卡。

4. 在 导航器 窗格（左侧）中，选择 页 选项卡，然后选择 JavaScript 文件，例如 get-started.js。

5. 在 "编辑器 "窗格中，选择可疑代码行附近的行号，以在该行上设置断点。 在下图中，在 行 上设置了断点 var sum = addend1 + addend2;。

6. 在网页中，输入值并提交表单。 例如，输入数字（如 5 和 1），然后单击“ 添加数字 1 和数字 2”按钮。

   调试程序运行 JavaScript 代码，然后在断点处暂停。 调试程序现在进入暂停模式，因此你可以检查范围内属性的值，并逐步执行代码。

   

   在上图中，我们添加了 Watch 表达式和 ，并跨 sumtypeof sum 断点添加了两行。

7. 检查"范围"窗格中 的值， 其中显示当前断点范围内的所有变量或属性及其值。

   此时，可以在“观看”窗格中添加表达式。 这些表达式与在语句中编写以调试代码 console.log 的表达式相同。

   若要运行 JavaScript 命令以操作当前上下文中的数据，请使用控制台。 如果要在 DevTools 底部的 “快速视图 ”面板中打开控制台，请按 Esc。

8. 使用 “调试器 ”窗格顶部的控件（如 步骤 (F9) ）逐步完成代码。

   此演示中的 bug 是你需要首先将输入数据从字符串转换为数字。

9. 若要修复此 bug，请刷新页面以重置网页窗体，然后更改行：

   var sum = addend1 + addend2;
   

   收件人:

   var sum = parseInt(addend1) + parseInt(addend2);
   

10. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存本地缓存文件中的更改。

11. 在网页中输入 5 和 1 ，然后单击“ 添加 ”按钮。 现在，范围>本地>总计：是数字 6，而不是字符串“51”。

另请参阅：

• 键盘快捷方式中的源工具键盘快捷方式
• JavaScript 调试入门 - 使用包含一些表单控件的现有简单网页的教程。

调试器监视和作用域比 console.log 的优点

这三种方法是等效的：

• 临时添加 语句 console.log(sum) 和 console.log(typeof sum) 代码，其中 sum 位于范围内。

• 当调试器在sum在范围内时暂停时，在 DevTools 的控制台窗格中发出语句sum和console.log(typeof sum)。

• 设置 监视表达式sum 和 typeof sum 调试 器窗格中 的。

当变量sum在范围内时，sum及其值将自动显示在调试器窗格的"范围"部分中，并且也会覆盖在计算sum的编辑器窗格中。 因此，您可能不需要为 定义 Watch 表达式 sum。

调试程序提供比语句更丰富、更灵活的显示 console.log 和环境。 例如，在调试器中，在逐步调试代码时，可以显示和更改所有当前定义的属性和变量的值。 还可以在 控制台中发出 JavaScript 语句，例如更改范围内数组中的值。 (若要显示主机，请按 Esc.)

刷新网页时，将保留断点和监视表达式。

直接从Visual Studio Code调试

若要使用功能更全的 Visual Studio Code 调试程序而不是 DevTools 调试器，请使用适用于 Visual Studio Code 的 Microsoft Edge DevTools扩展。

此扩展提供从 Microsoft Visual Studio Code 中访问 Microsoft Edge DevTools 的 Elements 和 网络 工具。

有关详细信息，请参阅适用于 web 开发的 Visual Studio Code 和 GitHub 自述页面：适用于 Visual Studio Code 的 Microsoft Edge 开发人员工具。

有关调试的文章

以下文章涵盖调试 器 窗格和断点：

• 调试 JavaScript 入门 - 使用现有简单项目的教程（通过屏幕捕获）。

• JavaScript 调试功能 - 如何使用调试器设置断点、逐步调试代码、查看和修改变量值、观看 JavaScript 表达式以及查看调用堆栈。

• 使用断点暂停代码 - 如何在调试器中设置基本和专用断点。

另请参阅

• 从“源”工具的“工作区”选项卡打开演示文件夹
• 键盘快捷方式中的源工具键盘快捷方式。
• 使用快速源工具显示或编辑源文件
• 使用更改工具跟踪对文件的更改

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。