如果......你可以使用Visual Studio Code作为浏览器内开发者工具的编辑器呢？

从微软Edge的下一个版本开始，我们正在进行一项实验，允许你使用Visual Studio Code作为浏览器内开发者工具的编辑器。这里有一个三分钟的视频，解释了为什么我们认为这是一个好主意。
    开发者工具有很好的视觉工具，允许你调整和调试前端代码。问题是，这些变化并不同步，一旦你重新加载页面，一切都会丢失。工作区是解决这个问题的一个功能，我在前一段时间写过关于工作区的博客。我们想利用Workspaces的同步功能，用Visual Studio Code取代Sources工具中的内置编辑器，有效地给你提供你所习惯的编辑器的便利和浏览器DevTools提供的可视化工具。

为此，我们想出了一个新的方法来调用一个工作空间，并使VS Code成为浏览器的编辑器。这是一个你需要在DevTools中通过选择齿轮图标打开的实验。
![experiments.png][1]

一旦你启用了 "Visual Studio Code中的开放源文件 "实验，当你在本地文件或本地服务器上工作时，浏览器会自动检测。

![experiment-sources-in-code-local-project.msft_.-1024x631.png][2]

然后它提示你定义这个文件的根文件夹，并告诉DevTools在哪里找到它。

![55.png][3]

你可以获得更多信息，或者跳过设置功能。一旦你按下了 "设置根文件夹"，你就可以用Finder或资源管理器（或你使用的其他任何文件管理器）挑选文件夹。

![66.png][4]

一旦选择了这个文件夹，DevTools就需要访问这个文件夹来写文件。

![77.png][5]

如果你授予了DevTools的访问权，激活工具中的任何链接现在将打开包含Visual Studio Code中所有文件的文件夹，而不是Sources工具中的内置编辑器。

![88.png][6]

你得到一个新的VS Code实例，文件在正确的行上打开。

![99.png][7]

你现在在DevTools中对CSS所做的任何改变都会改变文件，并反映在VS Code中。如果你在VS Code中做了改变并保存了文件，它也会在浏览器中同步。

![10.png][8]

你可以改变实验的设置，不在VS Code中打开文件，不实时同步修改。

![11.png][9]

你可以在[官方文档][10]中阅读更多关于这个问题的内容。你也可以在Twitter上@EdgeDevTools发表评论，或者直接使用工具中内置的反馈机制。

[1]: http://guobacai.com/usr/uploads/2021/10/1088927244.png
  [2]: http://guobacai.com/usr/uploads/2021/10/2900726724.png
  [3]: http://guobacai.com/usr/uploads/2021/10/1495148084.png
  [4]: http://guobacai.com/usr/uploads/2021/10/710051567.png
  [5]: http://guobacai.com/usr/uploads/2021/10/2369102849.png
  [6]: http://guobacai.com/usr/uploads/2021/10/917019534.png
  [7]: http://guobacai.com/usr/uploads/2021/10/422283827.png
  [8]: http://guobacai.com/usr/uploads/2021/10/636940035.png
  [9]: http://guobacai.com/usr/uploads/2021/10/3442587269.png
  [10]: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode

如果......你可以使用Visual Studio Code作为浏览器内开发者工具的编辑器呢？

评论已关闭