使用 DevTools 可以执行以下操作：

• 使用具有可视界面的 实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置，包括.html``.css``.js文件格式和.png文件格式。

• 模拟网站在不同设备上的行为方式，并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。

• 使用断点调试和实时控制台 调试JavaScript。 查找 Web 应用的内存问题和呈现问题。

• 查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复找到的辅助功能问题。

• 使用开发环境将 DevTools 中的更改与文件系统和 Web 同步。

在 Microsoft Edge 中，可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。

通过右键单击网页中的项打开 DevTools

打开 DevTools 的一个好方法是右键单击网页上的项，然后选择 “检查”

打开新选项卡时，让 DevTools 自动打开

若要让 DevTools 在浏览器中打开新选项卡时自动打开：

关闭 F12 键盘快捷方式

1. 在“ 开发人员工具 ”部分中，在 按下 F12 键切换时关闭“打开 DevTools ”。

可以使用鼠标或键盘与 DevTools 交互。 键盘快捷方式提供了访问功能的快速方法，并且是辅助功能所需的。 各种工具越来越多地通过键盘和辅助技术（如屏幕阅读器）访问。

使用辅助技术查看 和 。

可以将 DevTools 停靠在浏览器的右侧、左侧或底部，或将其撤并到单独的窗口中。 请参阅。

DevTools UI 是使用 HTML 和 CSS（如网页）实现的，因此可以使用标准键盘快捷方式进行放大和缩小。 DevTools 的缩放级别和呈现的页面是独立的。

若要缩放浏览器的 DevTools 部分，请执行以下操作：

若要缩放呈现的页面，请单击该页面，然后使用与上面相同的键盘快捷方式。

将缩放还原到 100%：

1. 请确保焦点位于浏览器的所需部分（DevTools 或呈现的页面）上。

若要缩放 DevTools 设置，请执行以下操作：

1. 在“DevTools 设置”中，单击右上角的 “关闭 (x) ”。
2. 更改 DevTools 的缩放级别，如上所述。
3. 单击 “设置 () 按钮。

若要使用命令菜单缩放 DevTools：

1. 单击 “自定义并控制 DevTools () 菜单按钮，然后选择 “运行”命令。
2. 在 命令菜单中，开始键入 缩放，然后选择缩放命令：

DevTools 工具提示功能可帮助你了解所有不同的工具和窗格。 请将鼠标悬停在开发人员工具的每个概述区域上，以了解有关如何使用工具的更多信息。 若要打开工具提示，请执行以下操作之一：

然后将鼠标悬停在开发人员工具的每个概述区域上：

要关闭工具提示，请按“Esc”。

DevTools 为你提供了极大的功能来检查、调试和更改当前显示在浏览器中的网站。 大多数工具实时显示更改。 实时更新使工具非常有用，无需刷新或生成即可优化 Web 项目的外观和导航或功能。

包含选项卡和页面的 Tabbed 工具面板

