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 和图像文件。 在 编辑器 窗格中编辑前端文件时，DevTools 会更新网页以运行修改后的代码。
若要将文件加载到"编辑器"窗格中，请使用导航器窗格（左侧）中的"页"选项卡。 或者使用 命令菜单，如下所示：在 DevTools 的右上角，选择 “自定义并控制 DevTools (...”) 然后选择“ 打开文件”。
另请参阅：
在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。
保存和撤消
若要使 JavaScript 更改生效，请按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。
如果更改文件，文件名旁边将出现一个星号。
若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。
若要撤消更改，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。
默认情况下，刷新网页时将放弃您的编辑。 若要详细了解如何在本地文件系统中保存更改，请参阅使用 Workspaces 编辑文件（文件系统选项卡）。
查找和替换
若要在当前文件中查找文本，请选择 “编辑器 ”窗格以使其具有焦点，然后在 Windows/Linux 上按 Ctrl+F ，或在 macOS 上按 Command+F 。
将缩小代码映射到源代码以显示可读代码
来自预处理器的源映射会导致 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 文件。 例如，如果你编辑通过 Workspaces（文件系统选项卡）编辑文件教程中的 CSS 文件以匹配下面的样式规则，则呈现的网页左上角的元素 H1 将更改为绿色：
color: green;
与 JavaScript 或 CSS 文件不同，无法在"源"工具中直接编辑 Web 服务器返回的 HTML 文件。 若要使用“源编辑器”工具编辑 HTML 文件，HTML 文件必须位于工作区或“ 替代 ”选项卡上。请参阅当前文章的以下小节：
使用"文件系统"选项卡定义本地 Workspace
使用"覆盖"选项卡覆盖包含本地文件的服务器文件
若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。 编辑后的文件标有星号。
若要查找文本，请在 Windows/Linux 上按 Ctrl+F ，或在 macOS 上按 Command+F 。
若要撤消编辑，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。
若要在编辑 HTML 文件时查看其他命令，请在"编辑器"窗格中右键单击 HTML 文件。
另请参阅：
在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。
访问行号或函数
若要转到行号或符号 (如编辑器窗格中打开的文件中的函数名称) ，可以使用命令菜单，而不是滚动整个文件。
在 导航器 窗格中，选择省略号 （...）（更多选项），然后选择 打开文件。 将显示"命令菜单"。
键入下列字符之一：
在 DevTools 中查看源文件的主要位置是源工具。 但有时需要在查看或编辑源文件时访问其他工具，例如 元素 或 控制台。 使用 DevTools 底部的“快速视图”面板中的“快速源”工具。
若要使用 快速源工具：
选择除"源"工具 外 的其他工具，如 "元素" 工具。
按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。 命令菜单将打开。
键入 “快速”，然后选择“ 显示快速源”。
“ 快速视图 ”面板将在 DevTools 的底部打开，其中选择了 “快速源 工具”。 “快速源”面板包含你在“源”工具中编辑的最后一个文件，该文件位于精简版本的 DevTools 代码编辑器中。
按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开“ 打开文件 ”对话框。
使用调试器窗格调试 JavaScript 代码
使用 JavaScript 调试程序逐步调试服务器返回的 JavaScript 代码。
调试器包括 调试器 窗格，以及在 编辑器 窗格中的代码行上设置的断点。
借助调试器，你可以逐步调试代码，同时观察你指定的任何 JavaScript 表达式。 观察并手动更改变量值，并自动显示当前语句范围内哪些变量。
使用调试器的基本方法
若要对 JavaScript 代码进行故障排除，可以在代码中插入 console.log() 语句。 另一种更强大的方法是使用 DevTools Microsoft Edge调试器。 熟悉调试器方法后，使用调试器实际上可以比 console.log() 更简单。
若要在网页上使用调试器，通常设置断点，然后从网页发送表单，如下所示：
在新窗口或选项卡中打开演示：开始使用 Microsoft Edge DevTools 调试 JavaScript 网页。
右键单击网页中的任意位置，然后选择“检查”。 或者，按 F12。
DevTools 窗口随即打开，位于演示网页旁边。
在 DevTools 中，选择“源”选项卡。
在 导航器 窗格（左侧）中，选择 页 选项卡，然后选择 JavaScript 文件，例如 get-started.js。
在 "编辑器 "窗格中，选择可疑代码行附近的行号，以在该行上设置断点。 在下图中，在 行 上设置了断点 var sum = addend1 + addend2;。
在网页中，输入值并提交表单。 例如，输入数字（如 5 和 1），然后选择按钮 添加数字 1 和数字 2。
调试程序运行 JavaScript 代码，然后在断点处暂停。 调试程序现在进入暂停模式，因此你可以检查范围内属性的值，并逐步执行代码。
检查"范围"窗格中 的值， 其中显示当前断点范围内的所有变量或属性及其值。
此时，可以在“观看”窗格中添加表达式。 这些表达式与在语句中编写以调试代码 console.log 的表达式相同。
若要运行 JavaScript 命令以操作当前上下文中的数据，请使用控制台。 如果要在 DevTools 底部的 “快速视图 ”面板中打开控制台，请按 Esc。
使用 “调试器 ”窗格顶部的控件（如 步骤 (F9) ）逐步完成代码。
此演示中的 bug 是你需要首先将输入数据从字符串转换为数字。
若要修复此 bug，请刷新页面以重置网页窗体，然后更改行：
var sum = addend1 + addend2;
var sum = parseInt(addend1) + parseInt(addend2);
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存本地缓存文件中的更改。
在网页中输入 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 表达式以及查看调用堆栈。
使用断点暂停代码 - 如何在调试器中设置基本和专用断点。
在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。
键盘快捷方式中的源工具键盘快捷方式
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。
原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。
云
图标表示
文件夹
图标表示目录：
页面
图标表示资源：
