DevTools (Microsoft Edge 80) 中的新增功能
若要检查 Microsoft Edge DevTools 的最新功能以及 Microsoft Visual Studio Code 和 Visual Studio 的 Microsoft Edge DevTools 扩展，请阅读这些公告。
若要随时了解最新并获取最新的 DevTools 功能，请下载 Microsoft Edge 的预览体验成员预览版。 无论你使用的是 Windows、Linux 还是 macOS，都应考虑使用 Canary (或其他预览频道) 作为默认开发浏览器。 Microsoft Edge 的 Beta 版、Dev 版和 Canary 版本作为单独的应用运行，与 Microsoft Edge 的稳定发布版本并排运行。 请参阅 Microsoft Edge 预览体验成员频道。
有关最新公告， 请在 Twitter 上关注 Microsoft Edge 团队。 若要报告 DevTools 问题或请求新功能，请在 MicrosoftEdge/DevTools 存储库中提交问题。
Microsoft Edge DevTools 团队的公告
DevTools 的辅助功能改进
DevTools 团队为Chromium贡献了 170 个更改，以解决 DevTools 中的高影响颜色对比度、键盘和屏幕阅读器问题。 构建 Web 的每个开发人员都应能够使用 DevTools。
想要了解如何使你的网页可供所有用户访问？ 下载 Microsoft Edge 的辅助功能见解 和 webhint 扩展以开始使用。
如果使用屏幕阅读器或键盘在 DevTools 中导航，请通过 发微博 或选择“ 发送反馈 ”图标来发送反馈！
Chromium问题 #963183
另请参阅：
使用其他语言的 DevTools
许多开发人员使用其他开发人员工具，如 StackOverflow 和 Visual Studio Code，使用其母语，而不仅仅是英语。 我们很高兴地宣布 DevTools 的本地化，你现在可以在除英语以外的 10 种语言之一中使用：
- 中文 (简体) - 中文（简体）
- 中文 (繁体) - 中文（繁体）
- 法语 - 法语
- 德语 - deutsch
- 意大利语 - 意大利语
- 日语 - 日本登录
- 韩语 - 한국어
- 葡萄牙语 - português
- 俄语 - русский
- 西班牙语 - español
转到 edge://flags ，并将 “启用本地化开发人员工具” 标志设置为 “已启用”。 此外，将 “开发人员工具试验” 标志设置为 “已启用”。 重启 Microsoft Edge 并打开 DevTools。 DevTools 与在 中 edge://settings/languages用于 Microsoft Edge 的语言匹配。
如果要使用与可用语言不同的 DevTools，请在我们 发微博 或单击“ 发送反馈 ”图标。
Chromium问题 #941561
另请参阅：
webhint Microsoft Edge 扩展
借助 Webhint Microsoft Edge 扩展，可以轻松扫描网页，并在 DevTools 中获取有关辅助功能、浏览器兼容性、安全性、性能等的反馈。 有关详细信息，请参阅 https://webhint.io。
在 Microsoft Edge 中试用 webhint 浏览器扩展。 安装扩展后，打开 DevTools，然后选择 “提示” 工具。 在此处运行可自定义的站点扫描。 请前往 webhint.io 了解详细信息。
另请参阅：
3D 视图
使用 3D 视图 通过浏览 文档对象模型 (DOM) 或 z-index 堆叠上下文来调试 Web 应用程序。
若要访问 3D 视图，请转到 edge://flags 并确保“ 开发人员工具试验” 标志设置为 “已启用”。 重启 Microsoft Edge 并打开 DevTools。 在 DevTools 中按 F1，或打开“设置试验”>部分，然后打开“启用 3D 视图”复选框。 现在，按 Ctrl+Shift+P (Windows/Linux) 或 Command+Shift+P (macOS) ，键入 3D 视图，然后选择“ 显示 3D 视图”。
我们正在处理 UI，并向 3D 视图添加更多功能，因此请向我们发送反馈。
Chromium问题 #987787
另请参阅：
Visual Studio Code扩展
DevTools 团队还发布了一些适用于Visual Studio Code的扩展，使你可以直接从文本编辑器使用 DevTools 的功能。 查看以下扩展。
Microsoft Edge 的元素
通过添加 Microsoft Edge 的 Elements Visual Studio Code 扩展，从 Visual Studio Code 内使用 Elements 工具。
更新：从 2022 年起，Microsoft Edge 的 Elements 扩展现在是适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展。
有关详细信息，检查适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展。
Microsoft Edge 调试器
使用适用于 Microsoft Edge Visual Studio Code 的调试器扩展，直接从 Visual Studio Code 调试 Microsoft Edge 中运行的 JavaScript。
更新：从 2022 年起，Microsoft Edge Visual Studio Code 调试器扩展已替换为 Visual Studio Code 中适用于 Microsoft Edge 的内置调试器。 请参阅在 Visual Studio Code 中调试 Microsoft Edge。
webhint
webhint Visual Studio Code扩展用于webhint在编写网页时对其进行改进！ 此扩展运行并根据分析报告工作区文件webhint诊断。
详细了解 Visual Studio Code webhint 扩展。
另请参阅：
Visual Studio 集成
在 Visual Studio 2019 版本 16.2 或更高版本中，使用 Visual Studio 调试器调试在 Microsoft Edge 中运行的 JavaScript。 下载 Visual Studio 2019 以试用此功能。
阅读我们的博客文章，了解如何从 Visual Studio 调试 Microsoft Edge。
若要详细了解如何从 Visual Studio 调试 Microsoft Edge，请参阅 Visual Studio for Web 开发。
跟踪防护控制台消息
跟踪防护是 Microsoft Edge 中的一项独特功能，可阻止你在访问网站之前被网站跟踪。 默认跟踪防护设置为“平衡模式”，它阻止第三方跟踪器和已知的恶意跟踪器，以获得平衡隐私和 Web 兼容性的体验。 为了让你更深入地了解某些跟踪器被阻止时网页的兼容性，Microsoft Edge 团队在跟踪器被阻止时在 控制台 中添加了警告消息。
另请参阅：
Chromium项目的公告
以下部分介绍了 Microsoft Edge 80 中为开放源代码 Chromium项目提供的其他功能。
支持控制台中的 let 和类重声明
控制台现在支持对 和 class 语句进行let重新声明。 对于使用控制台试验新 JavaScript 代码的 Web 开发人员来说，无法重新声明是一个常见的烦恼。
警告
在 let 控制台外部或单个主机输入中的脚本中重新声明 或 class 语句仍会导致 SyntaxError。
例如，以前，使用 let重新声明局部变量时，控制台会引发错误：
现在，控制台允许重新声明：
Chromium问题 #1004193
另请参阅：
改进了 WebAssembly 调试
DevTools 已开始支持 DWARF 调试标准，这意味着增加了对 DevTools 中源语言中的单步执行代码、设置断点和解析堆栈跟踪的支持。
另请参阅：
- 在 DevTools (Microsoft Edge 92) 中的新增功能中筛选网络工具中的 Wasm 资源类型。
网络面板更新
“发起程序”面板中的请求发起程序链
现在可以将网络请求的发起方和依赖项作为嵌套列表进行查看。 这可以帮助你了解请求资源的原因，或者特定资源 (（例如脚本) ）导致的网络活动。
在“网络”面板中记录网络活动后，选择一个资源，然后转到“发起程序”面板以查看“请求发起程序链”：
- 检查的资源为粗体。 在上面的屏幕截图中，
ai.2.min.js是检查的资源。 - 所检查资源上方的资源是 发起程序。 在上面的屏幕截图中，
https://www.microsoftedgeinsider.com是 的ai.2.min.js发起方。 换句话说，https://www.microsoftedgeinsider.com导致 对ai.2.min.js的网络请求。 (屏幕截图显示过时的 URL。最新 URL 为https://www.microsoft.com/edge/download/insider.) - 检查的资源下面的资源是 依赖项。 在上面的屏幕截图中，
https://dc.services.visualstudio.com/v2/track是 的ai.2.min.js依赖项。 换句话说，ai.2.min.js导致 对https://dc.services.visualstudio.com/v2/track的网络请求。
还可以通过按住 Shift ，然后将鼠标悬停在网络资源上来访问发起方和依赖项信息。 请参阅网络功能参考中的显示发起程序和依赖项。
Chromium问题 #842488
在“概述”中突出显示所选网络请求
选择网络资源进行检查后，“网络”面板现在在 “概述”中在该资源周围放置蓝色边框。 这可以帮助你检测网络请求是否比预期更早或晚发生。
Chromium问题 #988253
请参阅网络功能参考中的隐藏概述窗格。
“网络”面板中的 URL 和路径列
使用网络工具中的新路径和 URL 列可显示每个网络资源的绝对路径或完整 URL。
若要显示新列，请右键单击 “瀑布” 表标题，然后选择“ 路径 ”或“ URL”。
Chromium问题 #993366
另请参阅：
更新了 User-Agent 字符串
DevTools 支持通过 “网络条件 ”面板设置自定义 User-Agent 字符串。 User-Agent 字符串会影响 User-Agent 附加到网络资源的 HTTP 标头，以及 的值 navigator.userAgent。
预定义 User-Agent 字符串已更新，以反映新式浏览器版本。
若要访问 网络条件， 请打开命令菜单 并运行 命令 Show Network Conditions 。
注意
Chromium问题 #1029031
另请参阅：
审核面板更新
在更高版本中， “审核 ”面板已重命名为 Lighthouse 面板。
新建配置 UI
配置 UI 采用新的响应式设计，并简化了限制配置选项。 有关限制 UI 更改的详细信息，请参阅 审核面板限制。
另请参阅：
覆盖工具更新
按函数或按块覆盖模式
“覆盖率”工具具有新的下拉菜单，可用于指定是应按函数还是按块收集代码覆盖率数据。 每个块 的覆盖范围更详细，但收集成本也高得多。 DevTools 现在默认使用 每个函数 覆盖率。
警告
你可能会注意到 HTML 文件中存在较大的代码覆盖率差异，具体取决于是 按函数 还是 按块 模式使用。 使用 按函数 模式时，HTML 文件中的内联脚本被视为函数。 如果脚本完全运行，DevTools 会将整个脚本标记为使用的代码。 如果脚本根本不运行，DevTools 会将脚本标记为未使用的代码。
现在，必须通过页面刷新启动覆盖
已删除不刷新页面的切换代码覆盖率，因为覆盖率数据不可靠。 例如，如果运行时很久以前且 V8 垃圾回收器已将其清理，则函数可能会报告为未使用。
Chromium问题 #1004203
另请参阅：
注意
此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。
