先日リリースされた chrome 116で、開発者ツールに新たな機能が追加されましたね。特にスタイルシートのデバッグに関する機能改善、今までと比べてスタイルシートに関する問題の特定がしやすくなっています。これにより、スタイルが正しく適用されない問題を素早く特定し、修正することができます。
What’s New in DevTools (Chrome 116)
主な特徴
- Missing Stylesheets パネル: デベロッパーツールの Elements パネル内に新たに追加された「Missing Stylesheets」パネルでは、読み込まれなかったスタイルシートが一覧表示されます。これにより、どのファイルが読み込まれなかったかが一目で分かります。
- エラー詳細情報: パネル内では、各スタイルシートの読み込みエラーに関する詳細情報が提供されます。エラーの種類やエラーメッセージ、ファイルのパスなどが表示されるため、開発者は素早く問題の原因を特定できます。
- ソースプレビュー: 「Missing Stylesheets」パネル内で、読み込まれなかったスタイルシートの内容をプレビューすることが可能です。これにより、正しいスタイルが適用されているかどうかを確認できます。
「欠落しているスタイルシートのデバッグの改善」の機能は、`@import`, `url()`, `href`でうまく読込みが出来なかったものに対して下線とツールチップを付けてくれる優れもの。”ロードできなかった”, ”404で応答された” など、どんな風にうまくいってないのか教えてくれます。
- Failed to load resource: not::ERR_FILE_NOT_FOUND
- Failed to load resource: the sercer responded with a status of 404
「コンソール」や「ネットワーク」では、どのCSSファイルの何行目で問題が起きているのか確認できるようになっていて、これは大変便利です。開発効率の向上やクロスブラウジングの互換性向上にも貢献するこの機能を、積極的に活用してください。
