この記事は、DevTools のアーキテクチャとその構築方法に対する変更について説明する一連のブログ投稿の一部です。
何年も前に DevTools が最初に作成されたとき、チームはカスタム UI フレームワークを構築することを選択しました。これは当時は妥当な選択であり、DevTools に役立ってきました。
しかし、それ以降、プラットフォームにはさまざまな機能が追加されています。そのうちの 1 つであるウェブ コンポーネントは、DevTools で新しい UI 要素を構築するのに適しています。プラットフォームが提供する機能に頼ることで、メンテナンスする必要がある独自の UI コードの量を大幅に削減し、独自のインフラストラクチャのサポートではなく、DevTools の機能の構築に多くのリソースを投入できます。
移行を支援するため、DevTools で UI 要素を作成するガイドを作成して、DevTools チーム全体と共有しました。このガイドの一部は、DevTools とそのアーキテクチャに固有の制約を伴うカスタム ガイドですが、一部は、Google がウェブ コンポーネントの構築、構造化、テストに使用したアプローチに関する一般的なガイドラインです。
このドキュメントは、goo.gle/building-ui-devtools で一般公開されています。大規模な実世界のアプリケーションで Web コンポーネントがどのように使用されているか、または既存の大規模なコードベースにコンポーネントを統合する際に発生する課題について詳しく知りたい場合は、このドキュメントが役に立ちます。ガイドラインについてご不明な点がございましたら、ツイートでお気軽にお問い合わせください。
プレビュー チャネルをダウンロードする
デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも先にサイトの問題を見つけることもできます。
Chrome DevTools チームに問い合わせる
次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。
- フィードバックや機能リクエストは crbug.com から送信してください。
- DevTools で [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
- @ChromeDevTools にツイートします。
- DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。