このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 116）

Sofia Emelianova

欠落しているスタイルシートのデバッグを改善

DevTools にさまざまな改善が加えられ、スタイルシートが欠落している問題を迅速に特定してデバッグできるようになりました。

[Sources] > [Page] ツリーには、混乱を最小限に抑えるために、正常にデプロイおよび読み込まれたスタイルシートのみが表示されるようになりました。
[ソース] > [エディタ] で、失敗した @import、url()、href ステートメントの横に下線が引かれ、インラインエラーツールチップが表示されるようになりました。

[Sources] パネルのツールチップに下線が引かれたステートメント。

コンソールに、失敗したリクエストへのリンクに加えて、読み込みに失敗したスタイルシートを参照する行へのリンクが表示されるようになりました。

コンソールには、問題のあるステートメントの正確な行へのリンクが表示されます。

[Network] パネルの [Initiator] 列には、読み込みに失敗したスタイルシートを参照している行へのリンクが常に入力されます。
[Issues] パネルには、無効な URL、リクエストの失敗、@import ステートメントの誤った配置など、スタイルシートの読み込みに関する問題がすべて一覧表示されます。

ソースとリクエストへのリンクが表示された [問題] パネル。

Chromium の問題: 1440626、1442198、1453611。

[要素] > [スタイル] > [イージングエディタ] でのリニアタイミングのサポート

[要素] > [スタイル] にある イージングエディタを使用すると、transition-timing-function と animation-timing-function の値をワンクリックで調整できます。このバージョンでは、のイージングエディタがリニアタイミング関数をサポートします。

リニアタイミングを設定するには、リニア選択ボタンをクリックします。コントロールポイントを追加するには、線上の任意の場所をクリックします。コントロールポイントを削除するには、そのコントロールポイントをダブルクリックします。linear、elastic、bounce、emphasized のいずれかのプリセットを選択することもできます。線形調整の動作を確認するには、動画をご覧ください。

Chromium の問題: 1421241。

ストレージバケットのサポートとメタデータビュー

[アプリケーション] > [ストレージ] セクションでは、ストレージバケットのサポートを利用できます。ストレージバケットは互いに独立しているため、データのスライスにエビクションの優先順位付けを指定し、最も価値のあるデータが削除されないようにすることができます。各ストレージバケットには、確立されたストレージ API（IndexedDB や CacheStorage など）に関連付けられたデータを保存できます。

機能をテストするには、こちらのフィドルをご覧ください。DevTools を開き、[Application] > [Storage] > [Indexed DB] に移動してコードを実行します。DevTools にバケットとその内容が表示されるようになりました。バケットを選択してメタデータを表示します。

バケットのメタデータを表示する。

統合されたメタデータビューは、ローカル、セッション、キャッシュストレージのセクションでも使用できるようになりました。

統合された新しいメタデータビュー。

Chromium の問題: 1448011、1406017。

Lighthouse 10.3.0

[Lighthouse] パネルで Lighthouse 10.3.0 が実行されるようになりました。特に注目すべき点として、このバージョンでは 4 つの新しい監査が追加され、テーブルヘッダーとキャプション、入力ボタン名、言語の不一致など、ユーザー補助機能に関するさまざまな問題が捕捉されます。次に例を示します。

渡されたテーブルヘッダーのチェック。

変更点の一覧もご覧ください。DevTools の [Lighthouse] パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助機能: キーボードコマンドと画面読み上げの改善

DevTools でより多くのショートカットがサポートされるようになりました。また、スクリーンリーダーの問題を修正します。

コンテキストメニューをキーボードショートカット（Windows と多くの Linux ディストリビューションでは Shift+F10 キーなど）で開けるようになりました。macOS のショートカットについては、ポインタの代替アクションをご覧ください。
スクリーンリーダーアプリ:
- チェックボックスのラベルが不必要に 2 回読み上げられることがなくなりました。
- [列ヘッダーを読み取る] ショートカットを押すと、並べ替え可能な列の見出し名が読み上げられます。

DevTools チームは、こうした改善を実現してくれた Yanling Wang と Elorm Coch に感謝の意を表します。

Chromium の問題: 1446482、1414952。

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

タイムラインを操作した後も、[ネットワーク] パネルはネットワークアクティビティを記録し続けます（1422552）。
[カバレッジ] パネルで、事前レンダリングの有効化やバックフォワードキャッシュナビゲーションの有無が認識され、再読み込みを求めるメッセージが表示されるようになりました（1393057）。
キーボードで [Sources] > [Breakpoints] ペインを移動できるようになりました。移動するには上矢印および下矢印を使用し、選択するには Space キー（1446150）を使用します。
[Network] パネルでの HAR ファイルのアップロードとフィルタリングを修正しました（1450622）。
[Performance] パネルのフレームチャートで、トレース間にわずかなギャップが追加され、レンダリングが改善されました（1452150）。
ソースマップに埋め込まれたファイルの自動マッピングを修正しました（1446383）。

プレビューチャンネルをダウンロードする

デフォルトの開発ブラウザとして Chrome の Canary、Dev、または Beta を使用することを検討してください。これらのプレビューチャンネルを使用すると、DevTools の最新機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーに先駆けてサイトの問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。