请升级到MicrosoftEdge以使用最新的功能、安全更新和技术支持。
使用"源"工具查看、修改和调试前端JavaScript代码，并检查包含当前网页的资源。
详细内容：
"源"工具具有三个窗格：
下图显示了导航器窗格，其中突出显示了DevTools左上角的红色框，右上角突出显示了编辑器窗格，底部突出显示了调试器窗格。最左侧是浏览器窗口的主要部分，显示呈现的网页灰显，因为调试程序暂停在断点上：
当DevTools宽时，调试器窗格放置在右侧，并包括作用域和监视：
使用左侧(导航器窗格)导航从服务器返回的资源之间导航以构建当前网页。选择文件、图像和其他资源，并查看其路径。
若要访问“导航器”窗格的任何隐藏选项卡，请单击“更多选项卡()按钮。
以下子部分涵盖导航器窗格：
使用导航器窗格的"页"选项卡浏览从服务器返回的文件系统以构造当前网页。选择要查看、编辑和调试的JavaScript文件。"页面"选项卡列出了页面已加载的所有资源。
若要在“编辑器”窗格中显示文件，请在“页面”选项卡中选择一个文件。对于图像，将显示图像预览。
若要显示资源的URL或路径，请将鼠标悬停在资源上。
若要将文件加载到浏览器的新选项卡中，或显示其他操作，请右键单击文件名。
"页面"选项卡使用下列图标：
"页面"选项卡显示按服务器和目录分组的文件或资源，或作为简单列表。
使用导航器窗格的"文件系统"选项卡将文件添加到工作区，以便在DevTools中所做的更改保存到本地文件系统。
默认情况下，在源工具中编辑文件时，刷新网页时将放弃更改。Sources工具使用Web服务器返回的前端资源的副本。修改服务器返回的这些前端文件时，更改不会保留，因为您未更改源文件。您还需要在实际源代码中应用您的编辑，然后重新部署到服务器。
相比之下，使用Workspace时，刷新网页时，对前端代码所做的更改将保留。对于Workspace，当您编辑服务器返回的前端代码时，"源"工具还会将编辑应用于本地源代码。然后，对于其他用户查看更改，只需将已更改的源文件重新部署到服务器。
另请参阅：
使用导航器窗格的"替代"选项卡，使用本地文件夹中的文件替代页面资产（如图像）。
此选项卡中的项目会覆盖服务器发送到浏览器的内容，即使服务器已发送资产。
替代功能类似于工作区。当您要尝试对网页所做的更改，并且需要在刷新网页后保留更改，但您不关心将更改映射到网页的源代码时，请使用Overrides。
覆盖服务器返回的文件的文件在整个DevTools中由文件名旁边的紫色点指示。
使用导航器窗格的内容脚本选项卡查看已安装的MicrosoftEdge扩展插件加载的任何内容脚本。
使用导航器窗格的代码片段选项卡创建和保存JavaScript代码片段，以便可以在任何网页上轻松运行这些代码片段。
例如，假设您经常在控制台中输入以下代码，以将jQuery库插入页面，以便可以从控制台运行jQuery命令：
有多种方法可以运行代码段：
代码段类似于小书签。
若要打开文件，除了在源工具中使用导航器窗格外，还可以从DevTools中的任意位置使用命令菜单。
若要显示和选取所有.js文件的列表，请键入.js。
如果键入？，“命令菜单”会显示多个命令，包括...打开文件。如果按Backspace清除命令菜单，将显示文件列表。
使用"编辑器"窗格查看从服务器返回的前端文件，以撰写当前网页，包括JavaScript、HTML、CSS和图像文件。在编辑器窗格中编辑前端文件时，DevTools会更新网页以运行修改后的代码。
"编辑器"窗格对各种文件类型的支持级别如下：
以下子部分涵盖"编辑器"窗格：
若要在DevTools中编辑JavaScript文件，请在源工具中使用编辑器窗格。
若要将文件加载到"编辑器"窗格中，请使用导航器窗格（左侧）中的"页"选项卡。或者使用命令菜单，如下所示：在DevTools的右上角，选择“自定义并控制DevTools(...”)然后选择“打开文件”。
若要使JavaScript更改生效，请按Ctrl+S(Windows、Linux)或Command+S(macOS)。
如果更改文件，文件名旁边将出现一个星号。
若要在当前文件中查找文本，请选择“编辑器”窗格以使其具有焦点，然后在Windows/Linux上按Ctrl+F，或在macOS上按Command+F。
若要查找和替换文本，请选择“查找”文本框左侧的“替换(A-B>)”按钮。查看可编辑文件时，将显示“替换(A-B>)”按钮。
在“编辑器”窗格中打开缩小的文件时，系统会自动重新设置其格式。
若要将文件还原为原始缩小状态，”窗格底部(格式)的“漂亮的打印”按钮（显示为大括号）。
来自预处理器的源映射会导致DevTools加载原始JavaScript源文件，以及服务器返回的缩小的已转换JavaScript文件。然后，在设置断点并逐步执行代码时查看原始源文件。同时，MicrosoftEdge运行缩小代码。
在“编辑器”窗格中，如果右键单击JavaScript文件，然后选择“添加源映射”，将显示一个弹出框，其中包含“源地图URL”文本框和“添加”按钮。
如果使用转换JavaScript文件（如React）的框架，则本地源JavaScript可能不同于服务器返回的前端JavaScript。此方案不支持工作区，但在此方案中支持源代码映射。
在开发环境中，服务器可能包括源地图和原始或.ts.jsx用于React。源工具显示这些文件，但不允许编辑这些文件。当你设置断点并使用调试器时，DevTools将显示原始或文件，但实际上是分步调试.ts.jsxJavaScript文件缩小版本。
在此方案中，源工具可用于检查和逐步执行从服务器返回的转换的前端JavaScript。使用调试器定义Watch表达式，并使用控制台输入JavaScript表达式以操作范围内的数据。
在DevTools中编辑CSS的方法有两种：
h1{color:green;}
CSS更改会立即生效;无需手动保存更改。
在DevTools中编辑HTML的方法有两种：
若要保存更改，请在Windows/Linux上按Ctrl+S或在macOS上按Command+S。编辑后的文件标有星号。
若要查找文本，请在Windows/Linux上按Ctrl+F，或在macOS上按Command+F。
若要撤消编辑，请在Windows/Linux上按Ctrl+Z或在macOS上按Command+Z。
若要在编辑HTML文件时查看其他命令，请在"编辑器"窗格中右键单击HTML文件。
若要转到行号或符号(如编辑器窗格中打开的文件中的函数名称)，可以使用命令菜单，而不是滚动整个文件。
若要使用快速源工具：
使用JavaScript调试程序逐步调试服务器返回的JavaScript代码。调试器包括调试器窗格，以及在编辑器窗格中的代码行上设置的断点。
借助调试器，你可以逐步调试代码，同时观察你指定的任何JavaScript表达式。观察并手动更改变量值，并自动显示当前语句范围内哪些变量。
调试器支持标准调试操作，例如：
以下小节包括调试：
若要对JavaScript代码进行故障排除，可以在代码中插入console.log()语句。另一种更强大的方法是使用DevToolsMicrosoftEdge调试器。熟悉调试器方法后，使用调试器实际上可以比console.log()更简单。
若要在网页上使用调试器，通常设置断点，然后从网页发送表单，如下所示：
这三种方法是等效的：
当变量sum在范围内时，sum及其值将自动显示在调试器窗格的"范围"部分中，并且也会覆盖在计算sum的编辑器窗格中。因此，您可能不需要为定义Watch表达式sum。
调试程序提供比语句更丰富、更灵活的显示console.log和环境。例如，在调试器中，在逐步调试代码时，可以显示和更改所有当前定义的属性和变量的值。还可以在控制台中发出JavaScript语句，例如更改范围内数组中的值。(若要显示主机，请按Esc.)
刷新网页时，将保留断点和监视表达式。
若要使用功能更全的VisualStudioCode调试程序而不是DevTools调试器，请使用适用于VisualStudioCode的MicrosoftEdgeDevTools扩展。
此扩展提供从MicrosoftVisualStudioCode中访问MicrosoftEdgeDevTools的Elements和网络工具。