Microsoft Edge 浏览器附带内置 Web 开发工具，称为 Microsoft Edge DevTools。 DevTools 是一组 Web 开发工具，显示在浏览器呈现的网页旁边。 DevTools 提供了一种用于检查并调试网页和 Web 应用的强大方法。 甚至可以编辑源文件并创建网站项目，一切都可以在 DevTools 环境中完成。
使用 DevTools 可以执行以下操作：
使用带有可视界面的实时工具检查、调整和更改网页中的元素样式。 检查浏览器存储内容的位置以构造网页，包括
.html
、
.css
、
.js
和
.png
文件格式。
模拟网站在不同设备上的行为方式，并模拟移动环境，在不同的网络条件下完成操作。 检查网络流量并查看问题的位置。
使用断点调试和实时控制台调试 JavaScript。 查找 Web 应用的内存问题和呈现问题。
查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复找到的辅助功能问题。
使用开发环境将 DevTools 中的更改与文件系统和 Web 同步。
要在浏览器中打开新选项卡时自动打开 DevTools：
在命令行中，打开 Microsoft Edge，传入
--auto-open-devtools-for-tabs
标志，如下所示：
Windows 命令提示符：
start msedge --auto-open-devtools-for-tabs
Windows PowerShell：
Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"
macOS 终端：
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs
Linux 上的 bash shell：
microsoft-edge --auto-open-devtools-for-tabs
正在禁用启动增强
重要提示： 通过auto-open-devtools-for-tabs启动时，不得运行任何Microsoft Edge 进程，因此可能需要在edge://settings/system中禁用启动增强。
启动增强功能使最小 Microsoft Edge 进程在后台运行。 这会干扰auto-open-devtools-for-tabs功能，并且需要禁用才能使用。 有关详细信息，请参阅获取有关启动增强的帮助。
正在关闭 F12 键盘快捷方式
要阻止按F12打开 DevTools：
在 Microsoft Edge 中，转到edge://settings/system。
向下滚动到开发人员工具部分，然后关闭“使用 F12 键打开开发人员工具”开关。
可以使用鼠标或键盘与 DevTools 交互。 键盘快捷方式提供了访问功能的快速方法，并且是辅助功能所必需的工具。 通过键盘和辅助技术（例如，屏幕阅读器），各种工具越来越易于访问。
请参阅键盘快捷方式和使用辅助技术导航 DevTools。
可以将 DevTools 停靠在浏览器的右侧、左侧或底部，或者将其取消固定到单独的窗口中。 请参阅更改 DevTools 放置位置（取消停靠，停靠到底部，停靠到左侧）。
DevTools UI 使用 HTML 和 CSS（例如，网页）实现，因此可以使用标准键盘快捷方式进行放大和缩小。 DevTools 和呈现页的缩放级别是独立的。
缩放浏览器的 DevTools 部分：
如果焦点尚未在 DevTools 上，请点击 DevTools 中的某个位置。
按Ctrl++或Ctrl+- （Windows 或 Linux）。 或者，按Command++或Command+- (macOS)。
确保焦点位于浏览器的所需部分（DevTools 或呈现的页面）。
按Ctrl+0或Ctrl+NumPad0 (Windows 或 Linux) ，或Command+0(macOS)。
要缩放 DevTools 设置：
在 DevTools“设置”中，点击右上角的“关闭 (x)”。
更改 DevTools 的缩放级别，如上所述。
点击“设置”（
）按钮。
要使用命令菜单缩放 DevTools：
点击“自定义和控制 DevTools”（
）菜单按钮，然后选择“运行命令”。
在“命令菜单”中，开始键入缩放，然后选择缩放命令：
重置缩放级别
在活动栏中，工具选项卡包含工具名称和图标，或仅包含工具图标，具体取决于 DevTools 窗口的宽度。 如果窗口够宽，则显示工具名称和图标。 如果窗口过窄，则仅显示工具图标，将鼠标悬停在工具图标上时，会显示工具名称。
如果活动栏位于 DevTools 窗口的左侧，则垂直方向仅显示工具图标，将鼠标悬停在工具图标上时，会显示工具名称。
更改活动栏的位置
默认情况下，活动栏水平显示在 DevTools 窗口的顶部。 要最大程度地在各种 DevTools 窗口大小和位置中使用屏幕空间，可以将活动栏的位置更改到 DevTools 窗口的左侧，或者根据 DevTools 窗口停靠位置自动设置。
活动栏可以位于以下位置之一：
顶部（默认值）：活动栏将始终处于水平方向。
左侧：活动栏将始终处于垂直方向。
适应停靠位置：活动栏将处于水平或垂直方向，具体取决于 DevTools 的停靠位置。
当 DevTools 停靠到浏览器窗口的左侧或右侧时，活动栏处于垂直方向。
当 DevTools 停靠到浏览器窗口的底部或在其自己的窗口中取消停靠时，活动栏处于水平方向。
更改快速视图的位置
默认情况下，快速视图面板位于 DevTools 的底部。 还可以将快速视图面板放在 DevTools 的右侧。
要显示快速视图面板，请按Esc。
要更改快速视图面板的位置，请在“快速视图”工具栏中，点击“将快速视图停靠到右侧”（
）按钮或“将快速视图停靠到底部”按钮：
活动栏的功能
DevTools 为你提供了很多强大的功能来检查、调试和更改当前显示在浏览器中的网站。 大多数工具实时显示更改。 实时更新使这些工具可用于优化网页的外观和导航或功能，无需刷新或生成网页。
包含选项卡和页面的选项卡式工具面板
除了检查工具和设备仿真之外，DevTools 划分为一组选项卡式工具，例如元素工具、控制台工具和源工具。 在命令菜单中，工具称为面板。 工具的选项卡包含包括工具 UI 的面板。
更高级别的选项卡：
工具编排到活动栏和快速视图工具栏的一组选项卡中。 大多数工具也称为面板。 面板是工具的内部 UI。 工具的选项卡可以出现在活动栏和快速视图工具栏上。
更低级别的选项卡：
在一些工具的面板中，有一组或多组选项卡（选项卡式窗格）。 例如，元素工具包含一组选项卡，其中包括样式、事件侦听器和辅助功能选项卡。 对于其他工具，该工具的面板沿左侧列出了页面。
有两个工具栏：DevTools 顶部的活动栏和快速视图工具栏（按Esc时位于底部）。
活动栏包含以下功能：
- 图标工具：
检查工具（
）切换按钮。
设备仿真（
）按钮。
- 查看和筛选来自网络请求或 JavaScript 日志语句的记录消息。
- 输入要实时评估的 JavaScript 语句。 表达式在当前上下文中进行计算，例如当源工具中的 JavaScript 调试器在断点处暂停时。
控制台工具始终位于活动栏和快速视图工具栏上。
请参阅控制台。
源工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。
源工具始终位于活动栏上。
网络工具允许监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应以满足需求，并模拟不同的网络条件。
请参阅检查网络活动。
请参阅 分析运行时性能 (教程) 。
请参阅修复内存问题。
请参阅查看、编辑和删除 Cookie。
要将工具添加到活动栏，请点击“更多工具”（
）按钮。
自定义和控制 DevTools（
）按钮打开下拉菜单以：
- 停靠 DevTools。
- 停靠活动栏。
- 选择主题。
- 显示键盘快捷方式。
- 更改 DevTools 设置。
- 打开“设备仿真”。
- 切换快速视图面板。
- 运行命令。
- 搜索代码。
- 打开文件。
帮助（
）按钮打开包含以下项的下拉菜单：
文档 - 打开Microsoft Edge DevTools 文档。
发行说明 - 打开Microsoft Edge DevTools 中的新增功能。
反馈（
）- 打开发送反馈对话框。 要与 Microsoft Edge DevTools 团队联系以报告问题（或提出建议），请描述发生的情况，并附上屏幕截图。 请参阅联系 Microsoft Edge DevTools 团队。
点击 DevTools 右上角的“关闭 DevTools”（
）按钮关闭 DevTools，并使用整个窗口显示当前网页。
使用快速视图面板打开已在活动栏中选择的工具下方或右侧的第二个工具：
从“活动栏”中选择工具。
在“快速视图”工具栏中，点击“更多工具”（），然后从列表中选择其他工具。
例如，在“快速视图”面板（在“活动栏”中打开的“网络”工具下方）中打开“呈现”工具：
“工具”、“选项卡”和“面板”字词某种程度上可互换。 在 命令菜单中，工具称为 面板;例如， “元素” 工具称为“ 元素” 面板。 要切换到“元素”工具，请点击“元素”选项卡。有“更多工具”（）按钮和列表用于选择工具。 DevTools 工具也称为 DevTools 面板。
可以自定义每个工具，工具的内容可以根据上下文进行更改。
更多工具（）按钮显示在活动栏和快速视图工具栏中。 从位于活动栏的更多工具列表中打开工具时，工具显示在活动栏中。 在快速视图工具栏的更多工具列表中打开工具时，工具在快速视图面板中打开。
在快速视图工具栏上打开工具
当 DevTools 具有焦点时，按Esc显示快速视图工具栏（如果尚未显示）。 在“快速视图”工具栏中，点击“更多工具”（）按钮，然后选择工具。
将工具从快速视图工具栏移动到活动栏
当 DevTools 具有焦点时，按Esc以显示快速视图。 在“快速视图”工具栏中，右击工具的选项卡，然后选择“移动到顶部活动栏”或“移动到左侧活动栏”。
将工具从活动栏移动到快速视图工具栏
在“活动栏”中，右击工具的选项卡，然后选择“移动到底部快速视图”或“移动到侧边快速视图”。
在其默认工具栏中打开工具（活动栏或快速视图）
当 DevTools 具有焦点时，按Ctrl+Shift+P (Windows, Linux) 或Command+Shift+P (macOS) 以打开“命令菜单”。 键入工具名称，然后选择“显示 <工具>”命令。
除了活动栏和快速视图工具之外，DevTools 还包括以下工具：
检查工具。 请参阅将鼠标悬停在网页上，使用“检查”工具检测辅助功能问题。强大提示：使用命令菜单
DevTools 提供了许多可用于网站的特性和功能。 可以通过多种方式访问 DevTools 的不同部分，但通常一种快速方法是使用 命令菜单。
在 命令菜单中，这些工具称为“面板”;例如， “元素” 工具称为“ 元素” 面板。 要切换到“元素”工具，请选择“元素”选项卡。
若要打开 命令菜单，请执行以下作之一：
- 点击“自定义和控制 DevTools”（）按钮，然后选择“运行命令”。
- 按Ctrl+Shift+P (Windows, Linux) 或Command+Shift+P (macOS)。
“ 命令菜单” 允许键入命令以在 DevTools 中显示、隐藏或运行功能。
在 命令菜单中，开始键入工具的名称（如 更改），然后选择 “显示” 命令，例如 “显示更改”。
命令菜单显示匹配的命令：
编辑 CSS 时，更改工具非常有用。 在此示例中， 命令菜单 提供了一种快速替代方法，可选择“ 更多工具 ” (“ ) 然后选择“ 更改”。 此示例还提供了一种替代方法，即在源工具中编辑.js文件，然后右击并选择“本地修改”。
另请参阅使用 Microsoft Edge DevTools 命令菜单运行命令。
可以自定义 DevTools 以满足工作方式的需求。 要更改设置，请点击“自定义和控制 DevTools”（）按钮，然后选择“设置”（），或按F1。
在设置>首选项页中，可以更改 DevTools 的多个部分。 例如，可以使用浏览器 UI 语言设置在 DevTools 中使用在浏览器中使用的相同语言。 对于另一个示例，使用主题设置更改 DevTools 的颜色主题。
正在尝试试验性功能
DevTools 团队在 DevTools 中以试验的形式提供新功能。 可以打开或关闭每个试验。 要查看Microsoft Edge DevTools 中的试验性功能的完整列表，请在 DevTools 中，选择“设置”（），然后选择“试验”。
要预览 DevTools 的最新功能，请下载Microsoft Edge Canary，该版本在夜间生成。
另请参阅：
试验性功能
