我的前端工作流程通常是这样的
- 处理某个东西。
- 在自动刷新的浏览器中查看该东西。
- 发现该东西存在问题。
- 在开发者工具中检查并更正该东西。
- 在我的代码编辑器中应用正确的代码。
- 在浏览器中查看自动刷新的正确代码。
我知道，这并不总是很好。但我敢打赌，你至少偶尔也会做类似的事情。
这就是为什么我被 Chris Heilman 的文章标题所吸引的原因：“如果……你能将 Visual Studio Code 用作浏览器开发者工具的编辑器？”
这个想法是，VS Code 可以用作开发者工具的编辑器，我们今天可以通过将其作为一项实验性功能启用，以及与 Microsoft Edge 一起使用来实现。所以，不，这不是一个随时可用的通用功能，但请观看 Chris 如何激活该功能，将 VS Code 连接到开发者工具，授予开发者工具写入文件的权限，然后检查本地 URL 的页面。
现在，我在开发者工具中所做的更改可以同步回 VS Code，并且我可以直接访问从开发者工具打开和查看特定文件以查看我的代码上下文。我在开发者工具中所做的任何更改都会反映在 VS Code 文件中，而我在 VS Code 中所做的任何更改都会在浏览器中实时更新。太棒了。
我不确定这是否会成为 Edge 之外的事情，但这种跨平台的工作方式确实让我感到兴奋。
耶，感谢您推荐我的文章。我们目前正在对这些想法进行大量实验，并希望获得更多关于我们如何改进的反馈。我也刚刚在 Microsoft Edge 博客上发布 了关于其他想法，例如 VS Code 扩展中的 CSS 镜像。
我认为现在是时候关闭创作/调试循环了。
这最终是如何与源映射对抗的？它是否已经像魔法一样工作了？或者还有改进的空间？
由于越来越多的人使用 React 进行开发，并且许多人使用 Mui makeStyles 或其他一些 JS-CSS 解决方案，因此我想看看它是否能够聪明到足以在这些 JS 样式定义中进行样式更改。
不过，这确实很酷，VS Code 的未来对我来说总是令人惊叹的。
在 Chrome 开发者工具中，如果您授予其访问磁盘上文件的权限，即使使用 webpack（带有源映射），它也可以将脚本映射到磁盘上的文件。然后，浏览器中编辑的文件可以轻松保存到磁盘。
是的，您可以使用 Chrome 上的本地覆盖执行类似的操作。然后，您可以使用 VC 打开它们。您在开发者工具中更改的任何内容都会立即显示在 VC 上，反之亦然。
是的，Chrome 开发者工具，如果您授予其访问磁盘上文件的权限，它可以将脚本映射到磁盘上的文件，即使使用 webpack（带有源映射）。然后，浏览器中编辑的文件可以轻松保存到磁盘。
这非常酷——但我有点希望的是，一个直接安装在开发者工具中的 VS Code 编辑器面板，替换其内置的编辑器面板。
这都是 JS 和 DOM，所以在技术上应该是可能的，对吧？许多 VS Code 派生产品已经在网络上运行了。
感谢分享。虽然我了解这一点，但我一直难以使其正常工作，因为我正在使用一个名为 Node-RED 的低代码工具。
不过，我现在已经解决了。您可能需要手动添加多个文件夹，以便它能够在源文件和服务器呈现的内容之间进行映射。我不得不手动添加几个更深层的文件夹才能使其工作。
您没有说，但除了重新启动开发者工具之外，我还必须关闭并重新打开选项卡才能使一切正常工作。
“这个想法是，VS Code 可以用作开发者工具的编辑器，我们今天可以通过将其作为一项实验性功能启用，以及与 Microsoft Edge 一起使用来实现。”
所以基本上，MS 在他们的浏览器中添加了一个功能，Google 为他们开发了这个功能，它将 VSC 绑定到自动可视化结果……有点像 Dreamweaver 自 Macromedia 时代以来一直在做的事情。