DevTools の新機能（Chrome 116）

Sofia Emelianova
Sofia Emelianova
GitHub

見つからないスタイルシートのデバッグを改善

スタイルシートが見つからないという問題をすばやく特定してデバッグできるように、DevTools が大幅に改善されました。

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

[ソース] パネルで、ツールチップ付きの下線付きステートメント。

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

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

  • [ネットワーク] パネルの [イニシエーター] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。

  • [問題] パネルには、URL の不整合、リクエストの失敗、@import ステートメントの配置ミスなど、スタイルシートの読み込みに関するすべての問題が一覧表示されます。

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

Chromium の問題: 1440626、1442198、1453611。

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

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

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

Chromium の問題: 1421241。

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

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

この Fiddle でこの機能をテストできます。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）。
  • [Coverage] パネルで、プリレンダリングの有効化やバック/フォワード キャッシュ ナビゲーションがあったかどうかが認識され、再読み込みを求めるメッセージが表示されるようになりました（1393057）。
  • これで、[ソース] > [ブレークポイント] ペインにキーボードで移動できるようになりました。上矢印と下矢印で移動し、スペースで選択します（1446150）。
  • [ネットワーク] パネルでの HAR ファイルのアップロードとフィルタリングを修正しました（1450622）。
  • [パフォーマンス] パネルのヒートマップでは、トレースの間のギャップを小さくして、レンダリングを改善しました（1452150）。
  • ソースマップに埋め込まれたファイルの自動マッピングを修正しました（1446383）。

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。