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

DevTools の新機能（Chrome 116）

Sofia Emelianova

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

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

出典 >ページツリーには、混乱を最小限に抑えられるよう、正常にデプロイおよび読み込まれたスタイルシートのみが表示されるようになりました。
出典 >エディタで、失敗した @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] > [ストレージ >インデックス登録済みの 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 のショートカットについては、ポインタの代替アクションをご覧ください。
スクリーンリーダーの用途: <ph type="x-smartling-placeholder">
- チェックボックスのラベルが不必要に 2 回読み上げられることがなくなりました。
- [列ヘッダーの読み取り] を押すと、並べ替え可能な列の見出し名が読み上げられますできます。

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

Chromium の問題: 1446482、1414952。

その他のハイライト

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。