Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に

先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。

What's New in DevTools (Chrome 116)

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• 正常に読み込まれなかったスタイルシートのデバッグ

正常に読み込まれなかったスタイルシートのデバッグ

Chrome 116のデベロッパーツールでは、欠落しているスタイルシートの問題をより迅速に特定し、デバッグできるようにするために多くの改良を加えました。

• 「ソース」>「ページ」ツリーで、正常に読み込まれたスタイルシートのみが表示されるようになり、混乱が最小限に抑えられます。
• 「ソース」>「エディタ」では読み込みに失敗した@import, url(), hrefで記述されたスタイルシートに下線が引かれ、そのスタイルシートの後にツールチップが表示されるようになりました。

読み込みに失敗したスタイルシートには下線が引かれる

missing-stylesheets.htmlはGitHubからダウンロードできます。

• 「コンソール」では、失敗したリクエストへのリンクに加えて、読み込みに失敗したスタイルシートを参照しているファイルの行へのリンクも表示されるようになりました。

参照しているファイルの行へのリンクが表示される

• 「ネットワーク」では、読み込みに失敗したスタイルシートを参照している行へのリンクがイニシエーター列に常に表示されます。

読み込みに失敗したスタイルシートが表示される

• 「問題」では、URLの間違い、リクエストの失敗、@import文の間違いなど、スタイルシートの読み込みに関するすべての問題が一覧表示されます。

スタイルシートの読み込みに関するすべての問題が一覧表示される