Visual Studio Code 扩展的 Edge DevTools 下载量已超过 100 万次，是时候回顾一下它的起源了
当我开始在 Microsoft 担任当前职务时，让我感到困扰的一件事是浏览器开发人员工具非常适合调试，但它们并没有更改原始代码。很快就可以找出为什么某些东西不起作用，并且使用可视化工具来解决问题很方便，但是您仍然需要记住您所做的更改并在编辑器中重复这些更改。
我们团队的一位工程师向我展示了他的一个想法。由于浏览器和编辑器（在本例中为 Visual Studio Code）都基于相同的平台（Chromium），因此可以将浏览器开发工具的便捷调试体验直接集成到编辑器中，而不仅仅是改变显示在浏览器中，还有生成它的源代码。
我立即抓住了这个想法，认为这是一个很棒的想法，在写了很多演示文稿和许多内部会议之后，我们获得了该产品的资金。
快进到现在， Visual Studio Code 扩展的 DevTools刚刚打破了 1M 安装标记。
我们每天还有大约 30,000 名用户，并获得了很多 [关于 GitHub 存储库的良好反馈](https://github.com/microsoft/vscode-edge-devtools/issues)。
我要感谢从开始到现在参与这个项目的每个人。我总是对开发团队有多少人才以及当你完全开放时迭代产品的速度感到谦卑。我还要感谢 Visual Studio Code 和 Visual Studio 团队，他们是很好的集成合作伙伴。这是一段疯狂的旅程，很高兴看到人们对你的工作感到非常兴奋。
如果您还没有尝试过扩展，那么它可以为您做的：
- 突出显示代码中的问题，并解释问题是什么以及如何解决它。这是实时的——所以当你开发你的产品时，你会得到关于你在做什么以及它造成什么损害的信息。
- 在浏览器预览中显示您的产品，并带有模拟选项（模拟不同的设备、暗/亮/高对比度等模式）并测试它的一些可访问性。
- 同步开发人员工具中的更改——例如使用源代码实时修复CSS问题
- 添加一个用于测试 JavaScript 的控制台
- 添加应用程序工具以检查在后台运行的存储和服务
- 允许您检查产品的网络流量
- 允许在源代码中设置断点并获取上下文调试器
虽然所有这一切都让我心中的 Web 开发人员非常兴奋，但我心中的 PM 也很高兴它对 Chromium 开发人员工具项目的意义（在所有基于它的浏览器中使用，Chrome、Microsot Edge、Brave …) 全部完成：
- 我们清理了一个超过 10 年历史的代码库，使其不再是浏览器中的单一盒子，而是允许单独使用开发者工具应用程序中的不同工具。
- 我们将 Chromium 的浏览器截屏升级为 VS 代码内的一个成熟的面板，它可以移动到您想要的任何地方，并且在覆盖和显示CSS功能时具有您在主浏览器窗口中的所有交互。
- 我们将问题面板的功能集成到您的代码中，以向您显示实时问题报告，包括可定制性
我们从发布此扩展中获得的许多知识可以回滚到开发人员工具本身，其中最大的一个是主浏览器窗口中的新模拟/响应式网页设计工具栏。
使用 Chromium 开发人员工具并将它们嵌入到不同的环境中可以获得更多收益，我很高兴我们能够做到这一点并达到这个里程碑。更多即将到来。
原文： https://christianheilmann.com/2022/09/15/celebrating-1m-installs-of-edge-devtools-for-vs-code/