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

DevTools の新機能（Chrome 116）

Sofia Emelianova

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

DevTools で、スタイルシートの欠落に関する問題をすばやく特定してデバッグできるように、いくつかの改善が行われました。

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

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

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

コンソールには、問題のある記述のある行へのリンクが表示されます。

[ネットワーク] パネルの [イニシエータ] 列には、読み込みに失敗したスタイルシートを参照する行へのリンクが一貫して入力されます。
[Issues] パネルには、URL の破損、失敗したリクエスト、@import ステートメントの不適切な配置など、スタイルシートの読み込みに関するすべての問題が一覧表示されます。

ソースとリクエストへのリンクを含む [Issues] パネル。

Chromium の問題: 1440626、1442198、1453611

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

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

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

Chromium の問題: 1421241

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

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

こちらのフィドルで機能をテストします。DevTools を開き、[アプリケーション] > [ストレージ] > [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）。
[ネットワーク] パネルでの HAR ファイルのアップロードとフィルタリングを修正しました。（1450622）
[Performance] パネルの Flamechart で、トレース間を小さくしてトレースをより適切にレンダリングできるようになりました（1452150）。
ソースマップに埋め込まれたファイルの自動マッピングを修正しました。（1446383）

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

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

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

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

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