刷新开发者工具架构：迁移到 Web 组件

Jack Franklin

本文属于一系列博文的一部分，介绍了我们对 DevTools 架构所做的更改以及其构建方式。

在开发者工具刚刚问世的许多年前，该团队选择构建一个专属界面框架。这在当时是一个合理的选择，也为开发者工具提供了良好的服务。

但自那以后，该平台推出了各种功能，其中 Web 组件非常适合在开发者工具中构建新的界面元素。通过依赖平台提供的功能，我们可以大幅减少需要维护的自定义界面代码量，并将更多精力投入到为 DevTools 构建功能（而非支持自定义基础架构）上。

为帮助顺利完成过渡，我们创建了一份指南，介绍了如何在 DevTools 中构建界面元素，并与更广泛的 DevTools 团队分享。本指南中的一些内容专门针对开发者工具及其架构（它有自己的一套约束条件），但其中一些内容则是关于我们在构建、构建结构和测试 Web 组件时所用方法的通用指南。

今天，我们将在 goo.gle/building-ui-devtools 上公开发布本文档。如果您想详细了解 Web 组件如何在大型真实应用中使用，或者将组件集成到大型现有代码库时会遇到哪些挑战，本文档可以为您提供帮助和一些解答。如果您对我们的准则有任何疑问，欢迎随时在推特上与我联系。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并在用户发现问题之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。