DevTools 概述
Microsoft Edge 浏览器附带称为 Microsoft Edge DevTools 的内置 Web 开发工具。 DevTools 是一组 Web 开发工具，显示在浏览器中呈现的网页旁边。 DevTools 提供了一种用于检查和调试网页和 Web 应用的强大方法。 甚至可以在 DevTools 环境中编辑源文件和创建网站项目。
使用 DevTools，可以执行以下操作：
使用带有可视界面的实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置，包括
.html、.css、.js和.png文件格式。模拟网站在不同设备上的行为方式，并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。
使用断点调试和实时控制台调试 JavaScript。 查找 Web 应用的内存问题和呈现问题。
查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复发现的辅助功能问题。
使用开发环境将 DevTools 中的更改与文件系统以及从 Web 同步。
打开 DevTools
在 Microsoft Edge 中，可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。
主要方式：
| 操作 | 生成的工具 |
|---|---|
| 右键单击网页上的任何项目，然后选择“ 检查”。 | 元素工具，DOM 树展开以显示右键单击的页面元素。 |
| 按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 | 以前使用的工具或 欢迎 工具。 |
| 按 F12。 | 以前使用的工具或 欢迎 工具。 |
其他方法：
| 操作 | 生成的工具 |
|---|---|
在 Microsoft Edge 工具栏上，选择“设置和更多” ( ) >更多工具>开发人员工具。 |
以前使用的工具或 欢迎 工具。 |
| 按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 | 控制台工具。 |
| 按 Ctrl+Shift+C (Windows、Linux) 或 Command+Option+C (macOS) 。 | 元素工具，DOM 树展开以显示<body>元素。 |
| 按 Shift+F10 打开右键单击菜单。 若要选择“ 检查” 命令，请按 向上键 ，然后按 Enter。 | 元素工具，DOM 树展开以显示<html>元素。 |
| 按 Tab 或 Shift+Tab 将焦点放在页面元素上。 然后按 Shift+F10 打开右键单击菜单。 若要选择“ 检查” 命令，请按 向上键 ，然后按 Enter。 | 元素工具，DOM 树展开以显示焦点页元素。 |
通过右键单击网页中的项打开 DevTools
打开 DevTools 的好方法是右键单击网页上的项，然后选择“ 检查”：
DevTools 随即打开，其中“元素”工具的 DOM 树 中突出显示了右键单击的 元素 ：
使用 Microsoft Edge 工具栏打开 DevTools
在 Microsoft Edge 工具栏上，选择“设置和更多 (...) >更多工具>开发人员工具：
打开新选项卡时，让 DevTools 自动打开
若要在浏览器中打开新选项卡时自动打开 DevTools，
在命令行中，打开 Microsoft Edge，传入
--auto-open-devtools-for-tabs标志，如下所示：Windows 命令提示符：
start msedge --auto-open-devtools-for-tabsWindows PowerShell：
Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"macOS 终端：
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabsLinux 上的 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 放置 (Undock、Dock 到底部、停靠到左侧) 。
放大或缩小 DevTools
DevTools UI 是使用 HTML 和 CSS（如网页）实现的，因此你可以使用标准键盘快捷方式进行放大和缩小。 DevTools 和呈现的页面的缩放级别是独立的。
缩放浏览器的 DevTools 部分：
- 如果焦点尚未位于 DevTools 上，请单击 DevTools 中的某个位置。
- 按 Ctrl++ 或 Ctrl+- (Windows 或 Linux) 。 或者，按 命令++ 或 命令+- (macOS) 。
若要缩放呈现的页面，请单击页面，然后使用上述相同键盘快捷方式。
若要将缩放还原到 100%：
- 确保焦点位于浏览器的所需部分，即 DevTools 或呈现的页面。
- 按 Ctrl+0 或 Ctrl+NumPad0 (Windows 或 Linux) ，或 Command+0 (macOS) 。
缩放 DevTools 设置：
- 在“DevTools 设置”中，单击右上角的“ 关闭 (x) ”。
- 如上文所述，更改 DevTools 的缩放级别。
- 单击 “设置” (
) 按钮。
使用命令菜单缩放 DevTools：
- 单击“ 自定义和控制 DevTools (
) 菜单按钮，然后选择“ 运行命令”。 - 在 “命令”菜单中，开始键入 “缩放”，然后选择缩放命令：
- 重置缩放级别
- 放大缩小字体功能 放大缩小字体功能
- 放大缩小字体功能
用户界面概述
DevTools 用户界面具有以下main区域：
顶部或左侧 的活动栏 包含用于访问工具、设置、文档等的图标。
- 当前工具区域，其中显示当前在 活动栏中 选择的工具。
底部的 “快速视图 ”工具栏包含用于访问工具的选项卡。
- 底部工具区域，其中显示了“ 快速视图 ”工具栏中当前选择的工具。
默认情况下， 活动栏 包含以下工具：
“检查 工具” (
) 切换按钮。设备仿真 工具 (
) 按钮。欢迎 工具 (
) 。元素 工具 (
) 。控制台 工具 (
) 。源 工具 (
) 。网络 工具 (
) 。性能 工具 (
) 。内存 工具 (
) 。应用程序 工具 (
) 。
默认情况下， “快速视图 ”工具栏包含以下工具：
控制台 工具 (
) 。问题 工具 (
) 。
在 活动栏中，工具选项卡包含工具名称和图标，或者仅包含工具图标，具体取决于 DevTools 窗口的宽度。 如果窗口足够宽，将显示工具名称和图标。 如果窗口太窄，则当您将鼠标悬停在工具图标上时，仅显示工具图标，并显示工具名称。
如果 活动栏 位于 DevTools 窗口的左侧，则垂直方向仅显示工具图标，将鼠标悬停在工具图标上时会显示工具名称。
更改活动栏的位置
默认情况下， 活动栏 水平显示在 DevTools 窗口的顶部。 若要在各种 DevTools 窗口大小和位置中最大化可用屏幕空间，可以将 活动栏 的位置更改为 DevTools 窗口左侧，或者根据 DevTools 窗口停靠位置自动设置。
活动栏可以位于以下位置之一：
顶部 (默认) ： 活动栏 将始终为水平。
左侧： 活动栏 将始终是垂直的。
适应停靠位置： 活动栏 将处于水平或垂直方向，具体取决于 DevTools 的停靠位置。
当 DevTools 停靠在浏览器窗口的左侧或右侧时， 活动栏 是垂直的。
当 DevTools 停靠在浏览器窗口的底部或在其自己的窗口中取消停靠时， 活动栏 是水平。
当 活动栏 是水平时，如果有足够的空间显示工具图标，则工具名称会显示在工具图标旁边。
如果没有足够的空间来显示所有工具名称，则水平 活动栏 将显示一些带有工具图标和名称的选项卡，以及一些带有带有工具提示的图标的选项卡：
若要更改 活动栏的位置，请执行以下操作之一：
单击“ 自定义和控制 DevTools (
) ”按钮，然后在 活动栏位置中选择一个位置：
在 “活动栏”中，单击“ 向左移动活动栏 ” (“
) 或 “将活动栏移到顶部 ” (“ 
) 。使用命令菜单。 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) ，输入 单词活动栏，然后选择“ 将活动栏移到左侧 ”或“ 将活动栏移动到顶部”。 请参阅 电源提示：使用命令菜单。
更改快速视图的位置
默认情况下， “快速视图 ”面板位于 DevTools 的底部。 还可以将 “快速视图 ”面板放在 DevTools 的右侧。
若要显示 “快速视图 ”面板，请按 Esc。
若要更改 “快速视图 ”面板的位置，请在“ 快速视图 ”工具栏中，单击“ 停靠快速视图”右侧 按钮或“ 停靠快速视图 ”底部 (
) 按钮：
活动栏的功能
DevTools 提供强大的功能来检查、调试和更改浏览器当前显示的网站。 大多数工具实时显示更改。 实时更新使工具可用于优化网页的外观和导航或功能，而无需刷新或生成网页。
包含选项卡和页面的选项卡式工具面板
除了“检查”工具和设备仿真之外，DevTools 还分为一组选项卡式工具，例如“元素”工具、“控制台”工具和“源”工具。 在 命令菜单中，工具称为 面板。 工具的选项卡包含包含工具 UI 的面板。
更高级别的选项卡：
工具被组织到 活动栏 和 快速视图 工具栏上的一组选项卡。 大多数工具也称为 面板。 面板是工具的内部 UI。 工具具有一个选项卡，该选项卡可以出现在 “活动栏 ”和 “快速视图 ”工具栏上。
较低级别的选项卡：
在某些工具的面板中，有一组或多组选项卡 (选项卡式窗格) 。 例如，“元素”工具包含一组选项卡，其中包括“样式”、“事件侦听器”和“辅助功能”选项卡。 对于其他工具，该工具的面板左侧列出了页面。
活动栏和快速视图工具栏
有两个工具栏：DevTools 顶部的 “活动栏 ”和“ 快速视图 ”工具栏在按 Esc 时位于底部。
活动栏包含以下功能：
- 图标工具：
- “检查工具 ” () 切换按钮。
- 设备仿真 () 按钮。
- “检查工具 ” (
工具选项卡：
- 欢迎 工具。
- 元素 工具。 永久。
- 控制台 工具。 永久。
- 源 工具。 永久。
- 网络 工具。
- 性能 工具。
- 内存 工具。
- 应用程序 工具。
图标：
- 将活动栏向左移动 () 按钮。
- “更多工具 ” (
) 按钮。 - 自定义和控制 DevTools () 菜单按钮。
- “帮助 (
) 按钮。 - 关闭 DevTools (
) 按钮。
- 将活动栏向左移动 (
活动栏功能如下所述。
在活动栏中固定和重新排列工具
除了永久 元素、 控制台和 源 工具外，还可以控制哪些工具显示在 活动栏中，以自定义 DevTools 以专注于当前活动。
单击“ 更多工具 (+) 列出所有可用工具：
选择一个工具以将其固定到 活动栏。 然后，每当打开 DevTools 时，该工具就会出现在 活动栏中 。
如果 活动栏中 没有足够的空间来显示所有固定的工具，某些工具可能会溢出到 “更多工具 ”菜单中：
若要取消固定 活动栏中的工具，请右键单击该工具的选项卡，然后选择“ 从活动栏中删除”：
检查工具
单击“ 检查工具 ” () 按钮时，可以在当前网页上选择元素。 当 “检查 ”工具处于活动状态时，你可以将鼠标移到网页的不同部分，以获取有关页面元素的详细信息，以及显示页面元素的布局尺寸、填充和边距的多色覆盖。
设备仿真
单击 “设备仿真 () 按钮，在模拟设备模式下显示当前网站。 借助设备仿真工具，可以运行并测试在调整浏览器大小时产品的反应。 它还提供移动设备上的布局和行为的估计值。
请参阅 模拟移动设备 (设备仿真) 。
欢迎工具
包括有关 DevTools 新功能、如何联系团队的信息，以及有关某些功能的信息。
元素工具
允许检查、编辑和调试 HTML 和 CSS。 可以在工具中编辑，同时在浏览器中实时显示更改。
“元素”工具始终出现在活动栏上。
控制台工具
在 控制台工具中 ，可以：
- 查看和筛选来自网络请求或 JavaScript 日志语句的记录消息。
- 输入要实时计算的 JavaScript 语句。 表达式是在当前上下文中计算的，例如， 当源 工具中的 JavaScript 调试器在断点处暂停时。
控制台工具始终出现在活动栏和快速视图工具栏上。
请参阅 控制台。
源工具
源工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。
源工具始终出现在活动栏上。
网络工具
使用 网络 工具可以监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应以满足你的需求，并模拟不同的网络条件。
请参阅 检查网络活动。
性能工具
请参阅 性能工具简介。
内存工具
请参阅 修复内存问题。
应用程序工具
请参阅 查看、编辑和删除 Cookie。
“更多工具”按钮
若要将工具添加到 活动栏，请单击“ 更多工具 () 按钮。
“自定义和控制 DevTools”菜单
“ 自定义和控制 DevTools () ”按钮打开下拉菜单，用于：
- 停靠 DevTools。
- 停靠 活动栏。
- 选择主题。
- 显示键盘快捷方式。
- 更改 DevTools 设置。
- 打开“设备仿真”。
- 切换 “快速视图 ”面板。
- 运行命令。
- 搜索代码。
- 打开文件。
帮助按钮
“帮助 () 按钮将打开一个下拉菜单，该下拉菜单允许访问 DevTools 文档、发行说明和“反馈 (
) 工具。
若要与 Microsoft Edge DevTools 团队联系以报告问题、问题或建议想法，请单击“ 反馈 ”按钮。 “ 发送反馈 ”对话框随即打开。 输入信息以描述所发生的情况并包含屏幕截图。 请参阅 联系 Microsoft Edge DevTools 团队。
“关闭 DevTools”按钮
单击 DevTools 右上角的 “关闭) 按钮，关闭 DevTools 并使用整个窗口显示当前网页。
快速视图工具栏的功能
使用 “快速视图 ”面板打开活动 栏中已选择的工具下方或右侧的第二个工具：
从 活动栏中选择一个工具。
在“快速视图”工具栏中，单击“ (+) 的更多工具”，然后从列表中选择其他工具。
例如，在活动栏中打开的“网络”工具下方的“快速视图”面板中打开呈现工具：
若要隐藏或展开 “快速视图”，请单击“ 折叠快速视图 (
) 或 展开“快速视图 ” (
) ，或按 转义 键。
所有工具概述
有关每个工具的摘要，请参阅关于工具列表中的所有工具概述。
工具、选项卡或面板
单词“tool”、“tab”和“panel”有些可互换。 在命令菜单中，工具称为 面板;例如， “元素” 工具称为“ 元素” 面板。 若要切换到 “元素” 工具，请单击“ 元素 ”选项卡。有一个用于选择工具的“ 更多工具 ” (+ “) ”按钮和列表，也称为 面板。
可以自定义每个工具，工具的内容可以根据上下文进行更改。
关于活动栏和快速视图工具
“ 更多工具 (+) ”按钮显示在 “活动栏 ”和“ 快速视图 ”工具栏中。 从活动栏中的“更多工具”列表中打开工具时，该工具将显示在活动栏中。 从“快速视图”工具栏的“更多工具”列表中打开工具时，该工具将在“快速视图”面板中打开。
| 任务 | 步骤 |
|---|---|
| 在 DevTools 顶部 的活动栏中 打开工具 | 在 DevTools 顶部的活动 栏中 ，单击“ 更多工具 (+) 然后选择一个工具。 |
| 在 “快速视图 ”工具栏上打开工具 | 当 DevTools 具有焦点时，按 Esc 显示 快速视图 工具栏（如果尚未显示）。 在 “快速视图 ”工具栏中，单击“ 更多工具 (+) ”按钮，然后选择一个工具。 |
| 将工具从 快速视图 工具栏移动到 活动栏 | 当 DevTools 具有焦点时，按 Esc 显示 快速视图。 在 “快速视图 ”工具栏中，右键单击工具的选项卡，然后选择“ 移动到顶部活动栏 ”或“ 移动到左侧活动栏”。 |
| 将工具从 活动栏 移动到 “快速视图” 工具栏 | 在 “活动栏”中，右键单击工具的选项卡，然后选择“ 移动到底部快速视图 ”或“ 移动到一侧快速视图”。 |
| 在其默认工具栏中打开工具， (活动栏 或 快速视图) | 当 DevTools 具有焦点时，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。 键入工具的名称，然后选择“显示工具>”<命令。 |
除了 活动栏 和 快速视图 工具，DevTools 还包括以下工具：
- 检查工具。 请参阅 使用检查工具通过将鼠标悬停在网页上来检测辅助功能问题。
- 设备仿真工具。 请参阅 模拟移动设备 (设备仿真) 。
- 命令菜单。 请参阅 使用 Microsoft Edge DevTools 命令菜单运行命令。
另请参阅
电源提示：使用命令菜单
DevTools 提供了许多可用于网站的特性和功能。 可以通过多种方式访问 DevTools 的不同部分，但通常一种快速方法是使用命令菜单。
在命令菜单中，这些工具称为“面板”;例如， “元素” 工具称为“ 元素” 面板。 若要切换到 “元素” 工具，请选择“ 元素 ”选项卡。
若要打开命令菜单，请执行以下操作之一：
- 单击“ 自定义和控制 DevTools () ”按钮，然后选择“ 运行命令”。
- 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。
“命令菜单”允许键入命令以在 DevTools 中显示、隐藏或运行功能。
- 单击“ 自定义和控制 DevTools (
在命令菜单中，开始键入工具的名称（如 更改），然后选择 “显示” 命令，例如 “显示更改”。 命令菜单显示匹配的命令：
按 Enter 选择 “显示” 命令，例如 “显示更改”。 所选工具将在底部的 “快速视图 ”面板中打开：
编辑 CSS 时， “更改” 工具很有用。 在此示例中，命令菜单提供了一种快速替代方法，可选择“ 更多工具 (+) 然后选择 ”更改”。 此示例还提供了在源工具中编辑
.js文件的替代方法，然后右键单击并选择“本地修改”。
另请参阅 使用 Microsoft Edge DevTools 命令菜单运行命令。
自定义 DevTools
可以自定义 DevTools 以满足工作方式的需求。 若要更改设置，请单击“ 自定义和控制 DevTools () ”按钮，然后选择 “设置 ” () ，或按 F1。
在“设置首选项”>页中，可以更改 DevTools 的多个部分。 例如，可以使用 浏览器 UI 语言 设置在 DevTools 中使用浏览器中使用的同一语言。 对于另一个示例，请使用 “主题” 设置更改 DevTools 的颜色主题。
还可以更改高级功能的设置，例如：
- 将本地文件添加到 工作区。
- 使用 忽略列表筛选库代码。
- 定义要包含在 设备 模拟和测试模式下的设备。 有关详细信息，请参阅 模拟移动设备 (设备仿真) 。
- 选择网络 限制 配置文件。
- 定义模拟 位置。
- 自定义键盘 快捷方式。 例如，若要在 DevTools 中使用与Visual Studio Code相同的快捷方式，请选择“匹配预设中的>快捷方式Visual Studio Code。
尝试试验性功能
DevTools 团队在 DevTools 中以 试验 的形式提供新功能。 可以打开或关闭每个试验。 若要查看 Microsoft Edge DevTools 中实验功能的完整列表，请在 DevTools 中，选择 “设置” () ，然后选择“ 试验”。
若要预览 DevTools 的最新功能，请下载夜间生成的 Microsoft Edge Canary。
另请参阅：