关于工具列表

2023-08-28 20:52| 来源: 网络整理| 查看: 265

关于工具列表项目 03/29/2023

DevTools 提供 35 种工具：

2 个工具栏图标，用于检查工具 () 和设备仿真 () 。 3 个永久工具栏选项卡，用于 “元素”、“ 控制台”和 “源” 工具。 30 个可选工具栏选项卡，用于可选工具。

默认工具，包括工具栏图标、工具栏选项卡和“ 更多选项卡 (”更多 ) 菜单上的工具：

“更多工具 (更多工具”图标) 菜单上默认未打开的可选：

以下功能是访问工具的其他方法：

抽屉是用于保存工具选项卡的附加工具栏和区域。命令菜单是一种直接使用工具功能的方法。 “设置”页可以打开工具的其他功能。所有工具概述

Microsoft Edge DevTools 包含以下工具。

工具用途文章 3D 视图工具浏览翻译为 3D 透视的网页。通过浏览 DOM 或 z 索引堆叠上下文来调试网页。使用 3D 视图工具导航网页层、z-index 和 DOM 动画工具使用动画工具中的动画检查器检查和修改 CSS 动画效果。检查和修改 CSS 动画效果应用程序工具使用应用程序工具管理 Web 应用页的存储，包括清单、服务辅助角色、本地存储、Cookie、缓存存储和后台服务。用于管理存储的应用程序工具更改工具跟踪你在 DevTools 中对 CSS 或 JavaScript 所做的任何更改。显示使用 DevTools 修改从服务器发送的网页文件后，对实际源文件所做的更改。使用“更改”工具跟踪对文件的更改控制台工具 DevTools 中丰富的智能命令行。与其他工具一起使用的出色配套工具。提供了一种功能强大的方法，可用于编写功能脚本、检查当前网页以及使用 JavaScript 操作当前网页。控制台概述覆盖工具帮助你查找未使用的 JavaScript 和 CSS 代码，以加快页面加载速度并保存移动用户的手机网络数据。使用覆盖率工具查找未使用的 JavaScript 和 CSS 代码 CSS 概述工具帮助你更好地了解页面的 CSS 并确定潜在的改进。 CSS 概述工具分离元素工具为了提高页面的性能，此工具会查找浏览器无法垃圾回收的分离元素，并标识仍在引用分离元素的 JavaScript 对象。通过更改 JavaScript 以释放元素，可以减少页面上分离的元素数，从而提高页面性能和响应能力。使用分离元素工具调试 DOM 内存泄漏开发人员资源显示网页的资源 URL。开发人员资源工具设备仿真使用设备仿真工具（也称为“设备模拟模式”或“设备模式”）来大致了解页面在移动设备上的外观和响应方式。 (设备仿真) 模拟移动设备元素工具检查、编辑和调试 HTML 和 CSS。可以在工具中编辑，同时在浏览器中实时显示更改。使用 DOM 树调试 HTML，并检查和处理网页的 CSS。使用“元素”工具检查、编辑和调试 HTML 和 CSS 检查工具使用 “检查” 工具查看有关呈现网页中的项的信息。当“检查”工具处于活动状态时，将鼠标悬停在网页中的项目上，DevTools 会在网页上添加信息覆盖和网格突出显示。使用“检查”工具分析页面问题工具 “问题”工具会自动分析当前网页，报告按类型分组的问题，并提供文档来帮助解释和解决问题。使用“问题”工具查找和修复问题 JavaScript 探查器工具此工具已替换为 “性能 ”工具和 “内存 ”工具。 JavaScript 探查器工具 Lighthouse 工具使用 Lighthouse 工具识别并修复影响网站性能、辅助功能和用户体验的常见问题。 Lighthouse 工具媒体工具使用此工具可按浏览器选项卡查看信息并调试媒体播放器。查看和调试媒体播放器信息内存工具查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。修复内存问题内存检查器工具使用内存检查器检查 JavaScript ArrayBuffer。使用内存检查器工具检查 JavaScript ArrayBuffer 网络工具使用网络工具确保按预期下载或上传资源。检查单个资源的属性，例如 HTTP 标头、内容或大小。检查网络活动网络条件工具使用网络条件工具可以禁用浏览器缓存、设置网络限制、设置用户代理字符串，以及设置内容编码，例如 deflate、gzip 和 br。网络条件工具网络控制台工具使用网络控制台工具对网络请求进行更改， (网络调用) 以了解失败的原因。更改和重播任何网络请求，并进行详细的网络 API 调用。网络控制台工具网络请求阻止工具使用网络请求阻止工具测试对指定 URL 模式的阻止网络请求，并查看网页的行为方式。网络请求阻止工具性能工具分析运行时性能，这是页面在运行时（而不是加载）的性能。性能工具简介性能监视器工具提供网页运行时性能的实时视图，以确定性能问题来自何处，使网站运行缓慢。查找问题是否来自内存或 CPU 使用率过高、布局和样式计算过于频繁，还是 DOM 节点和事件侦听器过多。使用性能监视器工具测量页面的运行时性能快速源工具使用源工具以外的工具时，请使用快速源工具显示或编辑源文件。使用快速源工具显示或编辑源文件呈现工具使用呈现工具查看网页的外观，以及不同的显示选项或视觉缺陷。呈现工具，用于查看具有不同显示选项或视觉缺陷的网页的外观搜索工具使用搜索工具查找网页的特定源文件，包括 HTML、CSS、JavaScript 和图像文件。使用搜索工具查找页面的源文件安全工具检查页面的安全性。使用安全工具了解安全问题传感器工具模拟不同的设备方向。使用传感器工具模拟设备方向源映射监视器工具使用源映射监视器工具监视源映射。源映射监视器工具源工具使用源工具可以查看、修改和调试前端 JavaScript 代码，并检查和编辑构成当前网页的 HTML 和 CSS 文件。源工具概述 WebAudio 工具使用 WebAudio 工具监视 WebAudio 流量。 WebAudio 工具使用 WebAudio API。 WebAudio 工具 WebAuthn 工具使用 WebAuthn 工具创建基于软件的虚拟验证器并与之交互。模拟验证器和调试 WebAuthn 欢迎工具首次打开 DevTools 时，将打开欢迎工具。它显示指向开发人员文档、最新功能、发行说明的链接，以及联系 Microsoft Edge DevTools 团队的选项。欢迎工具 “更多工具”菜单

