适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展

适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展允许你直接从 Visual Studio Code 中使用 Microsoft Edge DevTools 和 Microsoft Edge 浏览器的嵌入式版本，包括设备仿真。 DevTools 扩展提供了许多与 Visual Studio Code 中 Microsoft Edge 浏览器中的 DevTools 相同的工具。

Visual Studio Code 中的 Microsoft Edge 开发人员工具和浏览器预览

Visual Studio Code 是一款轻量级但功能强大的源代码编辑器，适用于 Windows、Linux 和 macOS。 Visual Studio Code 是一个完整的 IDE (集成开发环境) ，具有强大的 Web 开发功能。 Visual Studio Code 包括对 JavaScript、TypeScript 和 Node.js 的内置支持，因此它是 Web 开发人员的绝佳工具，尤其是使用此 DevTools 扩展时。

用于 Visual Studio Code 的 DevTools 扩展使你能够：

  • 开发网页并使用 DevTools，而无需离开 Visual Studio Code。 此扩展提供了在浏览器窗口中使用 DevTools 进行网页开发的替代方法。

  • 模拟设备，例如在开发过程中以各种视区大小显示网页。

  • 在 Visual Studio Code 中测试网页的可访问性。

  • 实时编辑 CSS 和 SASS，在编辑实际源文件时查看更改立即反映在浏览器实例中。 CSS 镜像编辑允许您控制是否保存对文件的.css更改。 DevTools 可打开并编辑.css文件，但不会自动保存文件，以便你可以决定和控制是否保存在“元素”工具的“样式”选项卡中所做的更改。

比较的方法

适用于 Visual Studio Code 的 DevTools 扩展是使用 DevTools 更改本地文件的几种不同方法之一。

方法 优点和缺点 文章
浏览器 > DevTools >元素 工具 必须手动将更改从 DevTools 复制到源文件中。 使用 Elements 工具检查、编辑和调试 HTML 和 CSS
浏览器 > DevTools >源工具 >用于定义工作区的工作区选项卡 始终保存可能阻碍实验的更改 选择本地工作区，以使用 DevTools 编辑文件并将更改保存到磁盘源工具概述
浏览器 > DevTools >设置>试验>在 Visual Studio Code 中的打开源文件 始终保存可能阻碍实验的更改 在 Visual Studio Code 中打开源文件
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展 自动打开并编辑 CSS 源文件，但不会自动保存文件，因此你可以选择是否保存编辑。 本文。

2 向编辑

更改将反映在打开的文件夹、 Edge DevTools 选项卡和 Edge DevTools： 浏览器 选项卡中的源文件中，如下所示。

CSS

通过 CSS 镜像编辑，可以在 Edge DevTools 选项卡中更改 CSS，它会自动在或源文件中.html.css更改，并反映在 Edge DevTools：浏览器选项卡中。DevTools 允许你决定是否保存更改，从而允许你进行试验。

可以在或.html源文件中.css更改 CSS，保存更改，然后在 Edge DevTools： Browser 选项卡中重新加载网页，这也会更新 Edge DevTools 选项卡。

HTML

可以在 Edge DevTools 选项卡中编辑 DOM 树， (例如更改 <h2>Success!</h2> 为 <h2>CSS Success!</h2>) ，然后按 Enter，然后刷新 Edge DevTools：浏览器 选项卡以查看更改。 (这不会自动编辑 .html 源文件。)

可以更改源文件中的 .html HTML，保存更改，然后在 Edge DevTools： Browser 选项卡中重新加载网页，这也会更新 Edge DevTools 选项卡。

开发人员工具支持的任务

用于 Visual Studio Code 的 DevTools 扩展允许：

任务 文章
使用 DevTools 为项目启动新的浏览器实例。 打开 DevTools 和 DevTools 浏览器
模拟不同的设备并在不同的显示模式下查看您的项目。 设备仿真
使用 Elements 工具查看页面的运行时 DOM 结构和布局。 从元素工具打开源文件
使用实时预览和对项目源文件的实时更改来分析和更改项目的 CSS 样式。 在 CSS 镜像编辑) (样式工具中更新.css文件
使用 网络 工具分析站点流量。 网络工具集成
使用 控制台 工具记录信息、试用 JavaScript 并访问窗口/DOM。 控制台集成
使用 Application 工具检查存储和服务工作进程。 应用程序工具集成
在 Visual Studio Code 调试工作流中使用扩展。 与 Visual Studio Code 调试集成

DevTools 扩展中的工具概述

以下工具包含在适用于 Visual Studio Code 的 DevTools 扩展中。 以下文章并非专门针对适用于 Visual Studio Code 的 DevTools 扩展，而是针对 Microsoft Edge 浏览器 DevTools。

工具 用途 文章
元素 工具 检查、编辑、调试 HTML 和 CSS。 可以在工具中编辑，同时在浏览器中实时显示更改。 使用 DOM 树调试 HTML，并检查和处理网页的 CSS。 使用 Elements 工具检查、编辑和调试 HTML 和 CSS
控制台 工具 DevTools 中智能、丰富的命令行。 与其他工具一起使用的绝佳配套工具。 提供了一种编写功能脚本、检查当前网页以及使用 JavaScript 操作当前网页的强大方法。 控制台概述
网络 工具 使用 网络 工具确保正在按预期下载或上传资源。 检查单个资源的属性，例如 HTTP 标头、内容或大小。 检查网络活动
应用程序 工具 使用 应用程序 工具管理 Web 应用页面的存储，包括清单、服务工作线程、本地存储、cookie、缓存存储和后台服务。 用于管理存储的应用程序工具
问题 工具 问题 工具 会自动分析当前网页，报告按类型分组的问题，并提供文档来帮助解释和解决问题。 使用问题工具查找和修复问题
网络条件 工具 使用 网络条件 工具禁用浏览器缓存、设置网络限制、设置用户代理字符串和设置 Content-Encodings（如 deflate、gzip 和 br）。 网络条件工具
网络请求阻止 工具 使用 网络请求阻止 工具来测试对指定 URL 模式的阻止网络请求，并查看网页的行为方式。 网络请求阻止工具
检查 工具 使用 “检查 ” 工具查看呈现的网页中项的相关信息。 当 “检查 ”工具处于活动状态时，将 鼠标悬停 在网页中的项上，DevTools 会在网页上添加信息叠加和网格突出显示。 使用检查工具分析页面
设备仿真 使用 设备仿真 工具（也称为 设备模拟模式 或 设备模式）来大致了解页面在移动设备上的外观和响应方式。 (设备仿真) 模拟移动设备

有关 Microsoft Edge 浏览器版本的 DevTools 中所有工具的列表，请参阅关于 工具列表。

另请参阅

外部页面：

  • 上次更新时间为