除了检查工具和****设备仿真) (几个图标工具外，DevTools 分为一组选项卡式工具，例如元素工具、控制台工具和源工具。 在 命令菜单中，工具称为 面板。 工具的选项卡包含包含工具 UI 的面板。

工具被组织成主工具栏和抽屉工具栏上的一组选项卡。 大多数工具也称为 面板。 面板是工具的内部 UI。 工具的选项卡可以显示在主工具栏和抽屉工具栏上。

在某些工具的面板中，有一个或多个选项卡集 (选项卡窗格) 。 例如，“ 元素” 工具包含一组选项卡，其中包括 样式、 事件侦听器和 辅助功能 选项卡。 对于其他工具，该工具的面板沿左侧列出了页面。

有两个工具栏：DevTools 顶部的主工具栏，以及按Esc下时底部的抽屉。

主工具栏包含以下功能：

• 控制台 工具。 永久。

下面介绍了工具栏功能。

单击“ 检查”工具 () 按钮，可以选择当前网页上的元素。 当 检查 工具处于活动状态时，可以将鼠标移动到网页的不同部分，以获取有关页面元素的详细信息，以及显示页面元素的布局尺寸、填充和边距的多色覆盖。

单击 设备仿真 () 按钮以模拟设备模式显示当前网站。 设备仿真工具允许你在调整浏览器大小时运行和测试产品的反应。 它还为你提供移动设备上的布局和行为估计。

包括有关 DevTools 的新功能、如何联系团队的信息，并提供有关某些功能的信息。

允许检查、编辑和调试 HTML 和 CSS。 可以在浏览器中实时显示更改时在工具中进行编辑。

元素工具始终存在于主工具栏上。

在 控制台 工具中，可以：

• 从网络请求或 JavaScript 日志语句查看和筛选记录的消息。
• 输入要实时评估的 JavaScript 语句。 表达式在当前上下文中进行计算，例如当 源 工具中的 JavaScript 调试器在断点处暂停时。

主工具栏和抽屉工具栏上始终存在 控制台 工具。

”工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。

源工具始终存在于主工具栏上。

使用 网络 工具可以监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应，以满足你的需求并模拟不同的网络条件。

确定潜在的 CSS 改进。

若要显示因窗口太窄而打开但隐藏的工具，请单击“ 更多”选项卡 () 按钮。

若要将工具添加到工具栏，请单击“ 更多工具 () 按钮。

• 包含一个 X红色圆圈，后跟在当前网页上自动检测到的 JavaScript 错误数。

• 包含感叹号的黄色三角形，后跟在当前网页上自动检测到的 JavaScript 警告数。

JavaScript 计数器按钮的工具提示是打开控制台以查看 # 错误， # 警告。

单击 JavaScript 错误计数器打开 并了解错误。

问题 计数器 () 按钮显示当前网页上自动找到的 HTML 或 CSS 问题数。

“问题”计数器的工具提示是 “打开的问题”以查看 # 问题。 按钮的图标是蓝色语音气泡图标，后跟 HTML 或 CSS 问题的数量。

单击 “问题”计数器 打开 ”工具。

若要打开“DevTools 设置” 网页，请单击 “设置 () 按钮。 “设置” 页包含以下子页：

若要打开“ 发送反馈 ”对话框，请单击“ 发送反馈 () 按钮。 随即打开“ 发送反馈 ”对话框。 输入信息以描述所发生的情况，并自动包含屏幕截图。 使用 "发送反馈 "与 DevTools 团队联系，报告问题、问题或提出建议。

自定义和控制 DevTools () 按钮将打开一个下拉菜单，用于定义停靠 DevTools、搜索、打开不同工具等的位置。

有关每个工具的摘要，请参阅 _“关于工具”列表_中。

通常可互换使用“tool”、“tab”或“panel”一词。 在命令菜单中，这些工具称为 面板;例如，“ 元素 ”工具称为 “元素 ”面板。 若要切换到 “元素” 工具，请选择 “元素” 选项卡。 有一个 “更多工具 ” (+) 按钮和列表，工具栏上有一个 “更多”选项卡 按钮，这两个选项卡都用于选择工具（也称为 面板）。

可以自定义每个工具，并且工具的内容可以根据上下文进行更改。

“更多工具” () + 中列出的工具可以显示为主工具栏) 上的面板工具 (，也可以在抽屉工具栏) 上 (抽屉工具。 在 命令菜单中，每个工具都标记为 面板 工具或 抽屉 工具。 但是，可以将它们添加到主工具栏或抽屉工具栏，并且可以使用以下任一方法来打开它们或在两个工具栏之间移动它们。

使用 “更多工具 ” (+) 菜单选择任何面板工具或抽屉工具。 “更多工具” 菜单显示在多个位置：

• 按钮，将鼠标悬停在 “更多工具 ”命令上，然后选择一个工具。

• 在 DevTools (顶部的主工具栏上， 面板 工具通常) 。

• 在 抽屉 工具栏 (抽屉 工具通常) 。

除了面板工具和抽屉工具，DevTools 还包括以下工具：

• “检查”工具。 请参阅 。
• 设备仿真工具。 请参阅 。

电源提示：使用命令菜单

DevTools 提供了许多可用于网站的功能和功能。 可以通过多种方式访问 DevTools 的不同部分，但通常快速使用命令菜单。

在命令菜单中，这些工具称为“面板”;例如，“ 元素 ”工具称为 “元素 ”面板。 若要切换到 "元素 "工具，请选择" 元素" 选项卡。

若要打开命令菜单，请执行以下任一操作：

• 单击 “自定义并控制 DevTools () ”按钮，然后选择

命令菜单允许键入命令以在 DevTools 中显示、隐藏或运行功能。 打开命令菜单后，输入“ 更改”一词，然后选择 “抽屉：显示更改”。

更改工具随即打开，这在编辑 CSS 时非常有用。 在这种情况下，命令菜单提供了一个快速的替代方法，即选择 “更多工具 (...) ，然后选择 ”更改“，或在 ”源“工具中编辑.js文件，然后右键单击并选择

键入 cha 后，命令菜单将显示以下选项：

按 Enter下，然后打开 “更改 ”工具：

可以自定义 DevTools 以满足工作方式的需求。 若要更改设置，请单击右上角) 的齿轮图标 (“设置 ”，或按下 F1。

在 “设置****首选项” > 页中，可以更改 DevTools 的多个部分。 例如，可以使用 "匹配浏览器语言 "设置在 DevTools 中使用浏览器中使用的相同语言。 有关另一个示例，请使用 Theme 设置更改 DevTools 的主题。

还可以更改高级功能的设置，例如：

• 具有 "忽略列表" 的筛选器库代码。
• 定义 设备 模拟和测试模式下要包括的设备。 有关详细信息，请参阅 。
• 选择网络 限制 配置文件。

DevTools 团队在 DevTools 中提供新功能作为_实验_。 可以打开或关闭每个试验。 若要查看的完整列表，请在 DevTools 中选择设置（齿轮图标），然后选择实验。

若要预览 ，请下载 该功能在夜间生成。

使用 DevTools 可以执行以下操作：

• 使用具有可视界面的 实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置，包括.html``.css``.js文件格式和.png文件格式。

• 模拟网站在不同设备上的行为方式，并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。

• 使用断点调试和实时控制台 调试JavaScript。 查找 Web 应用的内存问题和呈现问题。

• 查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复找到的辅助功能问题。

• 使用开发环境将 DevTools 中的更改与文件系统和 Web 同步。

在 Microsoft Edge 中，可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。

通过右键单击网页中的项打开 DevTools

打开 DevTools 的一个好方法是右键单击网页上的项，然后选择 “检查”

打开新选项卡时，让 DevTools 自动打开

若要让 DevTools 在浏览器中打开新选项卡时自动打开：

关闭 F12 键盘快捷方式

1. 在“ 开发人员工具 ”部分中，在 按下 F12 键切换时关闭“打开 DevTools ”。

可以使用鼠标或键盘与 DevTools 交互。 键盘快捷方式提供了访问功能的快速方法，并且是辅助功能所需的。 各种工具越来越多地通过键盘和辅助技术（如屏幕阅读器）访问。

使用辅助技术查看 和 。

可以将 DevTools 停靠在浏览器的右侧、左侧或底部，或将其撤并到单独的窗口中。 请参阅。

DevTools UI 是使用 HTML 和 CSS（如网页）实现的，因此可以使用标准键盘快捷方式进行放大和缩小。 DevTools 的缩放级别和呈现的页面是独立的。

若要缩放浏览器的 DevTools 部分，请执行以下操作：

若要缩放呈现的页面，请单击该页面，然后使用与上面相同的键盘快捷方式。

将缩放还原到 100%：

1. 请确保焦点位于浏览器的所需部分（DevTools 或呈现的页面）上。

若要缩放 DevTools 设置，请执行以下操作：

1. 在“DevTools 设置”中，单击右上角的 “关闭 (x) ”。
2. 更改 DevTools 的缩放级别，如上所述。
3. 单击 “设置 () 按钮。

若要使用命令菜单缩放 DevTools：

1. 单击 “自定义并控制 DevTools () 菜单按钮，然后选择 “运行”命令。
2. 在 命令菜单中，开始键入 缩放，然后选择缩放命令：

DevTools 工具提示功能可帮助你了解所有不同的工具和窗格。 请将鼠标悬停在开发人员工具的每个概述区域上，以了解有关如何使用工具的更多信息。 若要打开工具提示，请执行以下操作之一：

然后将鼠标悬停在开发人员工具的每个概述区域上：

要关闭工具提示，请按“Esc”。

DevTools 为你提供了极大的功能来检查、调试和更改当前显示在浏览器中的网站。 大多数工具实时显示更改。 实时更新使工具非常有用，无需刷新或生成即可优化 Web 项目的外观和导航或功能。

包含选项卡和页面的 Tabbed 工具面板

除了检查工具和****设备仿真) (几个图标工具外，DevTools 分为一组选项卡式工具，例如元素工具、控制台工具和源工具。 在 命令菜单中，工具称为 面板。 工具的选项卡包含包含工具 UI 的面板。

工具被组织成主工具栏和抽屉工具栏上的一组选项卡。 大多数工具也称为 面板。 面板是工具的内部 UI。 工具的选项卡可以显示在主工具栏和抽屉工具栏上。

在某些工具的面板中，有一个或多个选项卡集 (选项卡窗格) 。 例如，“ 元素” 工具包含一组选项卡，其中包括 样式、 事件侦听器和 辅助功能 选项卡。 对于其他工具，该工具的面板沿左侧列出了页面。

有两个工具栏：DevTools 顶部的主工具栏，以及按Esc下时底部的抽屉。

主工具栏包含以下功能：

• 控制台 工具。 永久。

下面介绍了工具栏功能。

单击“ 检查”工具 () 按钮，可以选择当前网页上的元素。 当 检查 工具处于活动状态时，可以将鼠标移动到网页的不同部分，以获取有关页面元素的详细信息，以及显示页面元素的布局尺寸、填充和边距的多色覆盖。

单击 设备仿真 () 按钮以模拟设备模式显示当前网站。 设备仿真工具允许你在调整浏览器大小时运行和测试产品的反应。 它还为你提供移动设备上的布局和行为估计。

包括有关 DevTools 的新功能、如何联系团队的信息，并提供有关某些功能的信息。

允许检查、编辑和调试 HTML 和 CSS。 可以在浏览器中实时显示更改时在工具中进行编辑。

元素工具始终存在于主工具栏上。

在 控制台 工具中，可以：

• 从网络请求或 JavaScript 日志语句查看和筛选记录的消息。
• 输入要实时评估的 JavaScript 语句。 表达式在当前上下文中进行计算，例如当 源 工具中的 JavaScript 调试器在断点处暂停时。

主工具栏和抽屉工具栏上始终存在 控制台 工具。

”工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。

源工具始终存在于主工具栏上。

使用 网络 工具可以监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应，以满足你的需求并模拟不同的网络条件。

确定潜在的 CSS 改进。

若要显示因窗口太窄而打开但隐藏的工具，请单击“ 更多”选项卡 () 按钮。

若要将工具添加到工具栏，请单击“ 更多工具 () 按钮。

• 包含一个 X红色圆圈，后跟在当前网页上自动检测到的 JavaScript 错误数。

• 包含感叹号的黄色三角形，后跟在当前网页上自动检测到的 JavaScript 警告数。

JavaScript 计数器按钮的工具提示是打开控制台以查看 # 错误， # 警告。

单击 JavaScript 错误计数器打开 并了解错误。

问题 计数器 () 按钮显示当前网页上自动找到的 HTML 或 CSS 问题数。

“问题”计数器的工具提示是 “打开的问题”以查看 # 问题。 按钮的图标是蓝色语音气泡图标，后跟 HTML 或 CSS 问题的数量。

单击 “问题”计数器 打开 ”工具。

若要打开“DevTools 设置” 网页，请单击 “设置 () 按钮。 “设置” 页包含以下子页：

若要打开“ 发送反馈 ”对话框，请单击“ 发送反馈 () 按钮。 随即打开“ 发送反馈 ”对话框。 输入信息以描述所发生的情况，并自动包含屏幕截图。 使用 "发送反馈 "与 DevTools 团队联系，报告问题、问题或提出建议。

自定义和控制 DevTools () 按钮将打开一个下拉菜单，用于定义停靠 DevTools、搜索、打开不同工具等的位置。

有关每个工具的摘要，请参阅 _“关于工具”列表_中。

通常可互换使用“tool”、“tab”或“panel”一词。 在命令菜单中，这些工具称为 面板;例如，“ 元素 ”工具称为 “元素 ”面板。 若要切换到 “元素” 工具，请选择 “元素” 选项卡。 有一个 “更多工具 ” (+) 按钮和列表，工具栏上有一个 “更多”选项卡 按钮，这两个选项卡都用于选择工具（也称为 面板）。

可以自定义每个工具，并且工具的内容可以根据上下文进行更改。

“更多工具” () + 中列出的工具可以显示为主工具栏) 上的面板工具 (，也可以在抽屉工具栏) 上 (抽屉工具。 在 命令菜单中，每个工具都标记为 面板 工具或 抽屉 工具。 但是，可以将它们添加到主工具栏或抽屉工具栏，并且可以使用以下任一方法来打开它们或在两个工具栏之间移动它们。

使用 “更多工具 ” (+) 菜单选择任何面板工具或抽屉工具。 “更多工具” 菜单显示在多个位置：

• 按钮，将鼠标悬停在 “更多工具 ”命令上，然后选择一个工具。

• 在 DevTools (顶部的主工具栏上， 面板 工具通常) 。

• 在 抽屉 工具栏 (抽屉 工具通常) 。

除了面板工具和抽屉工具，DevTools 还包括以下工具：

• “检查”工具。 请参阅 。
• 设备仿真工具。 请参阅 。

电源提示：使用命令菜单

DevTools 提供了许多可用于网站的功能和功能。 可以通过多种方式访问 DevTools 的不同部分，但通常快速使用命令菜单。

在命令菜单中，这些工具称为“面板”;例如，“ 元素 ”工具称为 “元素 ”面板。 若要切换到 "元素 "工具，请选择" 元素" 选项卡。

若要打开命令菜单，请执行以下任一操作：

• 单击 “自定义并控制 DevTools () ”按钮，然后选择

命令菜单允许键入命令以在 DevTools 中显示、隐藏或运行功能。 打开命令菜单后，输入“ 更改”一词，然后选择 “抽屉：显示更改”。

更改工具随即打开，这在编辑 CSS 时非常有用。 在这种情况下，命令菜单提供了一个快速的替代方法，即选择 “更多工具 (...) ，然后选择 ”更改“，或在 ”源“工具中编辑.js文件，然后右键单击并选择

键入 cha 后，命令菜单将显示以下选项：

按 Enter下，然后打开 “更改 ”工具：

可以自定义 DevTools 以满足工作方式的需求。 若要更改设置，请单击右上角) 的齿轮图标 (“设置 ”，或按下 F1。

在 “设置****首选项” > 页中，可以更改 DevTools 的多个部分。 例如，可以使用 "匹配浏览器语言 "设置在 DevTools 中使用浏览器中使用的相同语言。 有关另一个示例，请使用 Theme 设置更改 DevTools 的主题。

还可以更改高级功能的设置，例如：

• 具有 "忽略列表" 的筛选器库代码。
• 定义 设备 模拟和测试模式下要包括的设备。 有关详细信息，请参阅 。
• 选择网络 限制 配置文件。

DevTools 团队在 DevTools 中提供新功能作为_实验_。 可以打开或关闭每个试验。 若要查看的完整列表，请在 DevTools 中选择设置（齿轮图标），然后选择实验。

若要预览 ，请下载 该功能在夜间生成。

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。

作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。