main工具栏和抽屉工具栏上的“更多工具+ ” () 菜单是动态的：它省略了在该工具栏上打开的任何选项卡工具。

“自定义和控件 DevTools (中的“更多工具”菜单) 是静态的：它始终列出所有可选工具。如果所选工具是面板工具，则会在main工具栏中打开;如果是抽屉工具，则会在抽屉上打开。可以右键单击工具的选项卡，将其移动到另一个工具栏。

面板工具与抽屉工具

在命令菜单中：

面板工具是默认在main工具栏中打开的工具。

抽屉工具是默认情况下在 DevTools 底部的抽屉工具栏中打开的工具。按 Esc 显示或隐藏抽屉。

命令菜单首先列出面板工具，然后列出抽屉工具：

若要将工具移动到另一个工具栏，请右键单击该工具的选项卡，然后选择“ 移动到底部 ”或“ 移动到顶部”。

若要打开命令菜单，请按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。或者，单击“ 自定义和控制 DevTools () 按钮，然后选择“ 运行命令”。

关闭工具选项卡

若要关闭工具栏上的工具选项卡，请执行以下操作：

单击选项卡上的 x 。

无法关闭 “元素”、“ 控制台”和“ 源” 工具选项卡。

一次关闭所有可选选项卡：

右键单击工具栏上的可选选项卡， (具有 x 按钮的选项卡) ，然后选择“ 全部关闭”。

只有“元素”、“控制台”和“源”保留在main工具栏上。 (抽屉工具栏不受影响。)

如果关闭了抽屉上的所有选项卡，则只有 “控制台 ”选项卡保留在抽屉工具栏上。 (main工具栏不受影响。)

还原默认工具选项卡

还原main工具栏上的所有默认选项卡：

在 DevTools 中，选择 “设置” () >“首选项”。

单击 “还原默认值并刷新 ”按钮。

main工具栏再次包含所有默认选项卡。然后，抽屉只有“ 控制台 ”选项卡。

另请参阅 DevTools 概述 - 与本文类似，但覆盖面更广，对 DevTools 进行顶级介绍。在实验功能中使用焦点模式简化 DevTools。在焦点模式下，活动栏是main工具栏的紧凑替换，快速视图列表是抽屉工具栏上选项卡的替代项。

【本文地址】

公司简介

联系我们