Visual Studio Code 试验中的开放源文件允许使用 Microsoft Edge DevTools，但随后可以在 Visual Studio Code 中编辑文件，而不是在 DevTools Sources 工具的代码编辑器中编辑文件。

使用此试验时，如果使用 Visual Studio Code并且使用 DevTools 更改 CSS 规则，则不再需要使用 DevTools 的源工具中的代码编辑器。 只需在 Visual Studio Code 中使用代码编辑器即可。 打开此试验时，本地文件将得到不同的处理。

首先，在 Visual Studio Code 中选择“DevTools >设置>试验>开放源文件”，然后重新启动 DevTools。

启用此试验后，假设在 Microsoft Edge 中，转到本地服务器 (（如 或 ) ），或打开本地文件。

打开 DevTools 时，系统会提示标识根文件夹。 可以通过选择 关闭 () 或选择按钮来 选择退出。 可以通过选择 链接获取详细信息。

如果选择“ 设置根文件夹 ”按钮，操作系统会提示你导航到文件夹并选择它。

选择根文件夹后，需要向 DevTools 授予对该文件夹的完全访问权限。 在工具栏上方，出现“ 允许” 或“ 拒绝 ”按钮的提示，询问是否授予 DevTools 访问文件夹的权限。

授予权限后，所选文件夹将添加为 DevTools 中的“工作区”，位于“源”工具的“文件系统”选项卡中。 这意味着，在 DevTools 中编辑的任何文件现在都打开在 Microsoft Visual Studio Code 中，而不是在源工具中打开。 作为指示器，我们在文件名旁边显示一个 图标。 在此示例中，我们将在“样式”工具中选择链接。

DevTools 将打开 Visual Studio Code 实例，并显示根文件夹中的所有文件。 DevTools 还会打开所选文件，滚动到 CSS 选择器的正确行。

对 DevTools 中的文件所做的任何更改现在都将同步到 Visual Studio Code。 例如，如果将规则添加到正文的样式，则同一 CSS 规则将自动添加到 Visual Studio Code 的代码编辑器中的 文件中。

若要更改 Visual Studio Code 试验中开源文件的行为，请转到“DevTools 设置”页，方法是单击“设置” (齿轮图标) 或按 Shift+？，然后选择“工作区”页：

“设置工作区”>页列出了工作区，以及以下配置选项：