この投稿は、DevTools のアーキテクチャに加える変更とその構築方法について説明する一連のブログ投稿の一部です。
何年も前に DevTools が最初に作成されたときに、チームはオーダーメイドの UI フレームワークを構築することを選択しました。当時はこれが妥当な選択であり、DevTools の優れた機能でした。
しかしそれ以来、さまざまな機能がプラットフォームに搭載され、その一つであるウェブ コンポーネントが DevTools で新しい UI 要素を構築するのに最適です。このプラットフォームが提供する機能を活用することで、保守が必要なオーダーメイドの UI コードの量を大幅に削減し、オーダーメイドのインフラストラクチャのサポートではなく、DevTools の機能の構築により多くの投資を行うことができます。
この移行を支援するために、DevTools で UI 要素を作成するためのガイドを作成し、DevTools の幅広いチームと共有しています。一部のガイドは DevTools とそのアーキテクチャに合わせてカスタマイズされているため、独自の制約がありますが、一部はウェブ コンポーネントの構築、構造化、テストに使用したアプローチに関する一般的なガイドラインです。
本日、このドキュメントを goo.gle/building-ui-devtools で公開しました。実際の大規模なアプリケーションで Web Components がどのように使用されるか、または既存の大規模なコードベースにコンポーネントを統合する際の課題について疑問に思ったことがあるなら、このドキュメントが役立つ情報を提供します。ガイドラインについてご不明な点がございましたら、お気軽にツイートしてください。
プレビュー チャネルをダウンロードする
Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。
- crbug.com からご提案やフィードバックをお送りください。
- DevTools の問題を報告するには、DevTools でその他のオプション アイコン
> [ヘルプ] > [DevTools の問題を報告する] を選択します。 - @ChromeDevTools にツイートします。
- 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。